(React) 카카오 로그인 - 2

Step1. 인가코드 받기

인가코드는 Authorization, 사용자가 동의한 항목에 대해서 접근권한을 획득하는 것이다.

 

일단 kakao developers의 rest API를 사용할 것이기 때문에 

Kakao Developers

 

카카오 디벨로퍼 사이트에 가입을 한 후 애플리케이션을 추가한다.

 

애플리케이션을 추가하고 추가된 애플리케이션을 클릭하면 앱키가 발급된다. 

 

그리고 앱키가 나온 바로 왼쪽에 앱설정에서 플랫폼을 클린한 후 사이트 도메인을 입력하면 된다. 혼자 공부한다면 localhost만 입력해도 되지만 배포를 할 것이기 때문에 배포사이트 까지 입력해줬다.

카카오 로그인 사용하려면 redirect URI를 등록해야 하는데 이 uri는 인가코드를 받을때 필요하므로 플랫폼에 들어가서 등록해주고,

const KakaoBtn = () => {
  const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
  const REDIRECT_URI = "http://localhost:5173/kakao-login";
  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  const kakaoLogin = () => {
    window.location.href = kakaoURL;
  }
  
  return (
  <button onClick={kakaoLogin()}>kakao Login </button>
  )
}

이렇게 해서 카카오 로그인 버튼을 누르면 카카오 로그인 동의 화면을 호출하고, 사용자가 동의를 하면 설정한 redirect URI로 가서 쿼리형태로 코드를 넘겨준다 => redirect URI?code = 발급된 인가코드
그러면 발급된 인가코드를 백엔드에 넘겨주고 엑세스 토큰을 받아오면 된다.

const KakaoLogin = () => {
  const code = new URL(window.location.href).searchParams.get("code");
  //인가코드가 두번받아와져서 오류발생 이슈로 isRequestingToken이라는 제어장치를 넣었다.
  let isRequestingToken = true;
  useEffect(() => {
    const getToken = async () => {
      if (!isRequestingToken) {
        console.log("이미 존재");
        return;
      }
      isRequestingToken = false;
      if (!code) {
        console.log("코드가 없습니다.");
        navigate("/");
        return;
      }
      try {
        const response = await axios.post("/api/auth/oauth2/login", {
          registrationId: "kakao",
          authorizationCode: code,
        });
        const accessToken = await response.headers.authorization;
        if (accessToken) {
          localStorage.setItem("withcon_token", JSON.stringify(accessToken));
          navigate("/");
        }
      } catch (error) {
        console.error("잘못된 접근입니다.", error);
      }
    };
    getToken();
  }, [code]);
  return <Loading />;
};

export default KakaoLogin;

 

원래 카카오에서 주는 AccessToken도 프론트에서 받아오기로 해서 코드를 다 짜놨지만 백엔드분이 그냥 인가코드만 받겠다고 하셔서 인가코드 까지만 받아오는 것으로 마무리 지었다.