[React] 카카오 로그인 구현

막상 구현해보니 생각보다 간단했던 카카오 로그인 !
당연한거지만 백엔드 포지션과 소통이 정말 정말 중요하다는 것을 몸으로 느꼈다.

생각지도 못한 곳에서 막혀서 3일 정도 삽질을 했는데 . .
프론트엔드 포지션이라고 해서 프론트엔드 쪽에만 집중하면 안되는 것 같다.
문제를 해결하는 시야를 좀 넓힐 필요가 있다.

1. 카카오 로그인 창 띄우기

미리 구현해놓은 카카오 로그인 버튼을 클릭 했을 때, 카카오에서 띄워주는 로그인 창으로 이동시키기 위해 백엔드로부터 미리 rest api key와 redirect uri 값을 받는다.

const REST_API_KEY = 'rest api key';
const REDIRECT_URI = 'redirect uri';

// 카카오 로그인 버튼 클릭했을 때 핸들러 함수
const kakaoLoginHandler = () => {
        window.location.href = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;
    }

🌟 여기서 주의해야할 점은,
배포 전인 경우 로컬 환경에서 테스트를 하는 것이기 때문에 redirect uri를 로컬에 띄울 클라이언트 페이지 주소로 설정해야 한다.

2. redirect uri로 이동 후, 인가코드 저장하기

로그인 직후 uri 주소에 카카오에서 제공하는 인가코드가 담겨지게 된다.
http://localhost:3000/v1/auths/oauth/kakao?code=~~~
이런 식으로.

여기서 코드만 뽑아서 서버로 전달하기 위해서는 아래와 같이 작성해주면 된다.
const code = new URLSearchParams(location.search).get('code');

전체코드

export default function KakaoRedirection() {
    const location = useLocation();
    useEffect(() => {
		    // 현재 리다이렉트된 주소에서 code 부분 가져오기
        const code = new URLSearchParams(location.search).get('code');
        if (code) {
		        // 인증코드 확인용으로 콘솔창에 출력
            console.log('Authorization Code : ', code);
        }
    }, [location.search]);

    return (
        <>loading...</>
    );
}

위와 같이 인증코드를 받아온 후 변수에 저장하고, 로그인 이후 띄워줄 화면 구현하기.
위 코드에서는 "loading..." 텍스트가 띄워지게 된다.

💡 App.js에서 라우트 설정하는 것도 까먹지 말기 !
redirect uri로 이동하면, KakaoRedirection 컴포넌트를 렌더링할 수 있도록 설정해준다.

<Route path="/v1/auths/oauth/kakao" element={<KakaoRedirection />} />

여기서 element 말고 component 쓰시는 분들도 있어서 검색해보니 단순히 버전 차이였다 ㅎㅎ
react-router-dom v6 부터는 element를 써야 라우팅이 제대로 적용된다.

3. access token 받아오기

위 코드를 수정해서 저장한 인가코드를 get 요청으로 서버에 전송하고 응답으로 access token을 받는다.
받은 액세스토큰은 로컬 스토리지에 저장해서 다른 api 호출 시 필요할 때 사용하면 된다.
모든 과정이 완료되면 메인 페이지로 이동 시켜주기 !

useEffect(() => {
        const code = new URLSearchParams(location.search).get('code');
        if (code) {
            console.log('Authorization Code : ', code);
            axios
                .get(`http://~~~/v1/auths/oauth/kakao?code=${code}`)
                .then((res) => {
                    const accessToken = res.data.accessToken;
                    localStorage.setItem('accessToken', accessToken);
                    // 메인 페이지 이동
                    navigate(`/`);
                })
                .catch((error) => {
                    console.error(error);
                });
        }
    }, [location.search, navigate]);

여기서 우리는 코드를 요청 api 자체에 넣어서 get 요청으로 전송 했지만,
post 요청으로 전송할 경우에는 전달할 코드를 인자로 넣어서 전달하면 된다.

1. GET : 요청 api 자체에 넣어서
   axios.post('uri', { code })
2. POST : 전달할 code 인자로 넣어서 -> 백틱으로 감싸주기
   axios.get(`uri?code=${code}`)