[Front-end] 카카오 로그인 서비스 구현에 관하여, 주의 사항

 

 

프로젝트를 진행 하던 중

KaKao REST API를 이용해서 kakao 로그인을 연동하는 기능을 구현하기로 했다.

 

 

프론트엔드 단에서 할 일은 매우 간단하다고 볼 수 있는데..

 

사진으로 한 번 보고가는게 이해가 빠르기 때문에 출처를 남기고 사진을 올려보겠다.

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/common

 

카카오 로그인 서비스의 과정을 나타낸 사진이다. 그 중 REST API 방식은

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

그렇다면 프론트엔드에서 구현해야할 것들은..

 

 

1. 로그인 페이지에 카카오에서 지정한 URL로 로그인 페이지로 이동 시킨다.

2. 카카오 로그인 페이지에서 로그인을 하고 되돌아오는 인가코드를 받아서 백엔드에 전달한다.

3. 백엔드에 전달하고 나온 accessToken을 로컬 스토리지에 저장한다.

 

순서대로 살펴보자면

 

1. 로그인 페이지에 카카오에서 지정한 URL로 로그인 페이지로 이동 시킨다.

const handleKakaoLogin = () => {

    const REST_API_KEY = {카카오에서 받은 REST_API_KEY};

    const REDIRECT_URI = '카카오에 등록한 Redirect uri 입력';

    window.location.href = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;

  }

이런식으로 kakaoLogin 버튼을 누르면 함수가 실행되게 만든다.

 

여기서 첫 번째로 중요한 사실이 있는데,

Redirect_uri을 등록할때 백엔드와 프론트엔드 협업 중에 백엔드에서 테스트를 위해 서버 호스트 주소로 redirect 주소를 넣었다가 낭패를 봤다.

 

Redirect_URI가 무슨 URI인지 알기만 한다면 매우 쉽게 넘어 갈 수 있는데, 

 

 

 

어쨌든 저렇게 설정하고 함수를 실행하면 카카오 로그인 창으로 넘어가진다. 한마디로 인가 코드를 발급 받는 과정이다.

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

이런식으로 카카오계정으로 로그인을 하게 된다면 내가 설정한 Redirect URI 페이지로 돌아오게 된다.

 

user/login/oauth2/kakao

'use client';

import React, { useEffect } from "react";

import LoadingIndicator from "@compoents/components/UI/LoadingIndicator";

export default function KakaoLogin() {

  useEffect(() => {

    const kakaoLogin = async () => {

      const code = new URL(window.location.href).searchParams.get("code");

      if (code) {

        const response = await fetch(`{백엔드에서 지정한 API}?code=${code}`, {

          method: "GET",

          headers: {

            "Content-Type": "application/json;charset=utf-8",

          },

        });

        if (!response.ok) {

          throw new Error("로그인 실패");

        }

        const data = await response.json();

        console.log(data);

        const { accessToken, refreshToken } = data;

        localStorage.setItem("Authorization", `Bearer ${accessToken}`);

        const expiration = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);

        document.cookie = `refreshToken=${refreshToken}; Expires=${expiration.toUTCString()}; Secure; HttpOnly`;

        const existingAccessToken = localStorage.getItem("Authorization");

        if (existingAccessToken) {

          const redirectUrl = "http://localhost:3000"; // 리다이렉트 URL을 원하는 경로

          window.location.href = redirectUrl;

          return;

        }

      }

    };

    kakaoLogin();

  }, []);

 

  return (

    <div>

      <div>

        <LoadingIndicator />

        <p>로그인 중입니다.</p>

        <p>잠시만 기다려주세요.</p>

      </div>

    </div>

  );

}

 

내가 설정한 Redirect URI 페이지 코드이다. 

 

만약 카카오 로그인을 성공한다면 

글쓴이 local 환경 test

내가 지정한 Redirect_URI 페이지 옆에 ?code= 로 인가코드가 받아진걸 확인 할 수 있다.

이것을 이제 백엔드 API에 보내는 과정이 위 useEffect 안의 과정이다.

 

 

여기서 나에게 또 하나의 시련이 찾아 왔었는데 바로 useEffect가 두 번 실행되서 같은 인가코드를 한 번에 두 번 보내버리는 것이었다. 평소에 내 로컬 환경에서 두 번 실행하는 것 까진 괜찮았지만 이 카카오 인가코드를 보내는 과정은 내가 한 번에 두 번 API 요청을 해서 보내버리면 서버에서 에러가 나는 것 이었다.

KOE320, invalid_grant error

요청된 authorization code가 잘못되었거나 유효하지 않음을 의미한다는 에러가 서버에서 발생했는데

동일한 인가 코드를 두 번 이상 사용하여 발생한 에러였다.

 

그렇다면 이걸 해결 하는 방법을 서치하다 찾은 것은

바로 React 18 부터 생긴 strict mode가 켜져 있어서 발생한 것이었다.

개발 환경에서 컴포넌트를 두 번 렌더링시켜서 엄격하게 검사하여 버그를 찾아내게 한다는 목적이라는데..

-> 배포 환경에선 한 번만 렌더링 시킨다.

이 같은 경우는 useEffect에서 클린업 함수를 작성하지 않아 한 번더 렌더링하는 경우였다.

 

해결 방법은 아주 간단한데 바로 ReactStrictMode를 꺼놓는 방법이다.

사실 배포 환경에서 테스트하거나 실행하면 상관 없는 이슈 였지만 앞으로도 많은 테스트를 해야하기에

잠시 꺼두기로 하였다.

 

React에서는 리액트 APP을 감싸고 있는 <React.StrictMode>를 지우거나 주석처리 하면 되고

Next.js 환경에서는 next.config.js 파일에 

/** @type {import('next').NextConfig} */

const nextConfig = {

          reactStrictMode: false,

};

export default nextConfig;

 

이런식으로 Mode를 false 시키는 방법이 있을 것이다.

 

이렇게 설정한다면 카카오 로그인 구현은 모두 완성이다. 완성이지만 useEffect로 client components를 쓰는 대신 ServerComponents를 쓰는 방법은 없을까? 라는 고민을 해보았는데

공식문서를 찾아본 결과 https://nextjs.org/docs/app/api-reference/functions/next-response

Functions: NextResponse | Next.js

NextResponse를 사용하여 서버 컴포넌트에서 쿼리 매개변수에 접근 할 수 있다는 사실을 알아냈다.

이 방법을 바로 적용 할 순 있지만 현재 프로젝트 구조에 모든 accessToken을 localstorage에 접근하고 있기에 나중에 accessToken을 Cookie에 저장하여 방법을 변경할때 같이 변경하기로 했다.