[사프] 카카오 Auth 적용

세나정·2025년 1월 7일

KakaoAuth React

[PROJECT 3] Wedvice

목록 보기

2/2

이번엔 로그인 페이지에 들어갈 Kakao Auth 기능을 구현해 볼 것이다!

백엔드분이 카카오 Develeoper 계정을 통해 여러가지 API 관련 값들을 보내주었고 나는 프론트엔드에서 로그인 버튼을 생성한 뒤에 해당 주소로 통신만 하면 되는 간단한 문제이다!

(나는 Next 프레임 워크를 사용해 개발 중이기 때문에 타 블로그의 React와는 살짝 다른 부분이 존재할 수 있음)

자세한 설명은 아래 링크를 참고 :)
https://developers.kakao.com/docs/latest/ko/kakaologin/common

카카오 로그인 프로세스

상세 과정

키값 저장

백엔드분이 카카오 developers에서 애플리케이션을 생성했으면 해당 앱에 대한 여러 키가 생성되고 그 키를 전달받으면 된다.

또한, 위 뿐만이 아니라 카카오 로그인 탭에서 Redirect URI를 작성 해줘야함

위 정보는 내가 카카오 아이디를 입력 후 정상적으로 로그인 됐으면 '확인하고 계속하기' 버튼을 눌렀을 때 Redirect 되는 URI로 알고 있으면 될듯

.env 파일에 관리

해당 정보는 보안과 관련 깊기때문에 절대 git에 올려선 안 됨
.env 파일에 관리하면 됨

이렇게 전달받은 여러 키값들을 env 파일에 저장을 했으면

로그인 버튼 구현

나는 아래처럼 window를 활용하여 로그인 핸들러를 작성한 후,
카카오가 제공하는 이미지 버튼에 onClick함수로 등록하여 이동할 수 있도록 했음

여기에서 KAKAO_AUTH_URL에 담긴 정보들은 우리가 env에 저장한 정보임을 다 알 것임!

'use client';

import React from 'react';

const Login = () => {
  const KAKAO_AUTH_URL = `${process.env.NEXT_PUBLIC_KAKAO_AUTH_URL}?client_id=${process.env.NEXT_PUBLIC_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`;

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

  return (
    <img
      src="/kakao_login_medium_wide.png"
      className="block hover:cursor-pointer"
      onClick={loginHandler}
    />
  );
};

export default Login;

로그인 화면에 삽입

이제 Login 컴포넌트를 작성했으니 (사실 LoginButton이라고 짓는 게 맞긴 함)

해당 버튼을 애플리케이션의 로그인 페이지 삽입 한 후에 클릭해보면

우리가 설정했던 RedirectURI로 인가코드가 들어 오는 것을 확인 가능
우리가 설정한 값 뒤에 code= ~ 머시기

그러면 이제 code를 파싱하는 로직을 만들어서 router이동과 db에 해당 인가코드값을 저장해주면 됨

'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import axios from 'axios';

const Redirection = () => {
  const router = useRouter();
  const code = new URLSearchParams(window.location.search).get('code');
  const [accessTokenFetching, setAccessTokenFetching] = useState(false);

  console.log('code:', code);

  // Access Token 받아오기
  const getAccessToken = async () => {
    if (accessTokenFetching) return; // Return early if fetching

    console.log('getAccessToken 호출');

    try {
      setAccessTokenFetching(true); // Set fetching to true

      const res = await axios
        .post(
          'https://kauth.kakao.com/oauth/token',
          {
            authorizationCode: code,
          },
          {
            headers: {
              'Content-Type': 'application/json',
            },
          },
        )
        .then((res) => {
          const accessToken = res.data.accessToken;
          console.log('accessToken:', accessToken);

          localStorage.setItem('userName', res.data.user_name);

          setAccessTokenFetching(false); // Reset fetching to false
          // router.push('/Home');
        });
    } catch (error) {
      console.error('Error:', error);
      setAccessTokenFetching(false); // Reset fetching even in case of error
    }
  };

  useEffect(() => {
    if (code) {
      getAccessToken();
    }
  }, [code]);

  return <div>Loading...</div>;
};

export default Redirection;

그렇게 되면 위 페이지가 잠깐 나오고 우리가 설정한 Router 값으로 이동을 하면 끝!