카카오 소셜 로그인 프론트에서 토큰까지 받기 (OAuth2.0)

이번 포스팅은 프론트단에서 카카오 소셜로그인으로 토큰까지 발급받을 수 있는 방법에 대해 정리한 글입니다. 

개인적으로 구글 소셜 로그인보다 카카오 소셜 로그인이 조금더 수월하게 진행되었습니다. 

 

1. 카카오 developers 페이지에서 api 등록하기

https://developers.kakao.com/docs/latest/ko/getting-started/app

Kakao Developers

 

api 등록하는 방법은 kakao developers 내의 설명과 다른 블로그에서 내용정리가 잘 되어 있어서 생략합니다. 

 

---

 

설정해둔 리다이렉션 페이지에서 코드를 작성한다. 

 

카카오 REST_API_KEY,  REDIRECT_URI는 secretData.js라는 파일에 따로 보관하여 github에는 올라가지 않도록 주의하도록 합니다. 

 

 

인가코드 받아오기

  const KAKAO_CODE = location.search.split("=")[1];

 

 

토큰 발급 받기

(postKakaoToken 함수의 경우, 로컬 환경에서 프론트단에서 토큰까지 발급받는 방식으로 사용해서 이 코드는 실제로 작동하지는지 테스트 하지 못했습니다. )

 // //1 토큰 보내기
  const getKakaoToken = () => {
    axios({
      method: "post",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: `https://kauth.kakao.com/oauth/token`,
      data: `grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${KAKAO_CODE}`,
    }).then((response) => {
      console.log("kakaotoken:", response);
      if (response.data) {
        sessionStorage.setItem("token", response.data.access_token);
        localStorage.setItem("token", response.data.refresh_token);
        const kakaoAccessToken = response.data.access_token;
        const kakaoRefreshToken = response.data.refresh_token;
      } else {
        navigate("/");
      }
    });
  };

  // const postKakaoToken = () => {
  //   axios({
  //     method: "post",
  //     url: `백엔드 엔드포인트추가`,
  //     data: kakaoAccessToken, kakaoRefreshToken,
  //   });
  // };

 

 

  useEffect(() => {
    if (!location.search) return;
    getKakaoToken();
    // postKakaoToken();
  }, []);

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