feat(auth): 카카오 구글 소셜 로그인 구현

[lucaseunchae]

Pull Request

작업한 내용

• OAuth2 카카오, 구글 소셜 로그인 및 회원가입 기능을 구현 했습니다.

작업 상세 내용

• 소셜 로그인 인증 API 구현
• 소셜 계정 회원가입 API 구현

PR Point

• 변경사항 반영을 위해 데이터베이스 쿼리를 실행해주세요.
• 프론트엔드 .env 파일을 구글 드라이브에서 받아서 프로젝트에 업데이트해주세요.
• 백엔드 프로젝트에서 npm install 커맨드를 실행해 주세요.(패키지 추가됨)
• 모바일 환경에서 카카오 로그인시 카카오톡 앱으로 이동시키기 위해 카카오 SDK 방식을 사용 했습니다.

소셜 로그인 로직 순서도

참고 자료

백엔드 기능을 구현하면서 테스트할 때 작성한 프론트엔드 코드 입니다.

카카오 SDK init

<script
  src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
  integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
  crossorigin="anonymous"
></script>
<script>
  Kakao.init(import.meta.env.VITE_KAKAO_APP_KEY);
</script>

소셜 로그인 버튼

const isDevMode = import.meta.env.DEV;
const BASE_URL = isDevMode ? "http://localhost:5173" : "https://pogakco.site";
const GOOGLE_OAUTH_REDIRECT_URI = `${BASE_URL}/oauth/google`;
const KAKAO_OAUTH_REDIRECT_URI = `${BASE_URL}/oauth/kakao`;

...

<button
  onClick={() =>
    Kakao.Auth.authorize({
      redirectUri: KAKAO_OAUTH_REDIRECT_URI
    })
  }
>
  카카오 로그인
</button>
<a
  href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${
    import.meta.env.VITE_GOOGLE_CLIENT_ID
  }&redirect_uri=${GOOGLE_OAUTH_REDIRECT_URI}&response_type=code&scope=email`}
>
  구글 로그인
</a>

리다이렉트 페이지

OAuthRedirectPages.zip

논의 사항

• 카카오 소셜 로그인시 email을 필수(선택이 아닌)로 받아오려면 카카오측에 요청을 해야해서 일단은 소셜 계정 회원가입 API에서 email과 nickname을 받도록 구현 했습니다.
• 소셜 계정은 비밀번호가 없어서 마이페이지 접근시 비밀번호 검증하는 로직을 제거하고, 비밀번호 변경 페이지와 API를 분리해서 구현해야 될 것 같습니다.

closed #99