[Node.js & React] 카카오 로그인으로 사용자 정보 받아오기

최종 프로젝트 진행 중에 소셜 미디어 로그인을 해보자는 말이 나와서 지난번 프로젝트때 했던 경험이 있는 내가 하게 되었다.

 

지난번에는 Javascript 키를 사용하여 로그인 기능을 구현하였고 이번에는 REST API 키를 사용하여 구현하기로 하였다.

 

소셜 미디어 로그인 기능은 OAuth 개념을 알고 있으면 편하다.

 

그림으로 간단하게 표현하자면 아래와 같다. 

(약간 2중으로 검증하는 느낌...?)

 

그래서 위의 그림 순서대로 로직을 만들면 된다.

 

요청 코드나 이런 부분들은 카카오개발자 센터에 더 자세히 나와 있다.

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#refresh-token

Kakao Developers

 

그리고 REST API 키 값이나 이런 부분들은 카카오개발자 센터에 등록을 해야 나오는데 아래 글을 참조하면 된다. (Javascript가 아닌 REST API를 쓰면 된다.)

2023.07.21 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - 카카오톡 공유 메시지(Kakao Developers 이용)

카카오톡 공유 메시지(Kakao Developers 이용)

 

1. Authorization Code 요청

import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { LOGIN } from "../../store/isLogin";

import "../../styles/login.scss";

const Login = () => {
  const navigate = useNavigate();

  const dispatch = useDispatch();

  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  const loginButton = () => {
    console.log(id);
    console.log(pw);

    const login = async () => {
      const res = await axios({
        method: "POST",
        url: "http://localhost:8000/sign/login",
        data: {
          id: id,
          pw: pw,
        },
      });
      return res.data;
    };
    login().then((data) => {
      if (data.result) {
        console.log(data);
        alert("로그인 성공");
        sessionStorage.setItem("token", data.token);
        dispatch({ type: LOGIN, user: data.id });
        navigate("/");
      } else {
        console.log(data);
        alert("로그인 실패");
      }
    });
  };

  const signupButton = () => {
    navigate("/signup");
  };

  const findIdPwButton = () => {
    navigate("/findIdPw");
  };

  const Rest_api_key = process.env.REACT_APP_KAKAO_INIT_KEY;
  const redirect_uri = process.env.REACT_APP_KAKAO_REDIRECT_URI;
  console.log("Rest_api_key", Rest_api_key);
  console.log("redirect_uri", redirect_uri);

  const kakaoURI = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;

  const kakaoLogin = () => {
    window.location.href = kakaoURI;
  };

  return (
    <div className="login-container">
      <img src="imgs/login_logo.png" alt="logo" />
      <div className="idBox">
        <img src="imgs/id.svg" className="idImg" />
        <input
          type="text"
          id="id_input"
          placeholder="아이디"
          onChange={(e) => setId(e.target.value)}
        />
      </div>
      <div className="pwBox">
        <img src="imgs/pw.svg" className="pwImg" />
        <input
          type="text"
          placeholder="비밀번호"
          onChange={(e) => setPw(e.target.value)}
        />
      </div>
      <span className="login-button-container">
        <button onClick={loginButton} className="loginbutton">
          로그인
        </button>
        <button className="loginbutton kakao" onClick={kakaoLogin}>
          카카오톡으로 로그인
        </button>
      </span>
      <div className="login_bottom">
        <span onClick={signupButton}>회원가입</span>
        <span onClick={findIdPwButton}>아이디 / 비밀번호 찾기</span>
      </div>
    </div>
  );
};

export default Login;

 

다른 부분도 섞여 있으니 카카오가 있는 부분만 보면 된다. rest api 키를 통해 카카오로 요청을 보내고 그에 맞는 Authorization Code가 내가 설정한 Redirect_uri로 뒤에 ?code= "~~~~"로 붙어서 오게 된다. 

 

2. 내가 설정한 리다이렉트 URI에 대한 라우터를 생성 후 Server로 코드 전송

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

import axios from "axios";
import { useContext, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { KakaoContext } from "../../App";

const KakaoLogin = () => {
  const { kakaoToken, setKakaoToken } = useContext(KakaoContext);
  const navigate = useNavigate();
  useEffect(() => {
    try {
      const code = new URL(document.location.toString()).searchParams.get(
        "code"
      );
      console.log("code", code);
      if (code) {
        axios
          .post(`http://localhost:8000/sign/kakaoLogin`, { code: code })
          .then((res) => {
            console.log("res", res);
            //받아온 토큰 저장
            const kakaoTokens = res.data.access_token;
            setKakaoToken(kakaoTokens);
            navigate("/");
          });
      }
    } catch (error) {
      console.log("error", error);
    }
  }, []);

  return <div>카카오 로그인 중...</div>;
};

export default KakaoLogin;

 

3.  서버에서 카카오로 Authorization Code를 보내 Access Token을 받아 다시 클라이언트로 전달한다.

//카카오 로그인 인증
const kakaoLogin = async (req, res) => {
  const { code } = req.body;
  const REST_API_KEY = process.env.REST_API_KEY;
  const REDIRECT_URI = process.env.REDIRECT_URI;

  const data = querystring.stringify({
    grant_type: "authorization_code",
    client_id: REST_API_KEY,
    redirect_uri: REDIRECT_URI,
    code: code,
  });

  const kakaoToken = await axios.post(
    "https://kauth.kakao.com/oauth/token",
    data,
    {
      headers: {
        "content-type": "application/x-www-form-urlencoded",
      },
    }
  );
  res.status(200).json(kakaoToken.data);
};

 

 

여기까지 에러 없이 하면 로그인이 완료 된 것이다. 

하지만 나는 여기서 더 나아가 사용자의 정보를 받아 오는 것까지 해야 하므로 좀 더 한다면,

 

4. 사용자 정보 받아오기.

export const KakaoContext = createContext();

function App() {
  const [kakaoToken, setKakaoToken] = useState(null);
  //액세스 토큰을 사용하여 카카오 사용자 정보 가져오기
  useEffect(() => {
    if (kakaoToken) {
      axios
        .get("https://kapi.kakao.com/v2/user/me", {
          headers: {
            Authorization: `Bearer ${kakaoToken}`,
          },
        })
        .then((response) => {
          console.log("kakaoResponse: ", response);
        });
    }
  }, [kakaoToken]);

 

kakaoToken을 사용하여 사용자의 정보를 받아올 수 있다. 그결과 아래처럼 받아올 수 있다.

이제 이부분을 기존 우리만의 로그인 서비스와 어떻게 함께 DB에 저장하고 활용할지 생각해 봐야겠다.

 

아래 영상이 저에게 많은 도움이 되었습니다.

https://youtu.be/IOjy6r0EE5s?si=jjwwvpKTJuTv6MeZ