[SpringBoot + React] 카카오 소셜 로그인 REST API 방식 구현 - 1. 카카오 소셜 로그인 사전 준비사항

[SpringBoot + React] 카카오 소셜 로그인 REST API 방식 구현 - 1. 카카오 소셜 로그인 사전 준비사항

💡 목차
1. 카카오 소셜 로그인 사전 준비사항
2. 카카오 소셜 로그인 구조 분석
3. 구현 단계

 

글을 읽기 앞서 저는 React와 SpringBoot를 이용하여 카카오 소셜 로그인을 구현하는 과정을 담았습니다.

SpringBoot에서만 카카오 소셜 로그인을 수행하는 과정을 필요로 하신다면 제 글을 읽으실 필요는 없습니다.

프론트와 서버와의 일렬의 동작 과정을 보시고자 하신다면 첫 글부터 하나하나 읽어 주시면 감사하겠습니다.

 

⚠️ 참고로 저는 백엔드 쪽 작업을 담당하고 있어 백엔드 위주의 설명을 진행할 예정입니다.

 

프론트의 설명을 보고싶다면 

👀 프론트 (React 엿보고 오기)
프론트 카카오 소셜 로그인 구현 과정 (그림 포함)

[React + SpringBoot] 카카오 소셜 로그인 구현 (+ REST API)

 

 

이번 카카오 소셜 로그인은 보면서 여러 블로그들을 참고했었는데 OAuth2를 이용해서 CustomUserDetails을 만들어 진행하는 것 과, Kakao REST API를 이용하는 두 가지가 있는 것 같았습니다. 

 

OAuth2를 이용하면 편하게 소셜 로그인을 처리할 수 있다고 하지만, OAuth2에 대한 충분한 지식이 없다면 사용하기 어려우니 먼저 Kakao REST API를 이용하여 작업해 보시는 것을 추천드립니다. 

 

아래는 제가 참고한 카카오 로그인 REST API 공식 문서입니다.

Kakao Developers

 

카카오 소셜 로그인 과정은 초보자에게는 굉장히 어렵다고 느껴집니다. 제가 초보라서...

또한 카카오 로그인 REST API문서는 솔직히 조금 읽기가 불편합니다만... 꾸준히 읽다 보면 읽는 방법을 깨달으실 겁니다 ㅎㅎ 

REST API 문서를 꼭 읽어 보시는 것을 추천드리며, 이제 포스팅을 시작해 보도록 하겠습니다. 

---

1. 카카오 소셜 로그인 사전 준비사항

1. Kakao Developers에서 App 등록
2. 플랫폼 등록
3. Redirect URI 등록
4. 동의 항목 설정

카카오 로그인을 하려면 먼저 위의 4가지 설정을 하셔야 합니다.

아래 링크를 클릭하여 진행하시면 됩니다.

https://developers.kakao.com/console/app

카카오계정

 

Kakao Developers 설정

 

첫 작업으로 카카오 디벨로퍼에서 애플리케이션을 등록해 줍시다.

앱 이름, 사업자명은 저랑 다르게 진행하셔도 상관없습니다.

 

그러면 아래와 같이 테스트214 이름의 앱이 만들어지고, 앱 키가 제공됩니다. 

저희는 REST API 키를 이용할 것입니다. -> REST API 키는 카카오 Client-Id 가 됩니다.

⛔️ 주의 ⛔️
앱 키는 절대로 노출되면 안 됩니다. -> 저는 이 앱을 사용하지 않기 때문에 보여드리는 것입니다.
앱 키가 노출되면 저희가 만들 앱에 담긴 모든 정보가 노출될 위험이 있습니다.

 

 

위 이미지를 보시면 플랫폼이 비어있는 것을 볼 수 있는데

저는 웹 애플리케이션을 제작 중이기 때문에 Web 플랫폼을 등록하도록 하겠습니다.

 

백엔드와 프론트엔드 모두 테스트할 수 있도록 기본 도메인을 두 가지로 해 두었습니다. 

나중에 기본 도메인은 저희가 배포를 한 후에 그 URL을 입력해 주시면 됩니다. 

 

이제 왼쪽 사이드바에 카카오 로그인으로 갑시다!

활성화 설정을 켜주시고, 아래 ⭐️ Redirect URI ⭐️를 등록합니다. Redirect URI는 아주 중요합니다!!!!

 

 

Redirect URI

Redirect URI에 대해서는 따로 설명을 드리고자 합니다.

 

Redirect URI는 서버와 클라이언트 둘 모두 사용하게 되는데 정확하게 작성하지 않는다면 에러가 나기 때문에 조심하셔야 합니다.

 

프론트 클라이언트(React)에서 <a href="{Redirect URI}"> 태그를 타고 카카오 동의 항목을 다 수행하게 되면 Redirect URI 뒤에 "&code={인가 코드}"를 포함해서 클라이언트로 전달해 줍니다.

 

따라서 저희 백엔드는 클라이언트가 넘겨주는 인가코드를 포함한 Redirect URI Controller를 통해 카카오 Auth Server에 접근하여 카카오 로그인과 토큰을 발급받아 프론트로 정보를 전달해 주게 됩니다.

// 서버 Controller 
@GetMapping("/login/oauth2/callback/kakao")

 

 

Redirect URI를 클라이언트 쪽 URL로 작성하는 이유는 저희 앱의 동작 과정은 클라이언트에서 로그인을 수행 후 서버에서 토큰을 발급해 주기 때문입니다.

 

자세한 이미지는 구현하면서 보여드리도록 하겠습니다.

 

 

동의 항목 설정

이제 마지막으로 카카오 로그인 시에 사용자에게서 받아올 정보를 선택해 보도록 합시다.

 

저는 이번 프로젝트에서는 아래 세 가지 항목만 사용할 예정입니다.

 

 

 

 

여기까지 하셨다면 여러분들은 일단 기본 세팅을 끝내신 겁니다. 수고하셨습니다 ㅎㅎ

 

다음 글에서 이제 Kakao Social Login 구조를 분석해 보도록 하겠습니다.

 

💡 목차
1. 카카오 소셜 로그인 사전 준비사항
2. 카카오 소셜 로그인 구조 분석
3. 구현 단계