React 카카오로그인 구현

Backend개발을 준비하면서 React를 쓰게 된 이유

1. 프로젝트 Refactoring을 하면서 프론트 쪽으로 소셜 로그인이 넘어가고 인원이 부족하여 도와주게 됌.

• KaKaoLoginRedirect.tsx

// package 설치
import axios from "axios";
import { useEffect } from "react";
import api from "../../axios";
// Kakao에 나온 공식문서 로그인 함수이용
const { Kakao } = window;

function KaKaoLoginRedirect(initialState = {}) {
  useEffect(() => {
	// URL에 있는 인가코드 저장 
    let code = new URL(document.location.toString()).searchParams.get("code");
    // 토큰호출 시 필요한 type
    let grant_type = "authorization_code";
    // javascript키를 client_id로 설정
    let client_id = process.env.REACT_APP_JS_SDK_KEY;
    // post로 token값 가져오기
    axios.post(
        `https://kauth.kakao.com/oauth/token?grant_type=${grant_type}&client_id=${client_id}&redirect_uri=${process.env.REACT_APP_FRONTEND_BASE_URL}/oauth/callback/kakao&code=${code}`,
        {
          headers: {
            "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        }
    ).then((res) => {
      console.log("res",res);
      // Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Auth')
      // JavaScript SDK 초기화 함수를 호출하지않아서 발생한 문제
      // 꼭 JavaScript SDk 함수 설정할 것(index.tsx)
      Kakao.Auth.setAccessToken(res.data.access_token);
      // 공식문서에서 사용자 정보를 가져올때 request로 then과 catch구문으로 바꿈 
      Kakao.API.request({
        url: "/v2/user/me",
      })
          .then(function (response: any){
          console.log(response);
      })
          .catch(function (error: any){
            console.log(error);
          });
      
      api.post("/api/user/account/login/kakao",{
        accessToken: res.data.access_token,
      })
          .then((res) => {
          console.log(res);
        })
    })
  })
  return <></>;
}

export default KaKaoLoginRedirect;

• react-app-env.d.tsx

/// <reference types="react-scripts" />

interface Window {
    Kakao: any;
}

• Route.tsx

<Route
  path="/oauth/callback/kakao"
  element={<KaKaoLoginRedirect />}
/>

• .env

export const CLIENT_ID = process.env.REACT_APP_JS_SDK_KEY;
export const ADMIN_KEY = process.env.REACT_APP_ADMIN_KEY;
export const REDIRECT_URI = ~~~~~~~~~
export const LOGOUT_REDIRECT_URI = ~~~~~~~
 
export const BASE_URL = "http://localhost:3000";

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
export const KAKAO_LOGOUT_URL = `https://kauth.kakao.com/oauth/logout?client_id=${CLIENT_ID}&logout_redirect_uri=${LOGOUT_REDIRECT_URI}`;

• axios.tsx

import axios from "axios";

// api통신으로 json타입으로 데이터를 저장
const api = axios.create(
    {
        baseURL: process.env.REACT_APP_FRONTEND_BASE_URL,
        withCredentials: true,
        headers:{
            "Content-type": "application/json",
        },
    });

export default api;