[Spring boot - OAuth2] Kakao Login 구현 #02

0. 전체 Flow

Kakao Developers에 소개된 카카오 로그인 flow는 다음과 같다. 

오늘은  Step 1  부분을 구현해보고자 한다. 

나는 Vue.js로 프론트를, Spring boot로 백을 구현하였다. 

 

①  Vue.js 에서 url을 클릭하여 카카오톡 로그인 화면을 받아오고, 화면에 출력
②  사용자가 카카오톡 로그인을 한다.
③  Kakao Auth Server에서 Redirect URI로 인가 코드를 전달한다.
④  Spring boot로 ③에서 준 코드를 받으면 끝 !

 

 

1. Frontend 설정

Kakao Developer에서 로그인 버튼 이미지를 다운받아서 간단히 다음과 같이 화면을 구상해두었다.

(redirect uri는 스프링 포트쪽 http://localhost:3001/kakao로 진행)

 

<a href="https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code">
  <img src="@/assets/kakao_login_medium_narrow.png" />
</a>

 

 

2. backend 환경설정

2-1. build.gradle

oauth2 로그인 구현을 위해 spring boot 프로젝트의 build.gradle dependencies에 oauth-client와 security를 추가해주었다.

(접근 문제가 있어서 이 과정 잠시 제외)

 

2-2. application.yml

카카오의 경우, provider를 직접 입력해줘야 하므로 application.yml 파일에 다음과 같은 설정을 추가해야 한다.

 

spring: 
  datasource:
    driver-class-name: ********
    url: ********
    username: ********
    password: ********
    
  security:
    oauth2:
      client:
        registration:
          kakao:
            client-id: [ REST API KEY ]
            redirect-uri: [ Redirect URI ]
            authorization-grant-type: authorization_code
            client-authentication-method: POST
            client-name: Kakao
            scope:
              - account_email
        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id

 

 

2-3.  code 출력하는 API 작성해보기

이제 환경 설정이 완료되었으므로
 (client) 요청 → (카카오 서버) code 발급 → (server) Redirect URI에서 코드 받고 출력 테스트를 진행해봤다. 

 

// OAuthController.java

package com.surveasy.surveasy.controller;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequiredArgsConstructor
public class OAuthController {

    @ResponseBody
    @GetMapping("/kakao")
    public void kakaoCallBack(@RequestParam String code) {
        System.out.println(code);
    }
}

 

 

실행 결과, code가 잘 들어온 것을 확인할 수 있다 !