프론트가 하는 카카오 소셜로그인 [React]

과정

1. 버튼 눌러 로그인화면 띄우기
2. 카카오에게 인가 코드 받아오기
3. 인가코드는 주소의 쿼리스트링에 담아져서 제공된다. 이걸 파싱해서 백엔드에게 전달한다.
4. (백엔드는 우리가 준 코드를 알아서 처리해서 토큰을 준다.)
5. 그 토큰을 받아서 로그인을 유지한다.

4번 빼고 4개의 과정만 프론트엔드가 구현하면 카카오 소셜 로그인을 할 수 있다.

1. 버튼 눌러 로그인화면 띄우기

카카오에서 제공하는 로그인 화면 링크

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

변수 REST_API_KEY, REDIRECT_URI는 백엔드가 kakao developers에서 제공
저 두 변수는 유출되면 안된다. env 파일을 만들어 따로 저장하기.

window.location.href를 이용해 주소를 바꿨다.

// Login.tsx
const Login = () => {
  const REST_API_KEY = '백엔드에게 받기1';
  const REDIRECT_URI = '백엔드에게 받기2';
  const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const loginHandler = () => {
    window.location.href = link;
  };

  return (
    <button type='button' onClick={loginHandler}>
      카카오 로그인
    </button>
  );
};

2. 카카오에게 인가 코드 받아오기

페이지에 로그인 하기 버튼이 생기고 이걸 누르면 카카오 계정 정보를 입력할 수 있는 창이 뜬다.

제대로 했다면 크롬 주소 확인하기.
나는 백엔드에게 REDIRECT_URI로 http://localhost:3000/kakao/callback 를 받았다.

실제로 이동되는 주소
http://localhost:3000/kakao/callback?code=카카오에서 준 인가 코드

백엔드에서 받은 REDIRECT_URI에 ?code=알수없는 긴코드 이것을 백엔드에게 넘겨주면 된다

3. 인가코드는 주소의 쿼리스트링에 담아져서 제공된다. 이걸 파싱해서 백엔드에게 전달한다.

• Recirection이라는 페이지 생성
  파싱해서 백엔드에게 전달하기 위해선 파싱하는 코드도 필요하다.
  백엔드에서 준 URI는http://localhost:3000/kakao/callback이므로 /kakao/callback에 받은 코드를 백엔드에 전달할 로직이 작성된 Redirection 페이지를 띄울 것이다.

아래처럼 작성해 연결

• 라우터 연결하기

<Route exact path='/kakao/callback' element={<Redirection />} />

내가 만든 Redirection 페이지에서 받은 인가 코드를 백엔드에게 전달

• 일단 주소창에 있는 코드를 받아오기
  이때 code에 담기는 것은 오로지 인가 코드 자체가 아닌 쿼리 스트링 형태이다.(?code=이상한코드가한가득 이렇게 생긴 것)

const code = window.location.search; // code?=이상한코드가한가득

• code안에 담아진 카카오의 인가 코드를 axios로 백엔드에게 보내기

useEffect(() => {
	   const response = await baseInstance.post(`/user/kakao${code}`);
        console.log(response);
	   navigate('/');
  }, []);

• 전체 코드

import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import { baseInstance } from '../apis/config';

const Redirection = () => {
  const code = window.location.search;
  console.log(code);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await baseInstance.post(`/user/kakao${code}`);
        console.log(response);

        if (response.data.statusCode === 200) {
        // 토큰을 받아서 localStorage 같은 곳에 저장하는 코드를 여기에 쓴다.
        localStorage.setItem('Authorization', response.headers.authorization);
        navigate('/');
      }
      } catch (error) {
        console.log('kakao 소셜 로그인 에러 : ', error);
        window.alert('소셜 로그인에 실패하였습니다.');
        window.location.href = `/login`;
      }
    };

    fetchData();
  }, []);

  return <div>로그인 중입니다.</div>;
};

export default Redirection;

5. 그 토큰을 받아서 로그인을 유지한다.

로컬스토리지에 저장한 토큰을 필요할때마다 request에 담아서 보내면된다.

 axios
      .get(주소, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem('Authorization')}`,
        },
      })

---

참고자료
[ React ] 정말 쉽다! 카카오 소셜 로그인 프론트에서 이해하고 구현하기.