React | REST API를 이용한 Kakao 소셜 로그인 기능 구현

2차 프로젝트 '뮤즈'에서는 빠르고 간편한 서비스를 제공하려는 목적도 있었고
다른 웹에서 많이 쓰이는 외부 API를 써보고 싶기도 해서 카카오 소셜 로그인 API를 연동하는 방식을 선택해서 진행했다.
 

카카오 API 로그인 Flow

1.  카카오 로그인 창을 클라이언트에게 보여준다.
2. 클라이언트는 로그인 
3. 동의항목 체크하고 카카오 API 서버에 로그인 정보를 넘긴다.
4. 카카오 API 서버는 전달 받은 정보를 확인하고 서비스 서버의 Redirect URI로 인가코드를 발급해준다.
5. 인가코드를 통해 카카오 API 서버가 로그인 유지할 수 있는 토큰을 발급한다.

 

우리 팀은 어디까지 프론트가 하고 백엔드가 어디서부터 맡아 할지 정했다.

📌 여기서 주의할 점은 토큰을 카카오 서버로부터 받지만, 토큰을 그대로 사용하면 해킹 당하면
사용자의 카카오 계정에 있는 모든 정보가 다 털릴 수도 있기 때문에 카카오 서버에서 발급 받은 사이트 전용 토큰으로 바꿔주어야 한다.

 

Frontend 역할

카카오로부터 인가코드를 받고 받은 인가코드를 백엔드에 넘겨준다.
인가코드를 넘기면 백엔드로부터 사이트에서 쓸 토큰을 발급 받는다.
 

Backend 역할

프론트엔드에거 인가코드 넘겨 받고, 카카오로부터 토큰을 발급 받는다.
해당 토큰에 담긴 유저 정보를 활용해 사이트 전용 토큰으로 새로 발급 받아 프론트엔드에게 돌려준다.
 
 

---

 

🔑 카카오 로그인 API 연동 순서
Kakao Developer 설정 -> 개발환경설정 -> 로그인 구현하기

1. Kakao Developer 설정

아래 경로로 들어가서 설정
https://developers.kakao.com/console/app 
 
 

 step 1 내 애플리케이션 등록

애플리케이션 추가하기

 
 step 2 카카오 로그인 활성화

내 애플리케이션 -> 제품 설정/ 카카오로그인 -> 카카오로그인 활성화

 

 step 3 Web 플랫폼 등록

나중에 배포할 주소를 적으면 된다.
배포하기 전이기 때문에 localhost:3000 으로 일단 설정

 

 step 4 Redirect URI 등록

카카오 로그인 메뉴에 들어가서 추가
경로 설정은 백엔드와 협의해서 맞추면 되는데, 내가 먼저 설정하고 써달라고 했다.
⚠️프론트엔드가 접근할 수 있는 Host 로 지정하기!

'

 step 5 동의항목 설정

카카오 로그인 후 설정한 동의항목에 대해 응답 데이터를 받을 수 있다.
내 애플리케이션 -> 제품설정 -> 동의항목
 
 
 
위와 같이 설정해주면 카카오 로그인  API 사용에 필요한 설정이 완료된다.
이젠 인가코드를 카카오 서버에 요청할 때 필요한 키들을 확인해주면 된다.

 

 

 

2. 개발환경 설정

 step 1 카카오 로그인 버튼 클릭했을 때 KAKAO_AUTH_URL로 이동
 

//KakaoAuthUrl.js

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

 
나는 따로 KakaoAuthUrl.js파일을 만들어 Kakao Auth Url을 내보내주었다.
client_id 값으로 Rest API Key 를 넣고 redirect_uri 값으로 Redirect URI를 넣어주면 된다.
 

  //SignIn.js
  
  ...
  
  function handleLogin() {
    window.location.href = KAKAO_AUTH_URL;
  }

  ...
  
  return (
  
  ...
  
  <KakaoButton imgUrl={logoBtnImg} onClick={handleLogin} />
  )

 
카카오로 로그인하기 버튼을 누르면 이 Url주소로 카카오톡 로그인 화면으로 이동되게 구현해줘야 한다.
window.location.href를 이용해서 다른 URL로 이동시킬 수 있다. 
로그인 화면으로 이동하면 카카오 로그인 화면이 나타나고 여기서 카카오 계정으로 로그인하고 동의항목 체크하고 나면
아래와 같이 빈 화면이 나온다. 
 

 
나는 계속 저 빈화면에서 에러가 있었다.
백엔드 통신에 문제가 있는 건지 백엔드 팀원분이랑 계속 이유를 찾아봤었는데 
인가코드는 받는 것엔 문제가 없어보였고 루트를 계속 못 찾는다고 나왔었다.
지금 생각하면 허무했던 게 백엔드랑 통신하지도 않았는데 엄한 데서 문제를 찾아봤던 것..
라우터 페이지를 보니 저 페이지가 있는데 어느 주소로 보여줄지 정해두지 않았던 거였다.

 
Redirect URI로 설정해두니 해결됐다.

 
 
 
 step 2 카카오 API에 인가 코드 붙여 리다이렉트
 
