[Spring] 배포환경에서 소셜로그인 구현 (Kakao/Google/Naver)

배포 환경에서의 소셜 로그인

로컬에서는 localhost 기준으로 Redirect URI를 등록하면 소셜 로그인을 테스트할 수 있다.
하지만 실제 배포 환경 소셜로그인을 사용하기 위해서 각 플랫폼마다 요구하는 조건이 있다.
이번 프로젝트에서는 네이버, 카카오, 구글 로그인을 붙이면서 그 조건들의 차이를 확인했다.

먼저 Spring Security의 Oauth2를 사용해 리다이렉트(콜백) URL을 {BaseURL}/login/oauth2/code/{registrationId} 로 설정했다.

인증/검증은 JWT accessToken사용 중이다.

1. Naver

- Naver Developers 사이트

위 사이트에 들어가서 먼저 Application을 등록해야 한다.
등록하면 주는 클라이언트 ID, 시크릿 키는 API 호출 시 환경변수 등록을 위해 저장해 준다.

등록 후 Redirect URL이 가장 중요한데 나는 로컬 테스트용 하나 배포용 하나 이렇게 등록했다.
도메인까지 입력 후 뒤에 /login/oauth2/code/naver을 추가해준다.

네이버는 배포환경에서 소셜로그인을 사용하기 위해서는 검수 요청을 받아야한다.
웹 사이트의 로그인이 완료되기까지의 플로우를 캡쳐해서 네이버 개발자 센터에 검수 받으면 된다.

네이버 개발자 검수 요청 가이드

2. Google

- Google Cloud 사이트

위 사이트 들어가서 새 프로젝트를 생성한다.
OAuth 2.0 클라이언트 ID를 만들어야되는데 API 및 서비스 -> 사용자 인증 정보 들어가서 만들면 된다.
여기서도 구글 클라이언트 아이디랑 시크릿 키 주니까 잘 저장해 준다.

여기서도 Redirect URL 가장 중요한데 구글에서는 특히나 중요하다.
구글은 도메인을 ip주소로 입력하면 리다이렉션을 허용해주지 않는다.

예를 들어 EC2로 배포 시 x.x.x.x:8080 이라는 도메인을 주는데 이렇게 입력하면 안되고 도메인 주소를 구매 후 리다이렉션 창에 입력해야 승인해준다.

우리는 가비아에서 도메인 하나를 구매 후 입력했다. (로컬용 하나, 배포용 하나)
마찬가지로 도메인 + /login/oauth2/code/google

3. Kakao

- 카카오 개발자 사이트
카카오가 소셜로그인 중에서는 가장 간단하다.
얘는 위 사이트 들어가서 앱 만들고 비즈앱 등록하면 사실상 끝이다.

먼저 앱을 만들고 비즈앱을 등록한다.
그리고 앱 -> 플랫폼 키를 들어가서 클라이언트 아이디와 시크릿 키를 저장한다.

여기도 리다이렉트 URL이 가장 중요하다.
도메인 + /login/oauth2/code/kakao 추가해주면 된다.

카카오는 또 하나 필요한게 카카오 로그인 사용 설정을 ON으로 바꿔줘야 한다.

---

소셜로그인 구현 플로우

1. 프론트 로그인 버튼 클릭
   ↓
2. 프론트가 백엔드 로그인 시작 URL로 이동
   https://api.musicpeak.site/oauth2/authorization/{registrationId}
   ↓
3. Spring Security가 소셜 로그인 페이지로 redirect
   ↓
4. 사용자가 플랫폼에서 로그인/동의
   ↓
5. 플랫폼이 백엔드 callback URL로 code 전달
   https://api.musicpeak.site/login/oauth2/code/{registrationId}
   ↓
6. Spring Security가 code로 플랫폼 access token 요청
   ↓
7. Spring Security가 플랫폼 사용자 정보 조회
   ↓
8. CustomOAuth2UserService 실행
   • 기존 회원인지 확인
   • 없으면 회원가입
   • musicianId를 OAuth2User attributes에 넣음
     ↓
9. OAuth2SuccessHandler 실행
   • musicianId 꺼냄
   • JWT accessToken/refreshToken 생성
   • 쿠키에 저장
     ↓
10. 백엔드가 프론트 성공 페이지로 redirect
    https://www.musicpeak.site/auth/success
    ↓
11. 프론트 AuthSuccess 페이지에서 /api/me 호출
    credentials: "include"
    ↓
12. 백엔드 JwtAuthenticationFilter가 쿠키의 accessToken 검증
    ↓
13. /api/me 성공 응답
    ↓
14. 프론트가 메인페이지로 이동
    https://www.musicpeak.site