리액트 카카오 소셜 로그인 인가 인증까지 하기

마지막 프로젝트 였던 거기어때의 백엔드 서버가 닫혀 firebase를 이용해 서비스를 할수있도록 리펙토링 중입니다.

그중 카카오 소셜 로그인 기능을 구현한 내용입니다.

 

카카오 로그인API 공식문서

Kakao Developers

 

공식문서에 나와 있는 API흐름 입니다.

 

기존에는 인가코드를 백엔드API로 헤더에 담아 요청을 보내면 백엔드 서버에서 카카오API로 인증을 받고 유저정보를 받아 백엔드서버의DB에 저장하고 JWT를 통해 토큰을 발급하여 응답해주는 방식이었습니다.

 

하지만 이제 백엔드가 없기때문에 리다이렉트를 받는 시점에 카카오API로 인증토큰을 받고 유저정보를 firebase에 저장후 유니크한 값을 로컬스토리지에 담는 형식으로 생각을하고 진행했습니다.

 

1. 인가 코드 받기

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

카카오에서 제공하는 API로 인가코드를 리다이렉트할 페이지로 응답 받습니다.

 

 

등록된 REST API키 값과 리다이렉트 될 페이지URI를 파람값에 넣어줍니다.

 

 

const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REACT_APP_KAKAO_REST_API_KEY}&redirect_uri=${REACT_APP_KAKAO_REDIRECT_URI}&response_type=code`;

<KakaoBtn onClick={() => window.location.href = KAKAO_AUTH_URL} />

 

리다이렉트 된 페이지에서 인가코드를 확인합니다.

let code = new URL(window.location.href).searchParams.get('code');

console.log(code);

기존엔 이 인가코드를 백엔드로 넘기면 끝이었지만 이젠 없으니 이후 처리를 해줍니다.

 

2. 인증 토큰 받기

curl -v -X POST "https://kauth.kakao.com/oauth/token" \
 -H "Content-Type: application/x-www-form-urlencoded" \
 -d "grant_type=authorization_code" \
 -d "client_id=${REST_API_KEY}" \
 --data-urlencode "redirect_uri=${REDIRECT_URI}" \
 -d "code=${AUTHORIZE_CODE}"

카카오에서 제공하는 API입니다.

Axios로 비동기 처리를 했는데 삽질을 좀했습니다.

헤더에 Content-Type 설정을 했었는데 이게 문제가 되었습니다.

헤더로 아무런값을 보내면 안됐었습니다.

그래서 카카오로그인 인스턴스를 따로만들었습니다.

import axios from "axios";

export const kakaoInstance = axios.create({
    baseURL: "",
});

kakaoInstance.interceptors.response.use(
    function (response) {
        return response;
    },
    function (error) {
        switch (error.response.status) {
            case 401: {
                alert("로그인 정보가 만료되어 로그아웃 합니다.");
                localStorage.clear();
                window.location.replace("/");
                break;
            }
        }

        return Promise.reject(error);
    }
);

 

 

그리고 바디 데이터를 URLSearchParams()를 사용하여 가공했습니다.

const kakaoLogin = async () => {

		const params = new URLSearchParams();

		params.append("grant_type", "authorization_code");
		params.append("client_id", process.env.REACT_APP_KAKAO_REST_API_KEY);
		params.append("redirect_uri", process.env.REACT_APP_KAKAO_REDIRECT_URI);
		params.append("code", code);

		return await kakaoInstance.post('https://kauth.kakao.com/oauth/token', params)
	}

const kakaoLoginResponse = useQuery(['kakaoLogin'], kakaoLogin);

console.log(kakaoLoginResponse);

인증 토큰이 넘어오는지 확인 합니다.

 

 

잘 넘어 옵니다.

이제 access_token을 이용하여 회원정보를 얻어옵니다.

 

3. 유저 정보 얻어오기

내 애플리케이션 관리에서 필수 동의 항목을 설정할 수 있습니다.

 

curl -v -X GET "https://kapi.kakao.com/v2/user/me" \
  -H "Authorization: Bearer ${ACCESS_TOKEN}"

카카오에서 제공하는 유저 정보를 얻어오는 API입니다.

 

 

const getKakaoUserInfo = async () => {
		return await kakaoInstance.get(`https://kapi.kakao.com/v2/user/me`,
			{
				headers: {
					Authorization: `Bearer ${access_token}`
				}
			})
	}

비동기 함수를 만들어 정보가 잘 넘어오는지 확인 합니다.

 

 

잘 넘오 옵니다.

이제 이데이터를 firebase에 등록하고 유니크한 값을 로컬스토리지에 담아 로그인 상태로 처리하면 끝입니다.

firebase내용은 다른 글에서 다루겠습니다.

 

인가코드를 백엔드에 넘기기만 할때는 몰랐지만 다 구현해보니 백엔드의 감사함을 알수있었습니다 ㅋㅋ