(JWT)OAuth 소셜 로그인 흐름이 어떻게 되나요?

Question

안녕하세요. 오키형님들.. 사이드 프로젝트에 OAuth 구글 로그인 도입 중 질문이 생겨서 찾아왔습니다.프론트는 Next.js로 다른 팀원 분이 담당해주시고 있습니다.저는 서버의 입장에서 소셜 로그인을 만들어드려야 하는데 몇 가지 헷갈리는 부분이 있어서요.원래 SSR로 처리하면 리다이렉트 되는것도 서버, 로그인 수행도 서버이기 때문에 문제가 안 되는데, 프론트와 나누려다 보니 생각보다 까다롭네요.제가 생각한 방법은 아래와 같습니다.사용자가 프론트(웹 사이트)에서 구글 계정으로 로그인 버튼 클릭 -> 'https://{서버도메인}/oauth2/authorization/google'로 이동사용자 로그인 성공 -> GCP에서 미리 등록해둔 리다이렉션 URL로 'code'를 가진채로 리다이렉트됨.이때 리다이렉트 되는 경로는 다음과 같음: 'https://{프론트도메인}/login/oauth2/code/google?code&#61;{구글 서버에서 발급한 코드}프론트 측에서는 받은 코드를 RequestParam에 담아 서버로 요청 서버는 받은 code를 가지고 새로운 유저정보를 DB에 저장 & Authentication을 등록하고 해당 정보를 통해 SimpleUrlAuthenticationSuccessHandler에서 토큰을 발급 & 'https://{프론트도메인}/home'로 sendRedirect이때 발급한 토큰을 ObjectMapper를 통해 JSON으로 변환해서 HttpServletResponse에 writer로 써주고있습니다.제가 프론트 경험이 없다보니 이렇게 하는게 맞는지 모르겠네요.또, 몇 가지 레퍼런스를 찾아보니 SuccessHandler에서 토큰은 쿠키로 담아 보내주기도 하는데 왜 그렇게 하는지, body에 ObjectMapper로 써주는 방식은 어떤 단점이 있는지 모르겠습니다..많은 도움 부탁드립니다ㅠㅠ

mongo · Answer

4번에서 리다이렉트 하신 이유가 뭔가요?

눈맞는뉴비 · Answer

유저가 구글 로그인 버튼을 클릭https://{백엔드 엔드포인트}/oauth2/authorization/google 로 접속백엔드는 구글 소셜로그인으로 리디렉션 하는 url생성 후 프론트에 전달유저는 소셜로그인에 인증인증이 완료되면 구글에서 콜백url로 코드를 담아 리디렉션프론트는 해당 코드를 백엔드로 전송백엔드는 해당 코드로 구글에 토큰 요청백엔드는 토큰을 발급받으면 그 토큰으로 다시 구글에 해당 유저 정보요청이후 해당 유저가 db에 없다면 저장하고 있다면 그걸 이용해 토큰 생성 후 프론트에게 전송 프론트가 응답을 확인 후 홈으로 가던 어디로 가던 설정해요.보통 백이 토큰을 httponly설정된 쿠키에 담아주면 같은 도메인에서의 모든 요청에 자동으로 토큰이 첨부돼요, 또 프론트에서는 자바스크립트로 해당 토큰에 접근 할 수 없구요.바디에 토큰을 담아주면 프론트에서 해당 토큰을 브라우저 저장소에 저장해서 관리하든 뭘 어떻게하든 관리해야 해요. 토큰이 필요한 요청에만 토큰을 첨부해서 보낼수 있고요. 직접 토큰을 관리하기 때문에 토큰의 유무에 따라 조건부렌더링을 구현하기 쉬울수도 있구요.

위카룬 · Answer

https://www.youtube.com/@xxxjjhhh/playlists요기 심화과정까지 잘 정리되어있습니다.

(JWT)OAuth 소셜 로그인 흐름이 어떻게 되나요?

3개의 답변

기술 목록