카카오 소셜 로그인의 기본 흐름

image.png

image.png

image.png

소셜 로그인에서 FE의 역할

image.png

image.png

FE 작업

카카오 SDK 스크립트 추가

// src/app/layout.tsx 에 아래 코드를 추가합니다. 
import Script from 'next/script';
<중략>
	return 
      <head>
        <Script
          src='<https://developers.kakao.com/sdk/js/kakao.js>'
          strategy='beforeInteractive'
        />
      </head>
<중략>

카카오 SDK 스크립트를 추가하는 가장 적합한 위치는 src/app/layout.tsx 파일입니다.

이 파일은 모든 페이지에 공통으로 적용되는 레이아웃을 정의합니다.

strategy="beforeInteractive" 옵션을 사용하면 페이지가 상호작용 가능해지기 전에 스크립트가 로드되도록 보장합니다. 이는 사용자가 페이지와 상호작용하기 전에 카카오 SDK가 완전히 로드되어야 하기 때문에 적합한 전략입니다.

카카오톡에 간편 로그인 요청

// src/utils/kakaologin.ts
const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

// src/utils/kakaoLogin.ts
const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
const BACKEND_AUTH_ENDPOINT = process.env.NEXT_PUBLIC_BACKEND_AUTH_ENDPOINT || '<https://your-backend-api.com/auth/kakao>';

// 카카오 로그인 URL 생성
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

// 백엔드에 인가 코드 전송하고 토큰 받기
export async function getTokenFromBackend(code: string) {
  try {
    const response = await fetch(BACKEND_AUTH_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ code }),
    });

    if (!response.ok) {
      throw new Error('Failed to authenticate with the backend');
    }

    return await response.json();
  } catch (error) {
    console.error('카카오 로그인 처리 실패:', error);
    throw error;
  }
}