React 카카오 로그인 구현하기

Oauth2를 이용한 카카오 로그인을 구현
원래는 API KEY, REDIRECT URL을 내가 설정해줘야 하지만
백엔드에서 카카오로그인 URL을 만들어줬고, 나는 백엔드에서 설정한 REDIRECT URL에서
토큰값만 받아와 적용시키면 되는 구조였다. 따라서 APIKEY 발급 등의 과정은 생략

Oauth2 카카오 로그인

import KakaoLoginImg from "../../dummy/img/kakaologin.png";
// import { api } from "../../atom/apiCall";

const KakaoLogin = () => {
  //   const handleKaKaoLogin = async () => {
  //     console.log("Before request"); // 요청 전에 출력
  //     const response = await api.post("/oauth2/authorization/kakao");
  //     console.log("After request"); // 요청 후에 출력
  //     // 로그인 성공 후 리다이렉트된 URL 가져오기
  //     const redirectUrl = response.request.responseURL;

  //     // URL의 쿼리 파라미터 추출
  //     const urlParams = new URLSearchParams(new URL(redirectUrl).search);

  //     // 토큰 값 가져오기
  //     const token = urlParams.get("token");
  //     const refreshToken = urlParams.get("refreshToken");

  //     // 토큰 값을 사용하여 원하는 작업 수행
  //     console.log(token);
  //     console.log(refreshToken);
  //   };
  const requestURL = "https://casealot.shop/oauth2/authorization/kakao";
  return (
    <img
      alt="카카오 로그인"
      src={KakaoLoginImg}
      width="100%"
      style={{ margin: "0 auto", cursor: "pointer" }}
      onClick={() => (window.location.href = requestURL)}
    />
  );
};

export default KakaoLogin;

a태그 vs axios

주석처리한 부분은 axios 통신을 이용해 요청을 보낸것 하지만 CORS 오류 발생..

Axios를 사용하여 POST 요청을 할 때 CORS 제한이 적용되는 XMLHttpRequest 기반 요청이었는데, 접속하려는 서버(카카오 서버)가 Access-Control-Allow-Origin응답에 적절한 CORS 헤더( )를 보내지 않아 동일 출처 정책으로 인해 브라우저에서 요청을 차단함

로그인 요청을 REDIRECT로 변경하면 본질적으로 브라우저가 지정된 URL로 이동하도록 지시하는데, 이 a태그 탐색은 브라우저 자체 내에서 발생하며 원본 간 XMLHttpRequest를 트리거하지 않아 CORS 제한이 무시되고 더 이상 CORS 오류가 발생하지 않는다

하여 직접적으로 요청하도록 변경해주어 해결.

토큰처리

import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

function TokenHandler() {
  const location = useLocation();
  const navigate = useNavigate();
  useEffect(() => {
    const token = new URLSearchParams(location.search).get("token");
    const refreshToken = new URLSearchParams(location.search).get(
      "refreshToken"
    );
    if (token && refreshToken) {
      localStorage.setItem("refreshToken", refreshToken);
      localStorage.setItem("accessToken", token);
      
    }
    const storedToken = localStorage.getItem("accessToken");
    const storedRefreshToken = localStorage.getItem("refreshToken");
      if (storedToken && storedRefreshToken) {
        navigate("/");
      }
  }, [location.search]);

  return null;
}

export default TokenHandler;

백엔드에서 REDIRECT URL로 토큰값을 넘겨주었고 로그인 인증은 JWT로 관리, 프론트에서는 localStorage로 관리하기 때문에 로컬스토리지에 토큰값을 저장해주고, 로컬스토리지에 값이 들어왔을 경우 메인페이지로 routing 처리 까지 해주면 구현 완료.

회고

이전 팀프로젝트 에서는 구글로그인을 구현했었는데, api key, redirect url 모두 내가 설정하고
해당 키값들을 이용해 값을 받아와서 로그인처리를 했었는데 백엔드에서 다른 방식으로 처리하여
조금은 당황했지만 아주 편리하게 구현할 수 있어 좋았다.
예상치 못한곳에서 cors 오류를 접하면서 하나 더 배워가는 것 같다!