KAKAO login _ REST API

📍 카카오 SDK 로그인 방식을 기록하다 급하게 남기는 REST API를 이용한 로그인 방법 !

KAKAO REST API 문서

카카오 로그인 페이지를 먼저 접속한 후, 카카오톡으로 로그인 버튼을 통해서 카카오톡 앱에서 로그인을 할 수 있도록 제공한다.

1. 카카오 인가 코드를 받기위한 url에 직접 접속한다.

(이때 Query string에 필수 값들을 넣어 url에 접속해야함)

const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code `;
  
return (<LoginButton onClick={() => (window.location.href = KAKAO_AUTH_URL)}>로그인하기</LoginButton>)

2. 카카오 디벨로퍼 플랫폼에 등록해놓은 Redirect URI + Query의 code값으로 일회용성 인가코드를 부여 받는다.

3. 리다이렉팅된 컴포넌트에서 인가코드값을 가지고 카카오 token을 가져온다.

const KAKAO_CODE = new URL(location.href).searchParams.get("code");

const goToLogin = async (KAKAO_CODE: string) => {
     try {
        const response = await fetch(`https://kauth.kakao.com/oauth/token`, {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" },
            body: `grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${KAKAO_CODE}`,
        });
       
        return response.json();
    } catch (error) error;
  };
  
  useEffect(() => {
    KAKAO_CODE ? goToLogin(KAKAO_CODE) : navigate(`/login`);
  }, [KAKAO_CODE]);

4. token까지 가져왔으니 로그인 처리를 하면된다.

하지만 나는 해당 토큰 값을 통해 유저의 정보를 가져오고자 한다!

export const getKakaoUserInfo = async (accessToken) => {
    try {
        const response = await fetch(`https://kapi.kakao.com/v2/user/me`, {
            method: "GET",
            headers: {
                Authorization: `Bearer ${accessToken}`,
                "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"},
           });

        const data = response.json();

        const userInfo = {
            social: "kakao",
            userId: data.id,
            email: data.kakao_account.email,
            gender: data.kakao_account.gender,
        };
        return userInfo;
    } catch (error) error;
};

5. 그리고 우리 리소스 서버로 정보 전달 ! 끄읏-