[Kakao 간편 로그인] Next14 + App router + Typescript에 Oauth 카카오 간편 로그인 구현하기

내가 하고있는 프로젝트는 Next.js + typeScript + app router를 사용하는 프로젝트이다.

카카오 간편 로그인은 처음이라 좀 헤메었지만 일단 차근차근 해보았다.

1. 카카오 개발자 사이트에서 애플리케이션 등록

- 카카오 개발자 사이트 에 접속하여 애플리케이션을 등록합니다.

- REST API 키와 Redirect URI를 확인합니다.

사이트 도메인 등록

등록하러 가기 링크 클릭 ‼️

 

Redirect URL 등록

2. OAuth 인증 흐름 / API 엔드포인트 구현

- 사용자가 카카오 로그인 버튼을 클릭하면 카카오 인증 페이지로 리다이렉트합니다.

- 사용자가 인증을 완료하면 카카오는 설정한 Redirect URI로 `code`를 포함하여 리다이렉트합니다.

- 이 `code`를 사용하여 액세스 토큰을 요청합니다.

- 예를들어 엔드포인트(Redirect URL)는 카카오에서 리다이렉트된 후 `code`를 받아서 액세스 토큰을 요청하는 API 엔드포인트입니다. 이 엔드포인트는 사용자가 카카오 인증을 완료한 후 호출됩니다.

3. API 구현

백엔드 서버에 구현되어있다.

4. 로그인 페이지에서 카카오 로그인 버튼 추가

<div className="flex">
  <Link
    href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.KAKAO_REDIRECT_URI_SIGN_IN}&response_type=code`}
  >
    <Image src="/icons/social/social_kakao.svg" width={72} height={72} alt="카카오 로그인" />
  </Link>
</div>

5. 환경 변수 설정

.env 파일에 카카오 REST API 키와 Redirect URI를 설정합니다.

KAKAO_REST_API_KEY={YOUR_REST_API_KEY}
KAKAO_REDIRECT_URI={YOUR_REDIRECT_URI}

과정이 너무 복잡하다 .. app router는 처음이라 많이 헤매었다.

지금 부터는 제 프로젝트만 해당이되는 부분이니 참고만 하길 바랍니다 ~!

일단 나는 RedirectUrl을 api/oauth/callback/kakao로 만들었다.

위 경로의 route.ts에 카카오서버로 부터 인가코드를 발급받는 코드를 작성했다.

const searchParams = req.nextUrl.searchParams;
const code = searchParams.get("code");

이렇게 작성하면 카카오 아이콘을 클릭했을때

?code= 뒤에 인가 코드가 발급된다.

내가 사용하는 swagger API에서는 회원가입시 Request body에 이름, 닉네임 이외에 유저정보들과 쿼리스트링에 보이는 인가코드를 token에 넣어주어야한다.

근데 아무리 body를 작성하고 api 요청을해도 400에러가 뜨는것 .. 😡 알고보니 인가코드는 일회성인 것이였다.

한 번 사용하면 더 이상 유효하지 않으며, 보안상의 이유로 재사용이 불가능하다. 여기서 인가코드의 특징을 살펴보자.

✍️ 인가 코드의 특징

1. 짧은 유효 기간

• 카카오 인가 코드는 발급 후 약 10분 동안만 유효합니다.
• 이 기간 내에 액세스 토큰으로 교환해야 합니다

2. 1회 사용 제한

• 인가 코드는 한 번 사용하여 액세스 토큰을 발급받으면 무효화됩니다.
• 동일한 인가 코드를 다시 사용하려고 하면 에러가 발생합니다.

3. 목적

• 클라이언트가 OAuth 2.0 인증 흐름에서 서버로부터 액세스 토큰을 안전하게 요청하도록 하는 용도입니다.

인가 코드는 1회성이지만, 액세스 토큰을 발급받고 나면 리프레시 토큰으로 주기적으로 갱신이 가능합니다.
따라서 인가 코드를 다시 요청하는 일이 자주 발생하지 않도록 설계하는 것이 좋습니다.