'Spring Boot + React' 카카오 소셜 로그인 도입하기 (1)

2023년 9월 27일에 작성되었고, 블로그를 이전하며 옮겨온 포스트입니다.
여기에서 원본을 확인할 수 있습니다.

해커톤에서 진행하던 프로젝트를 이어서 개발하고 있는데, 소셜 로그인을 구현하기로 계획했다. 소셜 로그인 같은 경우에는 처음 개발해 보기 때문에 어떤 과정으로 개발을 해야하는지 처음에는 이해가 잘 되지 않았다. 그래서 정리도 할 겸,, 백엔드는 Spring Boot, 프론트엔드는 React를 사용하고 로그인 방식은 JWT 인증 방식을 사용하는 과정에서 카카오 소셜 로그인을 구현한 방법에 대해 적어보려 한다.

Spring Boot: 2.5.6
Java 11, JDK 11

Flow 이해하기

처음에 카카오 소셜 로그인을 도입하기 위해서 Kakao Developer에서 확인했던 사진이다. 지금 보면 어떤 과정을 이야기하는 것인지 이해할 수 있지만 카카오 소셜 로그인을 완성하기 전까지는 이해하기 어려웠다. 심지어 카카오 로그인만 이용하는 것이 아닌 자체 서비스의 로그인 기능도 있었기 때문에 자체 서비스 로그인 토큰을 발급하게 하고 싶었기 때문이다.

또한, 프론트엔드에서 할 일과 백엔드에서 해야 할 일을 정확하게 구분지을 수 없어서 더더욱 헷갈렸다.

그래서 많은 검색을 하고 질문을 하고 카카오 소셜 로그인을 구현한 후 정리한 과정은 위 사진과 같고 간략하게 정리하면 다음과 같다.

- 프론트엔드에서 인가코드 발급 API를 사용하여 인가코드를 백엔드에 전달한다.
- 백엔드는 받은 인가코드로 토큰을 발급받는다.
- 발급 받은 토큰으로 사용자 정보 API를 사용하여 카카오 사용자 정보를 추출한다.
- 추출한 사용자 정보로 우리 서비스의 회원에 등록한다.
- 원래 서비스에 로그인하는 방식과 동일하게 Access Token을 프론트엔드에 전달한다.
- 프론트엔드에서는 원래와 같이 Access Token으로 로그인 과정을 진행한다.

위 과정에서 4번부터는 일반 JWT를 이용한 로그인 과정과 동일하기 때문에 어렵지 않게 개발할 수 있었고 1~3번 과정을 알아내는데 시간이 조금 걸렸다. 지금 보면 쉬운데..

이 다음 글에서는 카카오 로그인 API를 백엔드에서 사용하는 방법과 사용자 등록 과정에 대해 더 자세히 적어보려한다.