React - 카카오로그인 구현하기 (REST API)

보안 문제로 사용하지 못하게 된 아까운 나의 코드...

블로그와 Kakao Developers 문서 참고해가면서 열심히 구현했는데, 프론트에서 카카오 쪽에

인가 코드를 요청하고 Access Token을 받아오는 과정을 수행하면 보안상 문제가 발생 할 수 있다는 걸

다음날 알게되어서(...) 피눈물을 흘리며 패기처분한 코드다.

 

프론트에서 할 거라곤 카카오 로그인 버튼을 누르면 백서버에 로그인 요청 보내는 것 뿐이었다...ㅎ

미리 알았다면 헛고생은 안했을 텐데 하는 아쉬움이 남지만, 그래도 프론트단에서

카카오 로그인을 혼자 구현해 보았다는 뿌듯함이 컸기 때문에 후회는 하지 않는다!!

 

고생하면서 작성한 코드니까 기록기록

리액트, 타입스크립트 기반으로 REST API 방식 사용해서 구현했다!

 

Kakao Developers

Kakao Developers

공식문서가 장땡이다.

결국 보안 문제 관련된 것도 카카오 로그인 공식문서 내 REST API 부분에 정리되어 있는

아래 흐름을 정확히 이해했다면 벌어지지 않았을 참사였음...

내가 작성한 코드는 프론트에서 Step 1, 2를 모두 처리한 코드다.

혹시나 서치해서 보러 오시는 분들이 있으시다면 참고하시면 좋을듯...

 

애플리케이션 등록

애플리케이션 등록을 해야 REST API KEY를 발급 받을 수 있기 때문에,

Kakao Developers 내 애플리케이션 등록 탭을 참고하여 애플리케이션을 등록해주자!

• 애플리케이션 추가하기 - 서비스 등록
• 등록한 서비스 내 플랫폼 설정하기 : 서비스에 필요한 도메인 등록 (Android, iOS, Web)
  
  • 웹앱을 개발 중이라 웹 플랫폼을 등록했고, 배포 중인 도메인 주소와 localhost주소를 추가해주었다. 
• 활성화 설정

•  Redirect URI 등록 : 해당 주소로 인가 코드를 받기 때문에 내 서비스에서 접근 가능한 도메인이어야 함
  • 나의 경우에는 http://localhost:3000/login, 배포중인 도메인주소/login 이렇게 등록해 주었다.
• 동의 항목에서 사용자에게 받아올 정보 설정

 

REST API 기반 코드 구현

// Start.tsx

import { REST_API_KEY, REDIRECT_URI } from "./KakaoLoginData";

const Start = () => {
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const handleLogin = () => {
    window.location.href = KAKAO_AUTH_URL;
  };

  return (
    <div className="Start">
      <h1>Start입니다</h1>
      <img
        src="img/kakao_login_medium_narrow.png"
        alt="login"
        onClick={handleLogin}
      />
    </div>
  );
};

export default Start;

// Login.tsx

import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
import { REST_API_KEY, REDIRECT_URI } from "../Start/KakaoLoginData";

function Login() {
  const location = useLocation(); // 주소값(localhost:3000/login?code='인가코드') 받아오기 위해 useLocation 사용
  const navigate = useNavigate(); // navigation기능 사용을 위해 navigate 선언
  const KAKAO_CODE = location.search.split("=")[1]; // parameter로 전달받은 카카오측 인가코드 받아오기

  // 주소에서 인가코드 받아오는 또 다른 방법
  // const params = new URL(document.location).searchParams;
  // const KAKAO_CODE = params.get("code");

  // 카카오 토큰 받아오는 함수
  const getKakaoToken = async (KAKAO_CODE: string) => {
    axios
      .post(
        "https://kauth.kakao.com/oauth/token",
        `grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${KAKAO_CODE}`,
        {
          headers: {
            "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        }
      )
      .then((res) => {
        if (res.data.access_token) {
          localStorage.setItem("token", res.data.access_token); // 카카오 Access token 로컬 스토리지에 저장
          console.log(res.data.access_token); // 카카오 Access token 콘솔에 출력
        } else {
          navigate("/");
        }
      });
  };

  // 인가 코드가 존재할 경우(초기 로그인) => 토큰 발급 함수 실행
  useEffect(() => {
    if (KAKAO_CODE) {
      getKakaoToken(KAKAO_CODE);
    }
  }, []);

  return (
    <div className="Login">
      <h1>Login</h1>
    </div>
  );
}

export default Login;

 

비록 사용하지는 못하게 된 코드지만 많이 배울 수 있었던 뜻깊은 시간이었다!