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

NewsFeed 프로젝트에 사용할 카카오 소셜 로그인을 구현하면서 각 STEP 별 어떻게 구현했는지에 대한 기록이다.

카카오 REST API 문서를 보면 STEP 1부터 3까지 어떻게 요청하고 응답받는지 자세하게 나와있다.

사전에 Kakao Developers에 애플리케이션 등록을 해야 한다.

STEP 1. 인가 코드 받기

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

React

인가 코드를 받기 위해 필요한 필수 쿼리 파라미터들을 정의한다.

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

export const AUTH_CODE_PATH = "https://kauth.kakao.com/oauth/authorize";
export const REST_API_KEY = "내 애플리케이션에서 받은 앱 키";
export const REDIRECT_URI = "Redirect URI로 등록한 URI";

 

위에서 정의한 파라미터를 조합해 GET 요청을 할 URI를 생성한다.

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

export const getKakaoLoginLink = () =>
  `${AUTH_CODE_PATH}?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;

 

리다이렉트 받을 페이지를 설정한다.

import { useSearchParams } from "react-router-dom";

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

  return (
    <div>
      <p>Kakao Login Reditect</p>
      <p>${authCode}</p>
    </div>
  );
};

export default KakaoRedirectPage;

 

페이지 이동을 위한 라우터를 설정한다. (npm i react-router-dom)

import { Route, Routes } from "react-router-dom";
import "./App.css";
import KakaoLoginComponent from "./components/KakaoLoginComponent";
import Notfound from "./pages/NotFound";
import KakaoRedirectPage from "./components/KakaoRedirectPage";

function App() {
  return (
    <>
      <Routes>
        <Route path="/members/login" element={<KakaoLoginComponent />} />
        <Route path="/members/kakao" element={<KakaoRedirectPage />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </>
  );
}

export default App;

 

개발 서버 실행 후 http://localhost:5173/members/login로 접속하면 다음과 같이 Kakao Login 링크를 확인할 수 있고 링크를 누르면 카카오 인증 서버로 인가 코드 발급을 위한 GET 요청을 보내게 된다. (개발자도구 - 네트워크 탭에서 확인 가능)

 

위 화면에서 링크를 누르면 아래와 같은 화면으로 이동되며 Kakao Login Redirect 문구 아래 인가 코드가 출력된다.