카카오 로그인

시작하며

이 시리즈의 글들은 지난번 프로젝트에 아쉬운 부분을 위해 진행한 토이 프로젝트이다!

지난번 소셜로그인 기능을 구현하지 못했던 것에 대해 미련이 남아
카카오 로그인을 통해 OAuth를 통한 로그인 방식을 시도해 보았다!

카카오 로그인 공식 문서

1. 내 어플리케이션에 들어가서 어플리케이션 추가
   

2. 만든 앱을 클릭하여 들어간 후 앱 설정의 플랫폼을 클릭하고, 카카오 로그인을 사용할 url을 Web에 등록 / Redirect Url도 설정.

3. 나의 경우 REST API를 이용하므로 해당 키와 내가 발급받은 secret key를 아래와 같이 env 파일에 넣어 관리해주었다.

4. 카카오 로그인 버튼을 누르면 실행 될 함수 작성

   사용자가 필수 동의 항목에 모두 동의한 뒤 [동의하고 계속하기] 버튼을 누르면, 카카오 인증 서버는 해당 사용자에 대한 인가 코드를 발급해 서비스의 redirect_uri에 전달한다.

   인가 코드 요청의 응답은 redirect_uri로 HTTP 302 Redirect되며, Location에 인가 코드가 담긴 쿼리 스트링(Query String) 또는 에러 메시지를 포함합니다.

   사용자가 [취소] 버튼을 클릭한 경우에는 에러 메시지를 담은 쿼리 스트링이 redirect_uri로 전송됩니다.

   서비스 서버는 redirect_uri로 받은 요청을 처리해 인가 코드를 얻거나 상황에 맞는 페이지를 보여주도록 처리해야 합니다.
   받은 인가 코드는 토큰 받기에 사용합니다.

const loginWithKakao = () => {
    const REDIRECT_URI = `${process.env.REACT_APP_REDIRECT_URI}`;
    const CLIENT_ID = `${process.env.REACT_APP_REST_API_APP_KEY}`;
    const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
    window.location.replace(`${KAKAO_AUTH_URL}`);
  };

5.내가 만든 서비스에서 카카오 로그인을 하고 유저정보 취득 후 로그인 처리

import React, { useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { curUser } from '../../recoil/signup';

const KaKaoLogin = () => {
  const [currentUser, setCurrentUser] = useRecoilState(curUser);
  const navigate = useNavigate();
  const API = `${process.env.REACT_APP_API_URL}`;
  const code = new URL(window.location.href).searchParams.get('code');
  const grant_type = 'authorization_code';
  const REDIRECT_URI = `${process.env.REACT_APP_REDIRECT_URI}`;
  const CLIENT_ID = `${process.env.REACT_APP_REST_API_APP_KEY}`;

  axios
    .post(
      `https://kauth.kakao.com/oauth/token?grant_type=${grant_type}&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&code=${code}`,
      {
        headers: {
          'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
        },
      }
    )
    .then((res) => {
    //카카오 서버로 부터 토큰을 받아 내 정보를 취득할 수 있다.
      const { access_token } = res.data;
      if (access_token) {
        axios
          .post(
            `https://kapi.kakao.com/v2/user/me`,
            {},
            {
              headers: {
                Authorization: `Bearer ${access_token}`,
                'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
              },
            }
          )
          .then((res) => {
            const { email } = res.data.kakao_account;
            const { nickname, profile_image } = res.data.properties;
            const body = {
              email,
              name: nickname,
              nickname,
              profile: profile_image,
            };
			// 취득한 정보를 가지고 개발 서버에 회원가입 요청을 한다.
            axios.post(`${API}/oauth/signup`, body, { withCredentials: true }).then(async (res) => {
              window.localStorage.setItem('accessToken', res.headers.authorization);
              await axios
                .get(`${API}/user`, { headers: { Authorization: res.headers.authorization }, withCredentials: true })
                .then((res) => {
                  setCurrentUser(res.data);
                });
            });
          });
        navigate('/');
      } else {
        alert('카카오 로그인 실패');
        navigate('/login');
      }
    });
  return (
    <>
      <h1>카카오 로그인 페이지</h1>
    </>
  );
};

export default KaKaoLogin;

이 밖에도 더 다양한 기능을 사용할 수 있다.
더 다양한 기능을 사용하려면 위의 공식 문서를 참고하면 좋다!