[Spring] 스프링 OAuth2 카카오 로그인 과정 (OAuth2 스프링 5편)

https://growth-coder.tistory.com/142

[Spring] 스프링 OAuth2 네이버 로그인 (OAuth2 스프링 4편)

지난 포스팅에 이어서 이번 시간에는 OAuth2 카카오 로그인을 구현해보려고 한다.

 

카카오 로그인은 다음과 같이 진행된다.

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code-info

위 단계대로 따라해보려고 한다.

kakao developers 세팅

우선 Kakao Developers에 접속한다. 계정이 없다면 카카오 계정을 바탕으로 개발자 계정을 생성해준다.

https://developers.kakao.com/

Kakao Developers

내 애플리케이션 -> 애플리케이션 추가하기에 들어간다.

필요 정보들을 입력하고 저장한다.

생성한 애플리케이션에 들어가면 다음과 같은 화면이 보인다. 이 중 REST_API 키는 아래에서 사용할 예정이다.

 

좌측의 카카오 로그인에 들어가서 카카오 로그인을  활성화 해준다.

같은 페이지에서 Redirect URI을 등록해준다.

 

카카오 로그인을 진행하면 등록한 Redirect URI로 리다이렉트 되는데 Authorize code값을 얻을 수 있다.

 

나의 경우 http://localhost:8080/oauth2/kakao?code={코드 값} 이 URI로 리다이렉트 된다.

 

이 코드 값으로 Access Token을 요청할 수 있다.

STEP 1 : 인가 코드 받기

1. GET /oauth/authorize

우선 GET 요청을 보낸다. 다음 url에 접속하면 GET 요청이 보내진다.

 

REST_API_KEY는 요약 정보에서 확인 가능하며 REDIRECT_URI는 우리가 등록한 URI이다.

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

 

2. 카카오계정 로그인 요청

 

위 URI에 접속하면 아래처럼 카카오 로그인 화면이 렌더링 될 것이다.

 

계정이 존재하면 

3. 카카오계정 로그인

 

자신의 카카오 계정으로 로그인 한다.

 

4. 동의 화면 출력

 

나는 이미 로그인한 기록이 있어서 동의 화면이 따로 출력되지는 않았다.

 

동의하고 계속하기를 누른다.

 

5. 동의하고 계속하기

 

위와 동일

 

6. 302 REDIRECT URI로 인가 코드 전달.

 

HTTP/1.1 302 Found
Content-Length: 0
Location: ${REDIRECT_URI}?code=${AUTHORIZE_CODE}

아래처럼 REDIRECT URI 쿼리스트링으로 인가 코드를 받았다.

현재 우리가 설정한 redirect uri 요청에 대한 컨트롤러가 매핑되지 않았기 때문에 페이지를 찾지 못했다는 에러가 발생한다.

 

그런데 따로 페이지를 만들 필요는 없다. 인가 코드를 받으면 바로 Access Token을 발급받고 다시 리다이렉트 해 줄 것이기 때문이다.

 

STEP 2 : 토큰 받기

위에서 redirect uri의 페이지를 따로 만들 필요는 없지만 이 redirect uri 요청을 받아서 Access Token을 발급 받아야하기 때문에 컨트롤러에 redirect uri를 매핑해준다.

 

@RequestMapping("/oauth2/kakao")
public class KakaoController {
    //redirect uri에 전달된 코드 값을 가지고 Access Token을 요청한다.
    @GetMapping("/")
    public String getAccessToken(@RequestParam("code") String code) {
        //액세스 토큰 요청 
    }
}

 액세스 토큰 요청 형식은 다음과 같다.

POST /oauth/token HTTP/1.1
Host: kauth.kakao.com
Content-type: application/x-www-form-urlencoded;charset=utf-8

request parameter는 필수값만 사용하도록 하겠다.

 

다음 컨트롤러는 Redirect 요청을 받아서 code로 토큰 요청을 보내고 결과를 출력하는 코드이다.

@Controller
@RequestMapping("/oauth2/kakao")
public class KakaoController {
    //redirect uri에 전달된 코드 값을 가지고 Access Token을 요청한다.
    @GetMapping
    public String getAccessToken(@RequestParam("code") String code) {
        System.out.println("code = " + code);

        // 1. header 생성
        HttpHeaders httpHeaders = new HttpHeaders();
        httpHeaders.add(HttpHeaders.CONTENT_TYPE, "application/x-www-form-urlencoded;charset=utf-8");

        // 2. body 생성
        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
        params.add("grant_type", "authorization_code"); //고정값
        params.add("client_id", "REST_API_KEY 입력");
        params.add("redirect_uri", "http://localhost:8080/oauth2/kakao"); //등록한 redirect uri
        params.add("code", code); 

        // 3. header + body
        HttpEntity<MultiValueMap<String, String>> httpEntity = new HttpEntity<>(params, httpHeaders);

        // 4. http 요청하기
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<Object> response = restTemplate.exchange(
                "https://kauth.kakao.com/oauth/token",
                HttpMethod.POST,
                httpEntity,
                Object.class
        );

        System.out.println("response = " + response);

        return "home";
    }


}

<출력값>

response = <200 OK OK,
	{
		access_token=[액세스 토큰], 
    	token_type=bearer, refresh_token=[refresh 토큰], 
    	expires_in=21599, 
    	refresh_token_expires_in=5183999
	},
    [
    	Date:"Tue, 23 May 2023 22:59:40 GMT", 
    	Content-Type:"application/json;charset=utf-8", 
    	Transfer-Encoding:"chunked", 
        Connection:"keep-alive", 
    	Cache-Control:"no-cache, 
        no-store, max-age=0, 
        must-revalidate", 
    	Pragma:"no-cache", 
        Expires:"0", 
        X-XSS-Protection:"1; 
        mode=block", 
    	X-Frame-Options:"DENY", 
        X-Content-Type-Options:"nosniff", 
        Kakao:"Talk", 
    	Access-Control-Allow-Origin:"*", 
        Access-Control-Allow-Methods:"GET, 
        POST, 
        OPTIONS", 
    	Access-Control-Allow-Headers:"Authorization, 
        KA, 
        Origin, 
        X-Requested-With, 
        Content-Type,Accept"]
 >

이 response에서 원하는 값을 꺼내오면 된다. ex) access token, refresh token

 

oauth 카카오 로그인 과정을 알아보았다.

 

그런데 우리가 직접 이런 식으로 구현할 필요가 없다. 스프링에서 이러한 과정을 자동으로 해주기 때문이다.

 

다음 포스팅에는 이전 포스팅에서 만들었던 구글, 페이스북, 네이버 로그인에 이어 카카오 로그인도 추가해보려고 한다.

 

참고

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code-info

https://withseungryu.tistory.com/116