(SpringBoot + React) 카카오 소셜 로그인 REST API 방식 구현 – 1. 카카오 소셜 로그인 사전 준비
💡목차
1. 카카오 소셜 로그인 사전 준비 사항
2. 카카오 소셜 로그인 구조 분석
3. 실장 단계
기사를 읽기 전에, 나는 React와 SpringBoot를 사용하여 카카오 소셜 로그인을 구현하는 과정을 거쳤습니다.
SpringBoot에서만 카카오 소셜 로그인을 수행하는 프로세스가 필요한 경우 내 기사를 읽을 필요가 없습니다.
프런트와 서버와의 일렬의 동작 과정을 보고 싶은 경우는, 최초의 기사로부터 하나하나 읽어 주셔서 감사합니다.
⚠️ 덧붙여서 나는 백엔드측의 작업을 담당하고 있어 백엔드 중심의 설명을 진행할 예정입니다.
이번 카카오 소셜 로그인은 보면서 몇개의 블로그를 참고로 했습니다만, OAuth2를 이용해 CustomUserDetails를 작성해 진행하는 것과, Kakao REST API를 이용하는 2개가 있는 것 같습니다.
OAuth2를 이용하면 편하게 소셜 로그인을 처리할 수 있다고 하지만, OAuth2에 대한 충분한 지식이 없으면 사용하기 어렵기 때문에, 우선 Kakao REST API를 이용해 작업해 보는 것을 추천합니다.
아래는 제가 참고로 한 카카오 로그인 REST API 공식 문서입니다.
카카오 개발자
카카오 API를 활용하여 다양한 애플리케이션을 개발하세요. 카카오 로그인, 메시지 전송, 친구 API, 인공 지능 API 등을 제공합니다.
developers.kakao.com
카카오 소셜 로그인 과정은 초보자에게 매우 어렵다고 느껴집니다.
저는 초보자입니다…
또한 카카오 로그인 REST API 문서는 솔직히 읽는 것이 불편하지만 … 꾸준히 읽으면 읽는 방법을 깨닫습니다.
REST API 문서를 반드시 읽어 보시기 바랍니다.
1. 카카오 소셜 로그인 사전 준비 사항
1. Kakao Developers로 앱 등록
2. 플랫폼 등록
3. Redirect URI 등록
4. 동의 항목 설정
카카오에 로그인하려면 먼저 위의 네 가지 설정을 수행해야 합니다.
아래 링크를 클릭하여 진행합니다.
https://developers.kakao.com/console/app
카카오 계정
accounts.kakao.com
Kakao Developers 설정
첫 번째 작업에서 카카오 개발자로 애플리케이션을 등록해 봅시다.
앱명, 사업자명은 나와 달리 진행해도 상관없습니다.
이렇게 하면 다음과 같이 테스트 214명의 앱이 만들어지고 앱 키가 제공됩니다.
우리는 REST API 키를 사용합니다.
-> REST API 키는 카카오 Client-Id입니다.
⛔️주의⛔️
앱 키는 절대로 공개하지 마십시오. -> 이 앱을 사용하지 않으므로 보여드리겠습니다.
앱 키가 게시되면 생성한 앱에 포함된 모든 정보가 공개될 위험이 있습니다.
위의 이미지를 보면 플랫폼이 비어 있음을 알 수 있습니다.
웹 응용 프로그램을 만들고 있으므로 웹 플랫폼을 등록합니다.
백엔드와 프런트 엔드를 모두 테스트할 수 있도록 두 개의 기본 도메인을 사용했습니다.
나중에 기본 도메인은 Google이 배포한 후 해당 URL을 입력합니다.
그럼 왼쪽 사이드 바에 카카오 로그인으로 가자!
활성화 설정을 켜고 아래 ⭐️ Redirect URI ⭐️을 등록합니다.
Redirect URI는 매우 중요합니다!
!
!
!
Redirect URI
Redirect URI에 대해서는 별도로 설명합니다.
Redirect URI는 서버와 클라이언트를 모두 사용하지만 올바르게 작성하지 않으면 오류가 발생합니다.
프런트 클라이언트(React)에서태그를 타고 카카오 동의 항목을 모두 실행하면 Redirect URI 다음에 ‘&code={허가 코드}’가 포함된 클라이언트에 전달됩니다.
그러므로 우리의 백엔드는 클라이언트에 의해 전달됩니다 인증 코드를 포함하는 Redirect URI Controller를 통해 카카오 Auth Server에 액세스하고 카카오 로그인 및 토큰을 발행하여 정보를 프런트에 전달합니다.
// 서버 Controller
@GetMapping("/login/oauth2/callback/kakao")
Redirect URI를 클라이언트 측 URL에 쓰는 이유는 앱의 운영 프로세스가 클라이언트로 로그인한 후 서버에서 토큰을 발급하기 때문입니다.
자세한 이미지는 구현하면서 보여 드리겠습니다.
동의 항목 설정
마지막으로 카카오 로그인 시 사용자로부터 받을 정보를 선택해 봅시다.
이번 프로젝트에서는 다음 세 가지 항목 만 사용할 계획입니다.
여기까지 하면 여러분은 한 번 기본 설정을 마친 것입니다.
수고하셨습니다ㅎㅎ
다음 기사에서는 Kakao Social Login 구조를 분석해 보겠습니다.
💡목차
1. 카카오 소셜 로그인 사전 준비 사항
2. 카카오 소셜 로그인 구조 분석
3. 실장 단계