소셜 로그인 1: 사전 작업

소셜 로그인

팀 프로젝트를 진행하면서 일반 회원가입과 소셜 로그인 두 가지 방식을 병행하기로 했다.

사실 이번 프로젝트의 일반 회원가입은 이메일 인증도 해야해서 번거로운 감이 있어서 소셜 로그인이 편할것 같기는 하다.

소셜 로그인이 구현되면 수작업으로 테스트하기도 편할것 같아서 마음에 든다.

 

이번 프로젝트에서는 일단 oauth2-client 를 이용해서 구현했다.

스프링 시큐리티에서도 oauth2 로그인을 지원해주니까 이걸 이용할 수 있을거 같긴 한데 그건 다음에 시도 해봐야겠다.

구현 방법에 따라 흐름은 다를 수 있겠지만 본인이 구현한 대략적인 소셜 로그인 흐름은 아래와 같다.

리다이렉트 URL도 구현에 따라 다르게 설정해도 무방하다.

그림이랑 설명의 번호는 안맞으니까 적당히 보자.

1. 프론트에서 네이버, 카카오, 구글에서 제공하는 소셜 로그인 페이지로 이동시킨다.
   소셜 로그인 페이지로 이동 시킬 때 URL에 앱 client Id 와 리다이렉트 URL(Callback URL) 등이 포함된다.
   여기서 리다이렉트 URL은 아래와 같은 형태이다.
   {백엔드 도메인}/백엔드 소셜로그인 API 엔드포인트/{Provider 이름}
   ex) https://midcon.store/api/auth/oauth2/kakao
2. 사용자가 정보 입력, 개인정보 제공 동의 등의 소셜 로그인 과정을 진행 후 제출한다.
3. 1번에서 URL에 포함된 리다이렉트 URL을 백엔드 주소로 등록해서 리다이렉트 시킨다.
   리다이렉트 됐을 때 쿼리스트링 형태로 소셜 로그인 Provider에서 인증 코드를 전달 받는다.
   ex) https://localhost:8080/api/auth/oauth2/kakao?code={인증 코드}
4. 백엔드에서 리다이렉트 된 주소로 GET 요청을 받는다.
5. 3의 예시처럼 PathVariable과 QueryParam 형태로 Provider 이름과 인증 코드를 받아 Oauth2 인증 과정을 진행한다.
6. Oauth2 과정으로 Provider에서 받은 유저 정보로 서비스 정책에 맞게 회원가입 시키거나 accessToken을 발급한다.

본인이 사용한 플로우는 대략 위와 같다.

최종 결과물은 아래와 같이 회원가입 혹은 로그인 시킨 후 쿠키JWT를 발급하고 프론트 페이지로 리다이렉트 한다.

---

사용 기술

• Spring Boot 3.2.4 / gradle-kotlin
• Java 17
• webflux, oauth2-client

---

1. 사전 작업 - 네이버

소셜 로그인을 하려면 각 소셜 로그인 provider에 해당하는 앱 등록을 해둬야한다.

네이버 디벨로퍼스에서 앱 등록을 한다.

앱 등록하는건 간단하니까 각자 해보면 되고 필요한 부분만 체크했다.

서비스 URL은 본인이 사용할 도메인으로 설정한다.

로컬에서 할거면 localhost로 해주면 된다.

1-1. 클라이언트 ID, 시크릿 키

1-2. Callback URL(Redirect URL)

본인은 로컬에서 테스트할 때와 배포 URL 둘 다 해뒀다.

만약 로컬에서만 할거라면 빨간 색 부분만 추가해도 된다.

본인의 소셜 로그인 엔드포인트가 /api/auth/oauth2/{providerName} 이라서 아래처럼 했다.

엔드포인트를 다른거로 할거라면 마음대로 설정하면 된다.

 

참고로 백엔드에서 설정 할 리다이렉트 URL과 프론트에서 리다이렉트 시켜줄 리다이렉트 URL이 안맞으면 에러가 발생한다.

1-3. 멤버 등록

본인만 테스트할거라면 상관 없지만, 팀 프로젝트라서 팀원들도 소셜 로그인 할 수 있게 하려면 멤버 등록을 해줘야한다.

만약 앱 등록을 해서 통과 된다면 멤버 등록 없이도 할 수 있다.

본인은 아직 하지 않았지만 앱 등록하는게 그렇게 어렵지 않다고 하니 해보는것도 좋을것 같다.

---

2. 사전 작업 - 카카오

카카오 디벨로퍼스에 들어가서 앱 등록을 한다.

2-1. 클라이언트 ID

카카오는 클라이언트 ID와 시크릿 키가 따로 있다.

 

시크릿 키는 보안 탭에서 확인할 수 있다.

2-2. Callback URL(Redirect URL)

리다이렉트 URL은 네이버와 마지막 PathVariable만 다르게 설정해준다.

마찬가지로 로컬에서 할거면 빨간 영역만 해도 무방하다.

2-3. 멤버 등록

마찬가지로 앱 등록을 안하면 따로 멤버 등록을 해야한다.

---

3. 사전 작업 - 구글

구글 클라우드 콘솔에서 앱 등록을 한다.

3-1. 클라이언트 ID, 시크릿 키, Callback URL(Redirect URL)

API 및 서비스 탭으로 들어가서 사용자 인증 정보를 확인한다.

리다이렉트 URL은 네이버, 카카오와 마지막 PathVariable만 다르게 설정해준다.

마찬가지로 로컬에서 할거면 빨간 영역만 해도 무방하다.

3-2. 멤버 등록

마찬가지로 앱 인증 전에는 멤버를 수동으로 등록해줘야한다.