과정

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

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에서 얻어와서 줄 것 이다. 저 두 변수는 유출되면 안되니 조심하자.

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

// ----------------------------------------카카오 로그인
  const REST_API_KEY = '백엔드에서 받을거';
  const REDIRECT_URI = '백엔드에서 받을거';
  const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

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

return (
     <Button
          color={'kakaoLogin'} 
          onClick={kakaoLoginHandler}
          size={'large'}
          name={"Kakao로 시작하기"}
          kakao={true}
          />
    );
};

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

인가 코드는 어떻게 받아올까?

1번을 잘 수행했다면 페이지에 로그인 하기 버튼이 생겼을 것이다. 이걸 누르면 카카오 계정 정보를 입력할 수 있는 창이 뜬다.

그리고 제대로 했다면 크롬 주소를 한번 봐보자.

백엔드에서 받은 REDIRECT_URI에 ?code?=이상한코드가한가득 이런게 똥꼬에 붙어있을 것이다.
이게 카카오에서 주는 인가 코드이다. 이걸 백엔드한테 주기만 하면 된다!

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

파싱해서 백엔드에게 전달하기 위해선 파싱하는 코드도 필요하다. 그걸 어디다 적을 것이냐..

나는 따로 Recirection이라는 페이지를 팠다. 백엔드에서 준 URI는http://localhost:3000/kakao/callback이므로 /kakao/callback에 받은 코드를 백엔드에 전달할 로직이 작성된 Redirection 페이지를 띄울 것이다.

아래처럼 작성해 연결해주었다.

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

나는 저대로 달라해서 줬지만 백엔드에서 인가 코드 자체만 달라고 한다면 아래처럼 받아오자.

const code = new URL(dococument.location.toString()).searchParams.get('code'); // 이상한코드가한가득

이제 code안에 담아진 카카오의 인가 코드를 백엔드로 보내주기만 하면 된다.

useEffect(() => {
  
  getKakaoToken(code)
  alert("로그인을 완료하였습니다.")

  navigate('/')

  
}, []);
  return (
    <div>Redirection</div> 
  )
}

나는 리액트쿼리를 사용했다 아래는 api요청

// 카카오 토큰 받아오기
  const getKakaoToken = async (code: string | null) => {
    try {
      const response = await instance.get(`백엔드: 여기로 코드주세요~ 하는 주소를 코드?code=${code}`)

    document.cookie = `accessToken=${response.headers.accesstoken}; path=/;`;
    document.cookie = `refreshToken=${response.headers.refreshtoken}; path=/`;
    
    return response.data;
    } catch (error) {
      console.error(error);
    }
  }

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

위에 코드에서 보듯 나는 쿠키에 저장한 토큰을 사용했다