TIL 78 (개인 프로젝트 카카오 로그인 구현)

지난 주말부터 개인 프로젝트의 소셜 로그인을 구현해봤습니다. 네이버와 카카오 로그인 기능을 구현했는데 카카오 로그인 먼저 알아보겠습니다.

 

카카오 로그인은 Kakao Developers에서 애플리케이션을 등록해야 합니다. Kakao Developers 가기

Kakao Developers

 

카카오 로그인은 REST API와 Android, iOS, JavaScript 플랫폼용 SKD를 제공합니다. 저는 REST API를 이용해서 카카오 로그인을 구현했으며, REST API를 이용해서 제가 어떻게 카카오 로그인을 구현했는 지에 대해서 알려드리겠습니다. REST API를 이용한 카카오 로그인의 절차입니다.

 

먼저 GET /oauth/authorize를 통해서 인가 코드 => 토큰 => 사용자 정보 확인 => 로그인 순으로 진행됩니다.

개인 프로젝트 명은 The Menu 입니다. 해당 애플리케이션의 플랫폼에서 사이트 도메인을 등록하고, 이용할 카카오 로그인으로 들어가서 활성화로 변경 후 Redirect URI를 등록합니다. 그리고 카카오에서 제공되는 사용자의 정보 중 프로젝트에서 필요한 정보들을 설정해주면 됩니다.

애플리케이션 생성 화면

사이트 도메인 설정 화면

Redirect URI 설정 화면

프로젝트에서 사용할 사용자의 정보 설정

Redirect URI 설정까지 마치면 이제 구현하기 위해 요약 정보에서 REST API 키를 확인합니다.

저는 이번에 소셜 로그인을 구현하면서 클라이언트 단에서 카카오와 네이버 페이지를 만들어서 useEffect로 일련의 과정을 거친 후 navigate로 다음 페이지로 넘어가도록 구현했습니다. 그리고 카카오의 버튼을 이용하지 않고 임의로 만든 버튼에 <a> 태그의 href 속성을 사용해서 링크를 연결해줬습니다.

 

인가 코드를 받기 위해서는 앞 서 확인한 REST_API 키와 Redirect URI가 필요하기 때문에 .env에 작성하고 process.env를 통해서 전역에서 호출했습니다. 고유의 키나 정보는 꼭 .env와 gitignore를 이용해서 깃헙에 공개되지 않도록 유의해야 합니다. 

// theMenu/client/src/pages/LoginPage

// ..중략..

export default function LoginPage ({ setIsLogin, setUserInfo }) {

// ..중략..

  const REACT_APP_REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;
  const REACT_APP_REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REACT_APP_REST_API_KEY}&redirect_uri=${REACT_APP_REDIRECT_URI}&response_type=code`;

// ..중략..

  return (
    <>
      <div>
// ..중략..
        <button>
          <a href={KAKAO_AUTH_URL}>카카오 로그인</a>
        </button>
        <button>
          <a href={NAVER_AUTH_URL}>네이버 로그인</a>
        </button>
// ..중략..
    </>
  );
}

카카오 로그인 버튼을 누르면 카카오 로그인 창이 뜹니다. 이 화면은 시크릿 모드로 접속했을 때 나오는 화면입니다.

사용자의 로그인이 성공적으로 이뤄지면 Redirect URI로 가면서 토큰 발급 받을 때 사용할 code가 쿼리로 제공됩니다. 아래 사진은 프로젝트의 Redirect URI에서 code가 확인되는 장면입니다.

클라이언트 단에서 만든 페이지에서 new URL을 통해서 code 값을 이용해서 token을 받습니다.

// theMenu/client/src/pages/kakao

import React, { useEffect } from "react";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function Kakao ({ setIsLogin, setUserInfo }) {
  const navigate = useNavigate();
  const REACT_APP_REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const REACT_APP_REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;

  const getToken = async () => {
  
  // 쿼리에 제공된 code 값을 얻는 코드
    let code = new URL(document.location.toString()).searchParams.get("code");
    try {
      const token = await axios({
        method : 'POST',
        url : `https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${REACT_APP_REST_API_KEY}&redirect_uri=${REACT_APP_REDIRECT_URI}&code=${code}`
      })
      getUserInfo(token.data.access_token, token.data.refresh_token);
    } catch (e) {
    // ..중략..
    }
  };

  const getUserInfo = async (access_token, refresh_token) => {
    // console.log(access_token, refresh_token);
    try {
      const userInfo = await axios({
        method : 'POST',
        url : 'http://localhost:4000/callback/kakao',
        data : {
          access_token : access_token,
          refresh_token : refresh_token
        }
      });
      setUserInfo({
        email : userInfo.data.userInfo.email,
        nickName : userInfo.data.userInfo.nick
      });
    } catch (error) {
    // ..중략..
    }
  };
  
  useEffect(()=> {
    getToken();
    setIsLogin(true)
    navigate('/survey');
  }, []);
  
  return <></>;
};

토큰을 받기 위해서는 REST_API 키와 Redirect URI와 금방 받은 code를 사용합니다(getToken 함수).

토큰을 받으면 getUserInfo 함수를 통해서 프로젝트 서버에 요청을 보냅니다. 

    // ..중략..
module.exports = {
  kakao: async (req, res) => {
    try {
      const access_token = req.body.access_token;
      const getUserInfo = await axios({
        method: 'GET',
        url : 'https://kapi.kakao.com/v2/user/me',
        headers: {
          Authorization: `Bearer ${access_token}` 
        }
      });
    // ..중략..
  },

 프로젝트 서버로 요청이 들어오면 토큰을 활용해서 카카오로부터 사용자의 정보를 받아옵니다(getUserInfo). 이렇게 받은 정보를 이용해서 데이터베이스에서 회원가입이나 로그인을 진행할 수 있습니다.

로그인 전 화면

로그인 후 사용자의 정보 중 nickname을 출력하는 화면

위의 파란 부분을 보면 카카오 로그인 시 얻은 정보 중 nickname을 출력하는 것을 확인할 수 있습니다.

 

아직은 많이 미숙하지만 제가 구현한 방법을 공유해보았습니다. 이후에 추가적으로 학습해서 더 간편하게 구현할 수있는 방법이나 다른 키를 이용해서 구현하는 것도 공유해보도록 하겠습니다.