TIL - React, Spring Boot로 카카오 소셜 로그인 구현 STEP 2

STEP 2. 토큰 받기

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

React

토큰을 받기 위해서는 GET 요청이 아닌 POST 요청으로 보내야 한다.

Client Secret : 토큰 발급 시, 보안을 강화하기 위해 사용(REST API인 경우에 해당)

STEP 1에서 정의한 key 파일에 아래 코드를 추가한다.

export const CLIENT_SECRET = "카카오 로그인 -> 보안 탭에서 발급 받은 키";
export const ACCESS_TOKEN_URI = "https://kauth.kakao.com/oauth/token";

 

토큰 요청을 위한 POST 요청 코드를 작성한다.

import { AUTH_CODE_PATH, REST_API_KEY, REDIRECT_URI, ACCESS_TOKEN_URI, CLIENT_SECRET } from "./apiKey";

// ...

export const getAccessToken = async (authCode) => {
  const header = {
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
  };

  const details = {
    grant_type: "authorization_code",
    client_id: REST_API_KEY,
    redirect_uri: REDIRECT_URI,
    code: authCode,
    client_secret: CLIENT_SECRET,
  };

  const formBody = Object.keys(details)
    .map(
      (key) => `${encodeURIComponent(key)}=${encodeURIComponent(details[key])}`
    )
    .join("&");

  return fetch(ACCESS_TOKEN_URI, {
    method: "POST",
    headers: header,
    body: formBody,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err));
};

 

리다이렉트 페이지 코드에 다음과 같이 코드를 추가한다.

useEffect()를 사용해 authCode가 변경되면 POST 요청을 보내는 코드를 호출하도록 한다.

import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { getAccessToken } from "../api/kakaoApi";

const KakaoRedirectPage = () => {
  const [searchParams] = useSearchParams();
  const authCode = searchParams.get("code");

  useEffect(() => {
    getAccessToken(authCode).then((data) => console.log(data));
  }, [authCode]);
  return (
    <div>
      <p>Kakao Login Reditect</p>
      <p>${authCode}</p>
    </div>
  );
};

export default KakaoRedirectPage;

 

개발 서버 실행 후 http://localhost:5173/members/login로 접속해 Kakao Login 링크를 누르면 다음과 같이 Kakao Login Redirect 아래에는 인가 코드, 콘솔에는 토큰을 확인할 수 있다.