[SpringBoot + React] 카카오 소셜 로그인 REST API 방식 구현 - 2. 카카오 소셜 로그인 구조 분석

[SpringBoot + React] 카카오 소셜 로그인 REST API 방식 구현 - 2. 카카오 소셜 로그인 구조 분석

💡 목차
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 문서를 꼭 읽어 보시는 것을 추천드리며, 이제 포스팅을 시작해 보도록 하겠습니다. 

---

2. 카카오 소셜 로그인 구조 분석

앞서 이전 포스트를 보고 마무리하고 오셨다고 가정한 후에 진행하는 포스트입니다.

 

 

카카오 소셜 로그인 과정

먼저 카카오 로그인 REST API 문서에 나와있는 동작 과정에 제가 몇 가지 URL을 써 두었습니다. 지금은 이해가 안 가시겠지만 나중에 다시 보시면 이해가 되실 겁니다.

 

그림에서의 1번 과정부터 살펴보도록 하겠습니다.

 

⚠️ 그림과 제가 설명하는 내용은 살짝 다릅니다. 저는 프론트에서 인가 코드를 받아 와서 서버(SpringBoot)로 인가 코드를 전달하여 토큰을 발급하고 전달하는 형태입니다. 6번까지는 그림과 설명이 조금 다르니 주의하고 들어주시면 감사하겠습니다. 

 

카카오 로그인 인가 코드 받기

 

 

프론트에서 먼저 아래 코드블럭의 주소로 요청을 보내게 됩니다. 그러면 카카오 로그인 동의 항목이 출력되고, 프론트의 Redirect URI에 인가코드를 포함한 URI를 얻을 수 있습니다.  해당 수행 과정이 1, 2, 3, 4, 5, 6 과정이 수행되는 것입니다.

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

프론트에서 카카오 소셜 로그인을 진행하기 위한 코드 예시

 

위 작업을 시작하면 url에 '?code=어쩌구저쩌구이상한문자열'이 프론트 라이브서버에서 출력되는 것을 볼 수 있습니다.

 

카카오 로그인 동의항목 이후 인가 코드로 토큰 받기

 

그 후 프론트에서 GET 메서드를 이용해 서비스 서버로 저의 프로젝트 현재 Redirect URI 뒤에 code를 포함해서 스프링 서버(Service Server)에 요청하게 됩니다. -> 현재까지가 토큰 받기의 1번 이전 과정을 나타내며 이제 토큰 받기의 1번 과정을 수행을 시작하게 됩니다.

 

백엔드 서버에서 받아오는 코드(code)

http://localhost:3000/login/oauth2/callback/kakao/code={인가 코드}

 

스프링 서버(Service Server)에서는 토큰 받기의 1번 과정을 수행하기 위해서 프론트에서 전달한 code의 값을 꺼내서 그 코드 값과 함께 kauth.kakao.com/oauth/token으로 전달합니다.

 

response_type=code의 code는 프론트(React)에서 전달하는 것입니다. (VS Code 아래 이미지 참고)

@GetMapping("/login/oauth2/callback/kakao")
public ResponseEntity<LoginResponseDto> kakaoLogin(HttpServletRequest request) {
    String code = request.getParameter("code");
    String kakaoAccessToken = authService.getKakaoAccessToken(code).getAccess_token();
    return authService.kakaoLogin(kakaoAccessToken);
}

 

그 후 카카오 토큰을 받기 위해 아래 URL로 POST 요청을 보내야 합니다. (Kakao Social Login REST API 문서 참조)

https://kauth.kakao.com/oauth/token

 

카카오 서버에 접근 가능한 인증 토큰을 받아 오면 User 정보를 받아와야 합니다. 따라서 아래의 URL로 위에서 받아온 토큰을 header에 포함해 아래의 URL로 GET또는 POST 요청을 보냅니다.

https://kapi.kakao.com/v2/user/me

요청을 수행하면 아래와 같은 결과를 받는데 길어서 생략하도록 하겠습니다...

REST API 문서의 '사용자 정보 가져오기' 부분을 참고해 주세요!

HTTP/1.1 200 OK
{
    "id":123456789,
    "connected_at": "2022-04-11T01:45:28Z",
    "kakao_account": { 
        // 프로필 또는 닉네임 동의 항목 필요
        "profile_nickname_needs_agreement	": false,
        // 프로필 또는 프로필 사진 동의 항목 필요
        "profile_image_needs_agreement	": false,
        "profile": {
            // 프로필 또는 닉네임 동의 항목 필요
            "nickname": "홍길동",
            // 프로필 또는 프로필 사진 동의 항목 필요
            "thumbnail_image_url": "http://yyy.kakao.com/.../img_110x110.jpg",
            "profile_image_url": "http://yyy.kakao.com/dn/.../img_640x640.jpg",
            "is_default_image":false
        },
        // 이름 동의 항목 필요
        "name_needs_agreement":false
        
        중략...

 

이제 위와 같은 정보를 Response 받으셨다면 카카오에서 제공하는 기본적인 토큰을 통해 정보 가져오기가 성공한 것입니다!!!

 

백엔드 서버에서는 Response 데이터를 DTO 클래스에 담아서 서비스 구조에 맞게 로그인 처리나 회원가입을 하시면 됩니다!

 

다음 글에서 이제 Kakao Social Login 직접 구현해보기 예시를 보여드리겠습니다.

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