React - Java Spring Boot 프로젝트에서 카카오 로그인 api 기능 구현하기

요즘 웹 어플리케이션이든 모바일 어플리케이션이든 로그인, 회원가입 기능을 구현할 때 카카오, 구글, 페이스북 등으로 로그인을 하는 기능을 구현하는 것은 기본이 됐습니다.

 

그 중 카카오 로그인을 리액트와 자바 스프링부트 프로젝트에서 구현하는 방법이다.

 

가장 먼저 할 일은 카카오 디벨로퍼에서 앱을 생성하는 것이다.

 

 

https://developers.kakao.com/

Kakao Developers

카카오 디벨로퍼에 로그인을 한 후, 상단의 네비게이션 바에서 내 어플리케이션을 누른 후,

 

 

애플리케이션 추가하기 버튼을 클릭하고 내 앱을 생성한다.

 

 

앱을 추가하는 과정을 다 끝마치고, 내 앱으로 들어가게 되면 좌측 메뉴바에서 앱키라는 항목으로 들어가게 되면, 이 앱에서 사용할 앱 키들이 플랫폼 별로 쫙 나열되어 있다.

 

 

리액트 - 스프링부트 프로젝트에서 사용할 앱 키는 두 종류다. 먼저 REST API키와 JavaScript 키 이다. 자바스크립트 키는 프론트엔드에서 사용하고, REST API키는 백엔드에서 사용하는 키이다.

 

 

다시 좌측의 앱 설정 메뉴에서 플랫폼을 클릭하고, Web부분에 사용하는 도메인을 등록하고, Redirect URI를 등록한다.

 

 

그러면 일단 기본적인 로그인을 구현하기 위한 설정은 끝이 난다.

 

코드

그럼 어떻게 요청하고 정보를 받는지 코드를 살펴보겠다.

 

import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  const handleLogin = () => {
    const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=자바스크립트앱키&redirect_uri=리다이렉트URI&response_type=code`;
    window.location.href = KAKAO_AUTH_URL;
  };

  return (
    <>
      <button onClick={handleLogin}>카카오톡 로그인</button>
    </>
  );
}

export default App;

 

쿼리 스트링에 client_id는 자바스크립트 앱키를 넣고, redirect_uri에는 아까 등록한 redirect_uri를 입력하고, 버튼을 클릭하면 카카오 로그인 페이지로 넘어가게 된다.

 

그리고 스프링 부트의 application.properties에 카카오 로그인에서 정보를 가져오는데 필요한 값들을 세팅해주고,

 

spring.security.oauth2.client.registration.kakao.client-id= REST_API키
spring.security.oauth2.client.registration.kakao.redirect-uri= redirect-uri
spring.security.oauth2.client.registration.kakao.authorization-grant-type= authorization_code
spring.security.oauth2.client.registration.kakao.scope= profile_nickname, account_email
spring.security.oauth2.client.registration.kakao.client-name= Kakao
spring.security.oauth2.client.registration.kakao.client-authentication-method= POST

spring.security.oauth2.client.provider.kakao.authorization-uri= https://kauth.kakao.com/oauth/authorize
spring.security.oauth2.client.provider.kakao.token-uri= https://kauth.kakao.com/oauth/token
spring.security.oauth2.client.provider.kakao.user-info-uri= https://kapi.kakao.com/v2/user/me
spring.security.oauth2.client.provider.kakao.user-name-attribute= id

 

 

서비스를 구현하고,

 

@Service
public class KakaoOAuth2Service {

    @Value("${spring.security.oauth2.client.registration.kakao.client-id}")
    private String clientId;

    @Value("${spring.security.oauth2.client.registration.kakao.client-secret}")
    private String clientSecret;

    @Value("${spring.security.oauth2.client.registration.kakao.redirect-uri}")
    private String redirectUri;

    private final RestTemplate restTemplate;

    public KakaoOAuth2Service(RestTemplate restTemplate) {
        this.restTemplate = restTemplate;
    }

    public String getKakaoToken(String code) {
        String tokenUrl = "https://kauth.kakao.com/oauth/token";

        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Type", "application/x-www-form-urlencoded");

        MultiValueMap<String, String> bodyParams = new LinkedMultiValueMap<>();
        bodyParams.add("grant_type", "authorization_code");
        bodyParams.add("client_id", clientId);
        bodyParams.add("redirect_uri", redirectUri);
        bodyParams.add("code", code);

        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(bodyParams, headers);
        ResponseEntity<String> response = restTemplate.exchange(tokenUrl, HttpMethod.POST, request, String.class);

        return response.getBody();
    }

    public String getUserInfo(String accessToken) {
        String url = "https://kapi.kakao.com/v2/user/me";

        return getString(accessToken, url);
    }

    public String getUserShipAddress(String accessToken) {
        String url = "https://kapi.kakao.com/v1/user/shipping_address";

        return getString(accessToken, url);
    }

    private String getString(String accessToken, String url) {
        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization", "Bearer " + accessToken);
        HttpEntity<String> request = new HttpEntity<>(headers);
        ResponseEntity<String> response = restTemplate.exchange(url, HttpMethod.GET, request, String.class);

        return response.getBody();
    }
}

 

 

컨트롤러를 구현하면,

 

public class OauthLoginController {

    private final KakaoOAuth2Service kakaoOAuth2Service;
    private final KakaoTokenService kakaoTokenService;

    @GetMapping("/kakao")
    public void kakaoRedirect(@RequestParam(name = "code") String code) throws IOException {
        log.debug("kakaoRedirect code : {}", code);

        String jsonString = kakaoOAuth2Service.getKakaoToken(code);

        log.debug("kakaoRedirect token : {}", jsonString);

        String accessToken = kakaoTokenService.getAccessToken(jsonString);

        String userInfo = kakaoOAuth2Service.getUserInfo(accessToken);
        String userShipAddress = kakaoOAuth2Service.getUserShipAddress(accessToken);

        log.debug("kakaoRedirect userInfo : {}", userInfo);
        log.debug("kakaoRedirect userShipAddress : {}", userShipAddress);

    }
}

 

위의 버튼을 클릭하면 로그인 됐을 때 미리 설정한 값들을 카카오로부터 전달 받을 수 있으며, 해당 정보들을 이용해서 로그인 처리를 해주면된다.