[Spring] 스프링 프로젝트에 카카오 로그인, 회원가입 구현 - (1)

 

 

개요

프로젝트를 진행하면서 소셜 로그인을 통해서 간편 로그인을 만들었다.

이번 포스팅에서 카카오 로그인을 React - Spring Boot간의 REST API로 구현하는 방법에 대해서 소개하겠다.

본론

카카오 developers에 정보 등록하기

먼저 카카오 developers에 가입해서 현재 프로젝트 애플리케이션을 등록해주어야한다.

 

Kakao Developers

카카오 developer에 로그인해준 후 내 애플리케이션으로 들어간다.

그 후 애플리케이션 추가하기 버튼을 눌러 애플리케이션에 대한 정보들을 기입해준다.

이때 기입한 정보들은 나중에 카카오 로그인 페이지로 들어가면 나오는 기본 정보들에 포함되어 나오게 된다.

우측의 탭들 중에서 카카오 로그인에 들어가준다.

이때 우측 상단에 동의 화면 미리보기를 누르면 사용자들이 로그인 페이지로 접근했을 때 나오는 페이지를 확인해볼 수 있다.

REST API로 카카오 로그인을 적용하기 위해서는 Client Secret을 발급받아야 하는데 우측의 카카오 로그인 탭의 세부 탭들 중 보안 탭에 들어가서 Client Secret을 발급받는다.

동의 항목 선택하기

카카오 로그인 탭의 세부 탭들 중에서 동의 항목들을 선택하고 필수, 선택 등의 옵션도 줄 수 있다.

여기서 비활성화되어 있는 동의항목을 설정하기 위해서는 비즈앱 전환을 하면 되는데 이 방식은 따라가다보면 할 수 있다.

위에 있는 개인정보 동의항목 심사 신청을 누르고 따라가면 된다.

여기까지하면 구현을 위한 기본 설정은 끝이 난다.

카카오 회원가입 흐름

1. 프론트엔드에서 카카오 로그인 화면을 사용자에게 띄워준다.
2. 사용자가 카카오 계정을 통해 로그인하면 설정한 redirect uri로 리다이렉트되며 쿼리 파라미터 ?code={code}로 카카오 인가 코드가 발급된다.
3. 프론트엔드는 REST API를 통해 해당 code를 백엔드로 회원가입 요청을 보낸다.
4. 서버에서는 해당 인가 코드를 이용하여 코드에 대한 토큰을 카카오에게 발급받는다.
5. 발급받은 토큰을 사용하여 사용자 정보를 카카오에 요청한다.
6. 카카오로부터 받은 사용자 정보를 기반으로 하여 서비스에 회원가입 로직을 처리해준다.

만약 카카오로부터 받는 정보 외에도 필요한 정보가 있다면 프론트에 따로 구현해서 필요한 정보 + 코드로 REST API 요청을 하면된다.

카카오 로그인 흐름

1. 프론트에서 카카오 로그인 화면을 사용자에게 띄워준다.
2. 사용자가 카카오 계정을 통해 로그인하면 설정한 redirect uri로 리다이렉트되며 쿼리 파라미터 ?code={code}로 카카오 인가 코드가 발급된다.
3. 프론트엔드는 REST API를 통해 해당 code를 백엔드로 회원가입 요청을 보낸다.
4. 서버에서는 해당 인가 코드를 이용하여 코드에 대한 토큰을 카카오에게 발급받는다.
5. 발급받은 토큰을 사용하여 사용자 정보를 카카오에 요청한다.
6. 카카오로부터 받은 사용자 정보를 기반으로하여 서버에 저장된 데이터와 비교하여 일치한다면 토큰을 발급해준다.

다음 포스트에서 구현에 대한 내용을 다루겠다.