소셜 로그인 기능 구현_프론트엔드(Kakao,Naver,Google)

각자 애플리케이션 사이트에 들어가서 클라이언트 키 혹은 rest api 키 발급 받고 요청 URL 에 해당하는 값 넣으면 됨.

// 카카오 로그인
export function useAuthKakao() {
  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_KAKAO_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URL}&response_type=code`;
  return (window.location.href = kakaoURL);
}
// 구글 로그인
export function useAuthGoogle() {
  const googleURL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.REACT_APP_GOOGLE_CLIENT_ID}&response_type=token&redirect_uri=${process.env.REACT_APP_REDIRECT_URL}&scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile`;
  return (window.location.href = googleURL);
}
// 네이버 로그인
export function useAuthNaver() {
  const naverState = false;
  const naverURL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.REACT_APP_NAVER_CLIENT_ID}&state=${naverState}&redirect_uri=${process.env.REACT_APP_REDIRECT_URL}`;
  return (window.location.href = naverURL);
}

이후 해당 함수를 원하는 컴포넌트에서 호출시키면 일단 로그인 접근 하고 동의 후 code를 받고 redirect url 로 연결되는 과정까지 진행된다. 상세한 내용은 다음 포스팅에 해두겠음