카카오 로그인 REST API

임동·2024년 5월 31일

서론

협업 프로젝트에서 로그인 파트를 맡게 되었다.
그 중 카카오 로그인을 구현하게 되었는데 카카오 로그인은 REST API와 SDK 방법이 있다고 한다. 이번 포스트에서는 REST API 방법에 대해 기록해본다.

카카오 로그인이란?

카카오 로그인은 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인을 사용하면 사용자가 카카오톡 또는 카카오계정으로 손쉽게 서비스에 로그인할 수 있습니다. 서비스는 서비스 ID 및 비밀번호를 입력받고 검증하는 과정을 직접 구현하지 않고도 사용자에 대한 인증과 인가를 간편하고 안전하게 처리할 수 있습니다. 카카오API

REST API

REST API 방법은 카카오 REST API를 직접 호출하여 로그인 기능을 구현하는 방식이다.
REST API로 카카오 로그인을 구현하게 된다면, REST API에서 제공하는 카카오 로그인 페이지에서 로그인 하거나, "카카오톡으로 로그인" 버튼을 클릭해서 카카오톡 앱으로 로그인 하여 사용이 가능하다.

REST API 방법을 사용하기 위해서는 사전에 설정해야할 것들이 있다.
설정에 관해서는 카카오 로그인 설정하기를 참고하는 것이 좋다.

REST API 로그인 과정

위의 이미지는 카카오 API에서 제공하는 로그인 과정을 나타낸 시퀀스 다이어그램이다.

순서를 나열해보면
0. 프론트에서 로그인 버튼을 눌러서 로그인 URL로 이동한다.
1. 로그인 URL로 진입하면 백에서 카카오로 인가 코드 요청을 보낸다.
2. 카카오 서버는 프론트로 로그인 요청 화면을 띄워준다.
3. 사용자는 카카오 로그인을 한다.
4. 카카오는 인가를 위한 사용자 동의를 요청하는 화면을 띄워준다.
5. 사용자는 동의를 한다.
6. 카카오 서버는 Redirect URI로 인가 코드를 보낸다.
7. 백은 카카오에서 받은 인가코드로 토큰을 요청한다.
8. 카카오는 백에서 받은 인가코드로 토큰을 발급해준다.
9. 백은 카카오에서 받은 토큰으로 사용자 정보 조회를 한 후 로그인 완료 처리를 한다.

예시 코드

export default function Login() {
  const REST_API_KEY = "REST_API_KEY";
  const REDIRECT_URI = "REDIRECT_URI";
  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

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

  return (
    <button type="button" onClick={loginHandler}>
      로그인 하기
    </button>
  );
}