카카오 로그인 API 사용 방법 nuxt3, spring boot

버전정보

JAVA 11

Spring Boot 2.7.13

nuxt 3.6.2

---

https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite

Kakao Developers

카카오톡 로그인을 위해 kakao developers에서 설정을 진행합니다.

<div class="position-absolute start-50 translate-middle" style="margin-top: 150px">
    <a id="kakao-login-btn" @click="kakaoLogin" href="javascript:void(0)">
      <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222"
          alt="카카오 로그인 버튼" />
    </a>
    <p id="token-result"></p>
</div>

위 코드 입력 시 카카오 로그인 버튼이 만들어집니다.

const kakaoLogin = () => {
  let restApiKey = '자신의 restApiKey';
  let redirectUrl = 'http://localhost:3000/callback/kakao';
  const url = new URL('https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=' + restApiKey + "&redirect_uri=" + redirectUrl);

  window.location = url;
}

해당 코드는 카카오 로그인 화면으로 이동하는 함수 입니다. 자신의 key값을 입력해야 합니다.

동의하고 계속하기를 누르면 위 코드에서 redircetUrl로 '인가코드'값을 get방식으로 넘겨줍니다.

저는 nuxt3를 사용하기 있기 때문에 pages > callback > kakao.vue를 만들어 주었습니다.

해당 파일 http://localhost:3000/callback/kakao 라는 url을 입력할 경우 나오는 페이지 입니다.

<script setup>
  const route = useRoute();
  const config = useRuntimeConfig();

  const kakaoLogin = async () => {
    const response = await $fetch(config.public.baseURL + '/kakao/login', {
      method: 'POST',
      body: {
        code: route.query.code
      }
    });
  }

  onMounted(() => {
    kakaoLogin()
  })
</script>

HTML 태그 부분은 필요없고 javascript부분만 위 처럼 작성하면 됩니다.

위 코드는 우리가 만든 서버로 통신하기 위함입니다.

UserController.java

@PostMapping("/kakao/login")
public Map kakaoLogin(@RequestBody Map params) throws Exception {
    return userService.kakaoLogin(params);
}

 

UserService.java

public Map kakaoLogin(Map params) throws Exception {
    HttpHeaders headers = new HttpHeaders();

    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
    headers.add("Accept", "application/json");

    MultiValueMap<String, String> body = new LinkedMultiValueMap<>();

    body.add("grant_type", "authorization_code");
    body.add("client_id", 클라이언트 ID);
    body.add("redirect_uri", "http://localhost:3000/callback/kakao");
    body.add("code", params.get("code").toString());

    HttpEntity httpEntity = new HttpEntity<>(body, headers);
    ResponseEntity<Map> response = new RestTemplate().postForEntity("https://kauth.kakao.com/oauth/token", httpEntity, Map.class);

    return response.getBody();
}

본인의 클라이언트 ID 값을 입력해 줍니다.

그럼 위 코드의 response.getBody안에 토큰값이 존재하는데 로그인 로직을 통해 해당 토큰값을 DB에 저장하는 등 다양한 방법으로 처리하면 됩니다.

OKHTTP 대신 RestTemplate를 사용한 이유는 별다른 의존주입 없이 스프링 내에서 바로 사용 가능하다는 장점이 있어서 사용했습니다.