카카오 로그인 Kakao Login

카카오 JS SDK

카카오 JS SDK를 사용해서 로그인 테스트를 진행해보세요. JavaScript Key를 입력하면 두 가지 방식으로 카카오 로그인을 테스트해볼 수 있습니다:
• 공식 방식 (리다이렉트) • 팝업 방식

카카오 로그인 데모 →카카오 SDK 참조 문서 →

JavaScript Key 입력

JavaScript Key

설정 가이드

카카오 디벨로퍼스 계정 생성

카카오 디벨로퍼스 사이트에서 계정을 생성하고 앱을 등록하세요.

플랫폼 등록

웹 플랫폼을 추가하고 사이트 도메인을 등록하세요.

Redirect URI 등록

카카오 로그인 → Redirect URI에 다음 URI들을 등록하세요:

현재 페이지 URL (권장):

[현재페이지URL]

💡 이 URL을 복사해서 사용하면 모든 환경에서 작동합니다

또는 수동으로 등록:

http://localhost:3000/kakao-login

https://crowrish.github.io/korean-services-intergration-kit/kakao-login

Redirect URI 등록 방법 보기 →

카카오 로그인 활성화

제품 설정에서 카카오 로그인을 활성화하고 필요한 동의항목을 설정하세요.

JavaScript Key 확인

앱 설정에서 JavaScript Key를 확인하고 위에 입력하세요.

SDK 상태

Kakao SDK 로딩 중...

구현 참고사항

• 공식 방식: 현재 페이지가 카카오 로그인 페이지로 리다이렉트되며, 인증 완료 후 등록된 Redirect URI로 돌아옵니다.

• 팝업 방식: 별도 팝업 창에서 로그인이 진행되며, 메인 페이지는 그대로 유지됩니다.

• 인증 성공 시 authorization code를 받게 되며, 이를 서버에서 access token으로 교환해야 합니다.

• 실제 서비스에서는 받은 토큰을 서버로 전송하여 사용자 정보를 안전하게 처리해야 합니다.

• 개발 환경에서는 localhost 도메인이 Redirect URI에 등록되어 있어야 정상 작동합니다.

SDK 설치 및 초기화

카카오 JavaScript SDK를 로드하고 초기화하는 방법입니다.

HTML 스크립트 방식

html

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.5/kakao.min.js"
        integrity="sha384-dok87au0gKqJdxs7msEdBPNnKSRT+/mhTVzq+qOhcL464zXwvcrpjeWvyj1kCdq6"
        crossorigin="anonymous"></script>

Next.js Script 컴포넌트 방식 (권장)

tsx

import Script from 'next/script';

<Script
  src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.5/kakao.min.js"
  integrity="sha384-dok87au0gKqJdxs7msEdBPNnKSRT+/mhTVzq+qOhcL464zXwvcrpjeWvyj1kCdq6"
  crossOrigin="anonymous"
  onLoad={() => console.log('Kakao SDK loaded')}
/>

공식 로그인 구현 (리다이렉트 방식)

카카오 공식 SDK를 사용한 표준 로그인 방식입니다. 현재 페이지가 카카오 로그인 페이지로 리다이렉트됩니다.

공식 로그인 구현

javascript

// SDK 초기화
Kakao.init('YOUR_JAVASCRIPT_KEY');

// 공식 로그인 방식 (리다이렉트)
function kakaoLogin() {
  Kakao.Auth.authorize({
    redirectUri: window.location.origin + '/callback' // 등록한 redirect_uri
  });
}

// 버튼 클릭 이벤트
<button onClick={() => kakaoLogin()}>
  <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222" alt="카카오 로그인 버튼" />
</button>

팝업 로그인 구현

팝업 창에서 카카오 로그인을 진행하는 방식입니다. 메인 페이지는 그대로 유지됩니다.

팝업 로그인 구현

javascript

// SDK 초기화
Kakao.init('YOUR_JAVASCRIPT_KEY');

// 팝업 로그인 방식
function kakaoPopupLogin() {
  // 팝업 창 생성
  const popup = window.open(
    '',
    'kakaoLogin',
    'width=500,height=600,scrollbars=no,resizable=no'
  );

  if (!popup) {
    alert('팝업이 차단되었습니다. 팝업 차단을 해제해주세요.');
    return;
  }

  // 인증 URL 생성
  const clientId = 'YOUR_JAVASCRIPT_KEY';
  const redirectUri = encodeURIComponent(window.location.origin + '/callback');
  const authUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;
  
  // 팝업에서 인증 페이지로 이동
  popup.location.href = authUrl;

  // 팝업 창 모니터링
  const checkClosed = setInterval(() => {
    if (popup.closed) {
      clearInterval(checkClosed);
      console.log('팝업 창이 닫혔습니다.');
    }
  }, 1000);
}

// 버튼 클릭 이벤트
<button onClick={() => kakaoPopupLogin()}>
  카카오 로그인 (팝업)
</button>