Kakao Login 구현

소셜 로그인을 적용할 페이지

• components/LoginModal.jsx

  const handleKakao = () => {
      window.open(
        `https://kauth.kakao.com/oauth/authorize?client_id=fb6a694dd7c7ede22f3102f1b8b17f4f&redirect_uri=http://localhost:3000/auth/kakao/callback&response_type=code`
      );
      closeModal();
      if (accessToken !== undefined) {
        dispatch(login());
        Toast.fire({
          title: "로그인 성공!",
          icon: "success",
          customClass: {
            icon: "icon-class",
            container: "my-swal",
          },
        });
      } else {
        dispatch(logout());
        Toast.fire({
          title: "로그인 실패!",
          icon: "error",
          customClass: {
            icon: "icon-class",
            container: "my-swal",
          },
        });
      }
    };
  
  return (
  <button className="kakao" onClick={handleKakao}>
  	<span><RiKakaoTalkFill /></span>
    카카오로 간편 로그인하기
  </button>
  )

Token 받아오기

• pages/KakaoLogin.jsx

  import axios from "axios";
  import React, { useCallback, useEffect } from "react";
  import { useLocation } from "react-router-dom";
  import Loading from "../components/Loading";
  
  export default function KakaoLogin() {
    const location = useLocation();
    const KAKAO_CODE = location.search.split("=")[1];
  
    console.log(KAKAO_CODE); //인가코드 받아오기
  
    const getKakaoToken = useCallback(async () => {
      try {
        axios
          .get(`/auth/kakao/login?code=${KAKAO_CODE}`)
          .then((res) => {
            localStorage.clear();
            localStorage.setItem("accessToken", res.data.accessToken);
            localStorage.setItem("refreshToken", res.data.refreshToken);
            localStorage.setItem("kakaoAccessToken", res.data.kakaoAccessToken);
            localStorage.setItem("memberId", res.data.memberId);
          })
          .then(() => {
            window.close();
          });
      } catch (error) {
        console.error(error);
      }
    }, [KAKAO_CODE]);
  
    useEffect(() => {
      getKakaoToken();
    }, [getKakaoToken]);
  
    return <Loading />;
  }