위에 있는 빈 화면 주소창에 redirect_uri 주소 뒤에 ?code= 인가코드 가 나오는데 이 인가코드를 가져와서
백엔드에 넘겨주어 토큰을 받아야 한다.
 
나는 이 주소에서 인가코드를 빼기 위해 useLocation을 썼다.
location 에 있는 'search'  key에 '?code= 인가코드'가 담겨 있어 split하여 '=' 으로 분리하고 두번째 항목을 가져왔다.

const location = useLocation();
const CODE = location.search.split('=')[1];

 
 
카카오 API에 인가코드를  client_id, redirect_uri 값과 함께 body에 담아 요청한다.

//KakaoAuth.js

...

fetch("https://kauth.kakao.com/oauth/token", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
      body: `grant_type=authorization_code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&code=${CODE}`,
    })

 
 
 step 3 인가코드를 통해 카카오API로부터 발급받은 토큰을 백엔드에 전송

//KakaoAuth.js

fetch( ... )
  .then(res => res.json())
  .then(data => {
    if (data.access_token) {
      fetch("백엔드 API주소", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json;charset=utf-8' },
        body: JSON.stringify({
          kakaoAccessToken: data.access_token,//카카오로부터 발급받은 토큰을 백엔드가 준 키값에 맞춤
          nickname: '',//사용자의 이름을 쓸 페이지가 있어서 같이 요청
        }),
      })

 
 
 step 4 백엔드에게서 팀 프로젝트 사이트에서 사용할 전용 토큰을 다시 받기
백엔드에 카카오 서버로부터 전달 받은 토큰을 보내줬다면,
백엔드에선 그 토큰을 보안을 위해 사이트 전용 토큰으로 바꾸어 다시 보내준다.
토큰을 받으면 local storage 에 저장한다.

//KakaoAuth.js

.then(response => response.json())
.then(result => {
  if (result.token) {
    localStorage.setItem('TOKEN', result.token);
    localStorage.setItem('username', result.nickname);
  }
});

 
 
 
KakaoAuth.js 파일 전체 코드
인가코드를 통해 토큰 요청하고 발급받아 로컬스토리지에 저장되어 로그인이 실행되는 곳이다.
나는 사용자의 로그인이 지연되는 걸 대비해서 스피너(로딩바)를 추가해줬다.

import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { PulseLoader } from 'react-spinners';
import { API } from '../../../config';

function KakaoAuth() {
  const navigate = useNavigate();
  const location = useLocation();
  const CODE = location.search.split('=')[1];

  function getKakaoToken() {
    fetch(`${API.kakaoAuthToken}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
      body: `grant_type=authorization_code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&code=${CODE}`,
    })
      .then(res => res.json())
      .then(data => {
        if (data.access_token) {
          fetch(`${API.kakaoLogin}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            body: JSON.stringify({
              kakaoAccessToken: data.access_token,
              nickname: '',
            }),
          })
            .then(response => response.json())
            .then(result => {
              if (result.token) {
                localStorage.setItem('TOKEN', result.token);
                localStorage.setItem('username', result.nickname);
                alert('로그인 성공했어요!');
                navigate('/');
              }
            });
        } else {
          alert('다시 한 번 로그인해주세요!');
          navigate('/signin');
        }
      });
  }

  useEffect(() => {
    getKakaoToken();
  }, []);

  return (
    <Spinner>
      <PulseLoader color="#6200EE" margin={8} size={20} />
    </Spinner>
  );
}

export default KakaoAuth;

const Spinner = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`;

 
 

🔑 .env파일로 안전하게 파일 공유

그리고 client_id, redirect_uri는 보안의 이유로 .env 파일에 작성해서 코드를 공유하는 게 좋다.
깃헙에 그냥 올리면 client_id, redirect_uri를 다 공유하게 되기 때문에 위험할 수도 있다.
 
React 는 앞에 REACT_APP_변수명 으로 바꿔줘야 한다.

//.env.js

REACT_APP_CLIENT_ID = ...
REACT_APP_REDIRECT_URI = ...

 
따라서 client_id, redirect_uri 가 쓰인 곳에도 아래와 같이 process.env.REACT_APP_변수이름 으로 바꾼다.

//KakaoAuth.js

body: `grant_type=authorization_code&client_id=${process.env.REACT_APP_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&code=${CODE}`,