카카오 간편 로그인 구현하기

개바리바리·2025년 2월 20일

API login

[프로젝트] 주차 정산 시스템

목록 보기

2/10

포트폴리오를 만들기 위해 로그인 기능을 만드려다가
이력서에 '카카오 로그인 API 사용해봄'을 적으면 멋있을 것같아서 해봤다
참고로 프로젝트는 React + Typescript

시작하기 전에

카카오 로그인 구현에는
REST API, Javascript sdk, Android, iOS 등 다양한 방법이있는데
나는 연습하고 싶어서 REST API를 방법으로 해봤다

카카오 로그인 공식문서 - REST API
겁먹지 말자 REST API 가 뭔지도 모르는 나도 했다
다른 분들은 어떻게 했나 블로그도 보고
중간중간 에러를 콘솔에 확인해서 서칭하는것도 많은 도움이 됐다

사전 설정

위에 적혀진 사전사항들을 해주면된다
Redirect URI 로는 사람들이 많이 적는다는
http://localhost:3000/auth/kakao/callback을 적었다

그리고 보안도 중요하니 프로젝트 루트경로에서 .env 폴더를 만들어
환경변수로 만들어 사용했다
아래 변수들만 저장해놓으면 준비완료!

REACT_APP_REST_API_KEY 
REACT_APP_REDIRECT_URI
REACT_APP_CLIENT_SECRET

❶ 인가 코드 받기

import kakaoLoginImageURL from '../images/kakao_login_large_narrow.png';

<a href={KAKAO_AUTH_URL}>
	<img src={kakaoLoginImageURL} width="222"/>
</a>

먼저 링크로 된 로그인 버튼을 만들어주고
링크를 클릭하면 KAKAO_AUTH_URL 이라는 url로 이동하게 했다
이때 url에 쿼리파라미터 값이 잘 들어가게 체크하기

const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

누르면 카카오톡 로그인을 할수있게 나올것이다
그 로그인을 하면 카카오 인증 서버는
인가 코드를 담은 문자열을 redirect_uri로 리다이렉트(Redirect)를 하는데

이 인가코드를 받기위해 라우터로 redirect_uri인 /auth/kakao/callback 일 경우
어떤 페이지로 이동할 수 있게 해주기
나는 이게 kakao.tsx 페이지였다

import { Route, Routes, BrowserRouter as Router } from "react-router-dom";
import  Kakao  from "./Kakao";

root.render(
  <Router>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/auth/kakao/callback" element={<Kakao/>} />
  </Routes>
</Router>
);

그리고 다시 카카오톡 로그인해주기
그럼 페이지가 이동하고 url을 자세히 보면
?code= 하고 뭐가 적혀져있는걸 확인할수있는데 그게 바로 인가 코드다

http://localhost:3000/auth/kakao/callback?code=wUx…ZA_eSukg_7Pmr29kAAAAAQKPXNNAAABlR31ZgzNsk3jZ7dWzg

그리고 code 가져오기
const code = new URLSearchParams(window.location.search).get('code');

❷ Access Token 발급

가져온 인가 코드로 access token을 발급받을 것이다

토큰 받기 위해 필수 파라미터를 포함해 POST로 요청한다
그럼 응답으로 토큰정보를 받을 수 있다

const code = new URLSearchParams(window.location.search).get('code');

const tokenResponse = await fetch("https://kauth.kakao.com/oauth/token", {
	method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: `grant_type=authorization_code&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&code=${code}&client_secret=${process.env.REACT_APP_CLIENT_SECRET}`,
                })

const tokenData = await tokenResponse.json();

❸ API 요청으로 사용자 정보 받아오기

이제 access token으로 API 요청 해서 사용자 정보 가져오기
사용자 정보 가져오기 위한 함수에 토큰을 인수로 보낸뒤

getKakaoUserInfo(tokenData.access_token);

사용자 정보를 받을 준비 하기

interface KakaoUserInfo {
    nickname: string;
    profile_image?: string;
    thumbnail_image?: string;
}

const [userInfo, setUserInfo] = useState<KakaoUserInfo | null>(null);

그후 access token 을 헤더에 담아 API 요청을 하고
응답받은 데이터는 userInfo 상태에 넣어준다



const getKakaoUserInfo = async (accessToken: string) => {
	try {
    	const response = await fetch('https://kapi.kakao.com/v2/user/me', {
        	headers: {
            	Authorization: `Bearer ${accessToken}`,
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            },
		});
		const data = await response.json();
        setUserInfo({
            	nickname: data.properties.nickname,
                profile_image: data.properties.profile_image,
                thumbnail_image: data.properties.thumbnail_image,
            })
        } catch (error) {
            console.error('사용자 정보 조회 실패:', error);
            throw error;
        }
    };

그리고 ui로 확인해보면 끝 🎉

    return (
        <div className="text-center p-4 pt-80">
            {userInfo && (
                <div>
                    <div>환영합니다, {userInfo.nickname}님!</div>
                    {userInfo.profile_image && (
                        <img
                            src={userInfo.profile_image}
                            alt="프로필 이미지"
                            className="w-20 h-20 rounded-full mx-auto mt-4"
                        />
                    )}
                </div>
            )}
        </div>
    );