[MySchedule project] 12. 카카오 로그인 구현 (1) - Frontend

이번 챕터에서는 소셜 로그인에 대한 로직을 구현할 것이다.
그중에서 '카카오로 로그인하기'에 대한 flow를 공식문서를 통해 작성해 봤다.
방식 : REST API

 

준비과정 - Kakao Developer 

https://developers.kakao.com/

Kakao Developers

 

- 코드 구현에 들어가기 앞서 rest api key, redirect url을 준비하자!

 

1. 애플리케이션 추가

 

2. 앱 키 - REST API키 발급

 

- 앱 키를 발급받는데 rest api방식으로 구현할 것이므로, REST API키를 가져온다.

 

3. 사이트 도메인 설정

 

- 내 애플리케이션 > 앱 설정 > 플랫폼에 있는 사이트 도메인을 설정한다.

- 예시) http://localhost:3000

4. 카카오 로그인 활성화 설정 및 Redirect URI 설정

 

- 내 애플리케이션 > 제품 설정 > 카카오로그인에 있는 활성화 상태를 ON으로 하고, Redirect URI를 설정한다.

- 예시) http://localhost:3000/kakaoLogin 

- 카카오 로그인 버튼 클릭시 인가코드를 받을 화면으로 이동하게 되는데 그 경로를 적어주면 된다.

 

Frontend

[ src / pages / Login / index.tsx ] - 코드 추가

 

- 위에 준비과정에서 받은 Rest_api key와 Redirect_URI는 .env에 작성하고 가져와 사용했다.

- 카카오 공식문서에 나와있는데로 Rest_api key와 Redirect_URI를 파라미터 부분에 넣어준다.

- 카카오로 로그인 버튼 클릭 이벤트가 발생되면 Redirect_URI에 지정된 컴포넌트로 이동하게 된다.

 //카카오 REST_API 사용
  const kakao_Rest_api_key = process.env.REACT_APP_KAKAO_REST_API_KEY;
  const kakao_Redirect_uri = process.env.REACT_APP_KAKAO_REDIRECT_URI;
  const kakao_URI = `https://kauth.kakao.com/oauth/authorize?client_id=${kakao_Rest_api_key}&redirect_uri=${kakao_Redirect_uri}&response_type=code`;

  //카카오로 로그인
  const handleKokaoLogin = (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    e.preventDefault();
    window.location.href = kakao_URI;
  };

 

- return 안의  UI 부분 버튼 추가

<div className="flex justify-center m-auto w-10/12 mb-5 gap-2 mt-4">
  <button className="w-6/12" onClick={handleKokaoLogin}>
    <img
      className="sm:h-11 h-10 rounded-md hover:ring hover:ring-yellow-300"
      src="/img/kakao_login_image.png"
      alt="kakaoImage"
    />
  </button>
  <button className="w-6/12">
    <img
      className="sm:h-11 h-10 rounded-md hover:ring hover:ring-green-400"
      src="/img/btnnaver_image.png"
      alt="naverImage"
    />
  </button>
</div>

 

[ src / types / login.ts ] - 코드 추가

export interface kakaoLoginParams {
  authorizationCode: string | null;
}

 

[ App.tsx ] - 코드 추가

 

- Redirect URI 경로를 route에도 설정해 준다.

<Route path="kakaoLogin" index element={<KakaoLogin />} />

 

[ src / pages / Login / kakaoLogin.tsx ]

 

- 인가 코드를 추출하고, redux의 dispatch를 통해 인가코드를 백앤드에 전달해준다.

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAddDispatch } from "../../store/redux";
import { Kakao_userLogin } from "../../store/thunkFunction";
import { kakaoLoginParams } from "../../types/login";

const KakaoLogin = () => {
  const kakao_code = new URL(window.location.href).searchParams.get("code");
  console.log(kakao_code);
  const dispatch = useAddDispatch();

  useEffect(() => {
    kakaoLogin_getAccessToken();
  }, []);

  const kakaoLogin_getAccessToken = async () => {
    const body: kakaoLoginParams = {
      authorizationCode: kakao_code,
    };
    console.log(body);
    try {
      dispatch(Kakao_userLogin(body));
    } catch (error) {
      console.error(error);
    }
  };
  return <div>KakaoLogin</div>;
};

export default KakaoLogin;

 

[ src / store / thunkFunction.tsx ]

//카카오 로그인
export const Kakao_userLogin = createAsyncThunk(
  "Kakao_userLogin",
  async (body: kakaoLoginParams, thunkAPI) => {
    try {
      const response = await axiosInstance.post(`/login/kakaoLogin`, body);

      return response.data; //payload
    } catch (error: any) {
      console.log(error);
      return thunkAPI.rejectWithValue(error.response.data || error.message);
    }
  }
);

 

[ 결과화면 ]

카카오 로그인 ui 화면

 

사용자 동의

 

 

인가 코드 백앤드에 전달