소셜 로그인 - 카카오 로그인(2)

지난 글에서 카카오 Developers에 접속하여 설정하는 법에 대해 알아보았다.
이번 글에서는 필자가 프로젝트에서 사용하였던 코드와 간단한 설명을 덧붙히겠다.

우선 React 프로젝트를 실행하고 나면 .env 파일이 보일 것이다.

🔥 .env 파일은 반드시 최상위 디렉토리에 존재해야한다. 따라서 .gitignore 파일에서

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

위처럼 설정해주어야 후에 깃허브에 업로드 시 다른 사람들에게 보이지 않게 할 수 있다.

본론으로 돌아가보자.

".env" 파일에서 REST API 키와 REDIRECT URI를 설정해준다.

# 카카오
REACT_APP_REST_API_KEY = "카카오에서 발급받은 REST API 키"

REACT_APP_KAKAO_REDIRECT_URI = "카카오에서 내가 설정한 REDIRECT URI"

보다 자세한 설명을 위해 코드 전체를 첨부하겠다.

import React from "react";

const KakaoLogin = () => {
  const KAKAO_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const KAKAO_REDIRECT_URI = process.env.REACT_APP_KAKAO_REDIRECT_URI;
  const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;

  return (
    <img
      alt="카카오 로그인"
      src={kakao}
      onClick={() => (window.location.href = KAKAO_URL)}
    />
  );
};

export default KakaoLogin;

REST API 키와 REDIRECT URI를 이용하여 KAKAO_URL을 설정해주었다.

또 하나의 중요한 과정이 필요한데 CallBack 해줄 js 파일을 하나 더 만들어야했다.

똑같이 코드 전문을 첨부하되, 일부 코드는 말로 대신 설명하겠다.

import axios from "axios";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { API_URL } from "../Constant";
import { useRecoilState, useSetRecoilState } from "recoil";
import {
  tokenState,
  nicknameState,
  emailState,
  idState,
} from "../../recoils/Recoil";

const KakaoCallback = () => {
  const navigate = useNavigate();
  
  `//////////////////코드 생략///////////////////`

  
  useEffect(() => {
  
  // 필자는 code를 url로부터 분리하여 백엔드로 보내야했기에 아래와 같이 let code를 따로 분리했다.
    let code = new URL(window.location.href).searchParams.get("code");
    
    axios
      .get(`${API_URL}/login/oauth2/callback/kakao`, { params: { code } })
      .then((response) => {
        const { jwtToken, nickname, email, point, id } = response.data.data;
        
        // Recoil을 이용한 상태 관리
        `//////////////////코드 생략///////////////////`

        // 로컬 스토리지에 토큰, 아이디 등 저장
        console.log("로그인 성공!");
        console.log("Token:", jwtToken);
        console.log("Nickname:", nickname);
        console.log("email:", email);
        console.log(code);

        navigate("/"); // 메인 페이지로 이동
      })
      .catch((err) => {
        console.log(err);
        console.log(err.response);
      });
  }, []);

  return <div>Loading...</div>;
};

export default KakaoCallback;

🔥 주의할 점!!!
로그인에 성공한 것 같아보여도 항상 console.log를 찍는 습관을 들이자!

거의 모든 과정이 끝났다.

이제 App.js로 돌아가

import KakaoCallback from "./components/SocialLogin/KakaoCallback";

<Route path="/login/oauth2/callback/kakao" element={<KakaoCallback />} />

위 코드들을 추가해주면 끝이다!!

물론 로그인을 하기 위한 버튼은 스스로 만들어야하며, uri나 구현 방식은 백엔드와 꾸준히 소통해야한다는 점 잊지 않기를 바란다.

최대한 간결하게 설명하기 위해 반말을 사용한 점, 사과의 말씀 드립니다.
혹여나, 궁금한 점이 생기신다면 "댓글" 또는 "kop981020@naver.com"으로 연락주시면 최대한 빠른 시간 내에 답변드리겠습니다!

추후, 다른 소셜로그인 글로 찾아뵙겠습니다.

지금까지 읽어주셔서 감사합니다 😄