Legacy JavaScript

이 문서는 Kakao SDK for JavaScript v1(이하 Legacy JavaScript SDK)를 사용한 카카오 로그인 구현 방법을 안내합니다.

카카오 로그인 구현에 필요한 로그인 버튼 이미지는 [도구] > [리소스 다운로드]에서 제공합니다. 해당 로그인 버튼은 디자인 가이드를 참고하여 서비스 UI에 적합한 크기로 수정하여 사용할 수 있습니다.

리소스 다운로드outlink디자인 가이드

시작하기 전에

카카오 로그인 과정

PC 및 모바일 웹 환경의 서비스는 Legacy JavaScript SDK를 사용하면 클라이언트와 서버 요청 각각의 이점을 살려 카카오 로그인을 구현할 수 있습니다. Legacy JavaScript SDK의 간편로그인 사용 시, 사용자가 모바일 웹에서 서비스를 이용 중인 경우에는 카카오계정 정보 입력 없이 카카오톡으로 간편하게 로그인할 수 있습니다. 다음은 Legacy JavaScript SDK를 사용한 카카오 로그인 과정을 나타낸 시퀀스 다이어그램입니다. 단계별 안내와 REST API를 함께 참고합니다.

1. 간편로그인 요청 2. 토큰 받기 3. 사용자 로그인 처리

카카오 로그인

간편로그인

기본 정보

사전 설정	동의항목	레퍼런스
플랫폼 등록 카카오 로그인 활성화 Redirect URI 등록 동의항목 OpenID Connect 활성화(선택)	필요: 필수 동의항목	authorize()

카카오 로그인 함수인 Kakao.Auth.authorize()로 간편로그인을 요청합니다. 간편로그인은 카카오계정 ID 및 비밀번호 입력 없이 카카오톡을 통해 사용자를 인증하고 인가 코드를 발급받는 기능입니다.

사용자가 카카오 로그인 버튼을 클릭했을 때 Kakao.Auth.authorize()를 호출하면, Legacy JavaScript SDK가 간편로그인을 위해 카카오톡을 실행합니다. 카카오톡이 설치되지 않은 환경에서는 카카오계정으로 로그인을 시도하며, 이후 과정은 REST API를 참고합니다.

사용자는 카카오톡의 동의 화면에서 서비스 이용에 필요한 동의항목에 동의하고 로그인하거나 로그인을 취소할 수 있습니다. 카카오 인증 서버는 사용자의 선택에 따라 요청 처리 결과를 담은 쿼리 스트링(Query string)을 redirectUri로 HTTP 302 리다이렉트(Redirect)합니다. Redirect URI는 [내 애플리케이션] > [카카오 로그인] > [Redirect URI]에 등록된 값 중 하나여야 합니다.

• 사용자가 모든 필수 동의항목에 동의하고 [동의하고 계속하기] 버튼을 누른 경우
  • redirectUri로 인가 코드를 담은 쿼리 스트링 전달
• 사용자가 동의 화면에서 [취소] 버튼을 눌러 로그인을 취소한 경우
  • redirectUri로 에러 정보를 담은 쿼리 스트링 전달

서비스 서버는 redirectUri로 HTTP 302 리다이렉트된 요청의 Location에서 인가 코드 또는 에러를 확인해 다음과 같이 처리해야 합니다.

• 간편로그인 요청 성공
  • code 및 state가 전달된 경우
  • code의 인가 코드 값으로 토큰 받기 요청
• 간편로그인 요청 실패
  • error 및 error_description이 전달된 경우
  • 문제 해결, 응답 코드를 참고해 에러 원인별 상황에 맞는 서비스 페이지나 안내 문구를 사용자에게 보여주도록 처리

REST API에서 보다 자세한 카카오 로그인 과정 안내를 확인할 수 있습니다.

파라미터

이름	타입	설명	필수
redirectUri	String	인가 코드를 전달받을 서비스 서버의 URI [내 애플리케이션] > [카카오 로그인] > [Redirect URI]에서 등록	O
scope	String	추가 항목 동의 받기 요청 시 사용 사용자에게 동의 요청할 동의항목 ID 목록 동의항목의 ID는 사용자 정보 또는 [내 애플리케이션] > [카카오 로그인] > [동의항목]에서 확인 가능 쉼표(,)로 구분해 여러 개 전달 가능 주의: OpenID Connect를 사용하는 앱의 경우, scope 파라미터 값에 openid를 반드시 포함해야 함, 미포함 시 ID 토큰이 재발급되지 않음 (참고: 인가 코드 받기 API의 scope 파라미터)	X
throughTalk	Boolean	간편로그인 사용 여부 (기본값: true)	X
prompts	String	카카오톡에서 자동 로그인, 기존 로그인 여부와 상관없이 로그인 요청 시 사용 동의 화면 요청 시 추가 상호작용을 요청하고자 할 때 전달하는 파라미터 쉼표(,)로 구분된 문자열 값 목록으로 전달 다음 값 사용 가능: login: 기존 사용자 인증 여부와 상관없이 사용자에게 카카오계정 로그인 화면을 출력하여 다시 사용자 인증을 수행하고자 할 때 사용, 카카오톡 인앱 브라우저에서는 이 기능이 제공되지 않음 none: 사용자에게 동의 화면과 같은 대화형 UI를 노출하지 않고 인가 코드 발급을 요청할 때 사용, 인가 코드 발급을 위해 사용자의 동작이 필요한 경우 에러 응답 전달	X
serviceTerms	String	서비스 약관 선택해 동의 받기 요청 시 사용 동의받을 서비스 약관 태그 목록 서비스 약관 태그는 [내 애플리케이션] > [카카오 로그인] > [간편가입]에서 확인 가능 쉼표(,)로 구분된 문자열 값 목록으로 전달	X
state	String	카카오 로그인 과정 중 동일한 값을 유지하는 임의의 문자열(정해진 형식 없음) Cross-Site Request Forgery(CSRF) 공격으로부터 카카오 로그인 요청을 보호하기 위해 사용 각 사용자의 로그인 요청에 대한 state 값은 고유해야 함 인가 코드 요청, 인가 코드 응답, 토큰 발급 요청의 state 값 일치 여부로 요청 및 응답 유효성 확인 가능	X
nonce	String	OpenID Connect를 통해 ID 토큰을 함께 발급받을 경우, ID 토큰 재생 공격을 방지하기 위해 사용 ID 토큰 유효성 검증 시 대조할 임의의 문자열(정해진 형식 없음)	X

예제

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}'
});

토큰 받기

서비스 서버에서 인가 코드를 사용해 REST API로 토큰 받기를 요청하여 로그인을 완료합니다. OpenID Connect를 사용하는 앱인 경우, 토큰 받기를 통해 ID 토큰을 함께 발급받을 수 있습니다.

• 토큰은 액세스 토큰(Access token), 리프레시 토큰(Refresh token), ID 토큰(ID token) 세 종류입니다.
  • ID 토큰은 OpenID Connect 사용 시에만 발급됩니다.
  • 액세스 토큰은 토큰 정보 보기, ID 토큰은 ID 토큰 유효성 검증을 통해 각각 유효성을 검증할 수 있습니다.

카카오 로그인을 완료해 서비스 서버에서 토큰을 발급받으면, 서비스 서버에서 액세스 토큰으로 사용자 정보 가져오기를 호출해 회원 가입 및 로그인에 필요한 사용자 정보를 요청할 수 있습니다. 액세스 토큰을 서비스 클라이언트로 전달해 토큰 할당하면, 서비스 클라이언트에서도 Legacy JavaScript SDK를 통한 카카오 API 요청에 사용할 수 있습니다.

토큰 할당하기

기본 정보

레퍼런스
setAccessToken()

간편로그인 이외의 카카오 API를 클라이언트에서 Legacy JavaScript SDK로 호출하려면 액세스 토큰(Access token) 값을 할당해야 합니다. 카카오 로그인 완료 후 다음과 같이 Kakao.Auth.setAccessToken 함수를 호출해 서비스 서버에서 전달받은 액세스 토큰 값을 Legacy JavaScript SDK에서 사용하도록 할당할 수 있습니다.

예제

Kakao.Auth.setAccessToken(ACCESS_TOKEN);

추가 기능

간편로그인 요청 시 사용할 수 있는 추가 기능은 다음과 같습니다.

• 추가 항목 동의 받기
• 카카오톡에서 자동 로그인하기
• 서비스 약관 선택해 동의 받기
• 기존 로그인 여부와 상관없이 로그인하기

추가 항목 동의 받기

추가 항목 동의 받기는 사용자가 동의하지 않은 동의항목에 대한 추가 동의를 요청할 때 사용하는 추가 기능입니다. Kakao.Auth.authorize() 함수 호출 시 scope 파라미터로 추가 동의받을 항목의 ID 목록을 지정합니다. 응답으로 받은 인가 코드로 토큰 받기를 요청해 카카오 로그인을 완료한 뒤, 이후 카카오 API 요청 시 새로 발급받은 토큰을 사용해야 합니다. 아래는 scope에 이메일, 성별의 추가 동의를 요청하는 예제입니다.

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}',
  scope: 'account_email,gender'
});

카카오톡에서 자동 로그인하기

카카오톡에서 자동 로그인은 카카오톡 인앱브라우저를 통한 서비스 페이지 진입 시 서비스 가입 여부에 따른 분기 처리를 지원하는 추가 기능입니다. 이해하기에서 자세한 안내를 확인한 후 사용해야 합니다. 간편로그인 요청 시 prompts 파라미터 값을 none으로 지정합니다.

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}',
  prompts: 'none'
});

서비스 가입을 완료하지 않아 아직 앱과 연결되지 않은 사용자인 경우, 아래와 같이 사용자 동의가 필요하다는 에러 응답이 redirect_uri로 전달됩니다. 이 경우, 사용자가 직접 서비스 페이지를 통해 카카오 로그인 및 서비스 가입을 해야 합니다.

HTTP/1.1 302 Found
Content-Length: 0
Location: ${REDIRECT_URI}?error=consent_required&error_description=user%20consent%20required.

서비스 약관 선택해 동의 받기

서비스 약관 선택해 동의 받기는 카카오 로그인 동의 화면에 포함할 서비스 약관을 지정하는 추가 기능입니다. 사용자의 서비스 가입 시나리오에 따라 앱에 등록된 서비스 약관 중 특정 서비스 약관을 지정해 동의받고자 할 때 사용합니다. 간편로그인 요청 시 serviceTerms 파라미터로 동의 화면에 포함할 서비스 약관 태그 목록을 지정합니다. 요청 시 [필수 동의]로 설정된 서비스 약관을 하나 이상 포함해야 동의 화면을 출력하고 사용자에게 동의받을 수 있습니다.

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}',
  serviceTerms: 'account_email'
});

OpenID Connect ID 토큰 발급하기

OpenID Connect 사용 서비스인 경우, OpenID Connect 활성화 설정이 되어 있다면 별도 파라미터 없이도 ID 토큰을 함께 발급받을 수 있습니다. OpenID Connect 사용 시 ID 토큰 재생 공격을 방지하기 위해 nonce 파라미터 사용을 권장합니다. 단, 추가 항목 동의 받기 요청 시에는 scope 파라미터에 openid를 포함해야 ID 토큰 재발급이 가능합니다. (참고: 인가 코드 받기 API의 scope 파라미터)

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}',
  nonce: '${NONCE}'
});

기존 로그인 여부와 상관없이 로그인하기

기존 로그인 여부와 상관없이 로그인하기는 서비스의 필요에 따라 사용자 인증을 다시 수행하고자 할 때 사용하는 추가 기능입니다. 이 기능을 사용하면 사용자가 브라우저에 카카오계정으로 로그인되어 있는 상태라도 다시 카카오계정으로 로그인하는 과정을 거쳐 서비스에 카카오 로그인하도록 할 수 있습니다. 간편로그인 요청 시 prompts 파라미터 값을 login으로 지정합니다.

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}',
  prompts: 'login'
});

로그아웃

기본 정보

사전 설정	카카오 로그인	레퍼런스
플랫폼 등록 카카오 로그인 활성화	필요	logout()

현재 로그인한 사용자를 로그아웃시킬 때 사용하는 기능입니다. 로그아웃은 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록 합니다.

사용자가 로그아웃 버튼을 눌렀을 때 Kakao.Auth.logout() 함수를 호출하면 토큰을 만료시킬 수 있습니다. 로그아웃 성공 시, 콜백 함수를 통해 서비스의 로그아웃 로직을 수행하도록 구현해야 합니다.

파라미터

타입	설명	필수
Function()	토큰 만료 시 호출되는 콜백 함수	X

예제

if (!Kakao.Auth.getAccessToken()) {
  console.log('Not logged in.');
  return;
}
Kakao.Auth.logout(function() {
  console.log(Kakao.Auth.getAccessToken());
});

연결 끊기

기본 정보

사전 설정	카카오 로그인	레퍼런스
플랫폼 등록 카카오 로그인 활성화	필요	request()

연결 끊기는 앱과 사용자 카카오계정의 연결을 끊는 기능입니다. 사용자가 연결 끊기 버튼을 클릭했을 때 url 값을 /v1/user/unlink로 지정하여 Kakao.API.request() 함수를 호출합니다.

파라미터

이름	타입	설명	필수
url	String	/v1/user/unlink로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X

예제

Kakao.API.request({
  url: '/v1/user/unlink',
  success: function (response) {
    console.log(response);
  },
  fail: function (error) {
    console.log(error);
  }
});

사용자 정보 가져오기

기본 정보

사전 설정	카카오 로그인	동의항목	레퍼런스
플랫폼 등록 카카오 로그인 활성화 동의항목	필요	필요: 사용자 정보를 요청할 모든 동의항목	request()

현재 로그인한 사용자의 카카오계정 정보를 불러옵니다. url에 /v2/user/me를 지정해 Kakao.API.request() 함수를 호출합니다.

property_keys 파라미터를 통해 특정 사용자 정보만 지정해 요청할 수도 있습니다. 해당 파라미터에 사용할 수 있는 키의 종류는 REST API를 참고합니다.

요청 성공 시 응답은 각 사용자 정보를 포함합니다. 응답 내용은 REST API와 동일하므로 사용자 정보를 참고합니다.

파라미터

이름	타입	설명	필수
url	String	/v2/user/me 로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X
data	Object	API에 전달할 파라미터, 자세한 내용은 data: 사용자 정보 가져오기 확인	X

data: 사용자 정보 가져오기

이름	타입	설명	필수
property_keys	String[]	요청할 사용자 정보 종류를 지정할 때 사용하는 사용자 정보의 키 목록 사용자 정보 참고 (예: ['kakao_account.email','kakao_account.gender'])	X

예제

Kakao.API.request({
  url: '/v2/user/me',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

예제: 이메일, 성별 정보 가져오기

Kakao.API.request({
  url: '/v2/user/me',
  data: {
    property_keys: ['kakao_account.email','kakao_account.gender']
  },
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

사용자 정보 저장하기

기본 정보

사전 설정	카카오 로그인	레퍼런스
플랫폼 등록 카카오 로그인 활성화 사용자 프로퍼티	필요	request()

사용자 프로퍼티에 값을 저장합니다. 키 값은 [내 애플리케이션] > [카카오 로그인] > [사용자 프로퍼티]에 정의한 값을 사용해야 합니다.

url 값을 /v1/user/update_profile로 지정하여 Kakao.API.request() 함수를 호출합니다. 사용자 프로퍼티 저장에 성공하면 응답 코드와 함께 정보 저장에 성공한 사용자의 회원번호를 받습니다.

아래 예제와 같이 요청합니다. 요청 성공 시 응답은 REST API를 참고합니다.

파라미터

이름	타입	설명	필수
url	String	/v1/user/update_profile 로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X
data	Object	API에 전달할 파라미터, 자세한 내용은 data: 사용자 정보 저장하기 확인	O

data: 사용자 정보 저장하기

이름	타입	설명	필수
properties	Object	저장할 사용자 정보, JSON 형식의 키와 값 쌍으로 구성 (예: {'${CUSTOM_PROPERTY_KEY}': '${CUSTOM_PROPERTY_VALUE}'})	O

예제

Kakao.API.request({
  url: '/v1/user/update_profile',
  data: {
    properties: {
      '${CUSTOM_PROPERTY_KEY}': '${CUSTOM_PROPERTY_VALUE}'
    },
  },
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

배송지 가져오기

기본 정보

사전 설정	카카오 로그인	동의항목	레퍼런스
플랫폼 등록 카카오 로그인 활성화 동의항목	필요	필요: 배송지 정보(shipping_address)	request()

현재 로그인한 사용자의 배송지 정보를 가져옵니다.

url 값을 /v1/user/shipping_address로 지정하여 Kakao.API.request() 함수를 호출합니다. 사용자의 배송지 목록 중 특정 배송지 정보만 요청하려면 data 하위의 address_id 파라미터로 배송지 ID를 지정하여 요청할 수 있습니다. 요청 성공 시 응답 상세 정보는 REST API를 참고합니다.

파라미터

이름	타입	설명	필수
url	String	/v1/user/shipping_address 로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X
data	Object	API에 전달할 파라미터, 자세한 내용은 data: 배송지 가져오기 확인	X

data: 배송지 가져오기

이름	타입	설명	필수
address_id	Number	배송지 정보가 많은 경우, 특정 배송지 정보만 얻고 싶을 때 배송지 ID 지정	X
from_updated_at	Number	여러 페이지에 걸쳐 응답이 제공될 때, 기준이 되는 배송지 updated_at 시각 해당 시각(미포함) 이전에 수정된 배송지부터 조회 이전 페이지의 마지막 배송지의 updated_at을 다음 페이지 input으로 사용 값을 0으로 전달하면 처음부터 조회	X
page_size	Number	2 이상, 한 페이지에 포함할 배송지 개수(기본값: 10)	X

예제

Kakao.API.request({
  url: '/v1/user/shipping_address',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

예제: 특정 배송지 정보만 요청

Kakao.API.request({
  url: '/v1/user/shipping_address',
  data: {
    address_id: ${ADDRESS_ID}
  },
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

동의 내역 확인하기

기본 정보

사전 설정	카카오 로그인	레퍼런스
플랫폼 등록 카카오 로그인 활성화 동의항목	필요	request()

사용자가 동의한 동의항목의 상세 정보 목록을 조회합니다. [내 애플리케이션] > [카카오 로그인] > [동의항목]에 설정된 동의항목의 목록과 사용자가 동의한 동의항목의 상세 정보를 반환합니다. 사용자가 기존에 동의했던 동의항목이라면 현재 앱에 사용하도록 설정돼 있지 않아도 응답에 포함됩니다.

url 값을 /v2/user/scopes로 지정하여 Kakao.API.request() 함수를 호출합니다. 요청 성공 시 응답은 REST API를 참고합니다.

특정 동의항목의 동의 내역만 확인하려면 data 하위의 scopes 파라미터로 동의항목의 ID를 지정하여 요청할 수 있으며, 성공 시 응답은 지정된 동의항목의 정보만 포함합니다.

파라미터

이름	타입	설명	필수
url	String	/v2/user/scopes 로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X
data	Object	API에 전달할 파라미터, 자세한 내용은 data: 동의 내역 확인하기 확인	X

data: 동의 내역 확인하기

이름	타입	설명	필수
scopes	String[]	특정 동의항목에 대한 동의 내역만 불러오려는 경우 사용하는 동의항목의 ID 목록 동의항목 ID는 [내 애플리케이션] > [카카오 로그인] > [동의항목] 참고 (예: ['account_email','gender'])	X

예제

Kakao.API.request({
  url: '/v2/user/scopes',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

예제: 이메일, 성별 동의 내역 확인하기

Kakao.API.request({
  url: '/v2/user/scopes',
  data: {
    scopes: ['account_email','gender']
  },
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

동의 철회하기

기본 정보

사전 설정	카카오 로그인	레퍼런스
플랫폼 등록 카카오 로그인 활성화 동의항목	필요	request()

사용자가 동의한 항목에 대해 동의를 철회합니다. 동의 내역 확인하기 API를 통해 조회한 동의항목 정보 중 동의 철회 가능 여부(revocable) 값이 true인 동의항목만 철회 가능합니다. 동의 철회가 불가능한 동의항목을 대상으로 요청한 경우 에러 응답을 받습니다.

url 값을 /v2/user/revoke/scopes로 지정하고, data 하위의 scopes 값에 철회할 동의항목의 ID를 지정하여 Kakao.API.request() 함수를 호출합니다. 요청 성공 시 응답은 REST API를 참고합니다.

파라미터

이름	타입	설명	필수
url	String	/v2/user/revoke/scopes 로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X
data	Object	API에 전달할 파라미터, 자세한 내용은 data: 동의 철회하기 확인	O

data: 동의 철회하기

이름	타입	설명	필수
scopes	String[]	동의를 철회할 동의항목 ID 목록 동의 내역 확인하기 API 응답에서 동의 철회 가능 여부(revocable) 값이 true인 동의항목만 철회 가능 동의항목 ID는 [내 애플리케이션] > [카카오 로그인] > [동의항목] 참고 (예: ['account_email','gender'])	O

예제

Kakao.API.request({
  url: '/v2/user/revoke/scopes',
  data: {
    scopes: ['account_email','gender']
  },
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

서비스 약관 동의 내역 확인하기

기본 정보

사전 설정	카카오 로그인	레퍼런스
플랫폼 등록 카카오 로그인 활성화 동의항목	필요	request()

현재 로그인한 사용자가 동의한 약관 목록을 가져옵니다. url 값을 /v1/user/service/terms로 지정해 Kakao.API.request() 함수를 호출합니다. 앱에 설정된 약관 전체 목록을 함께 조회하려면 extra 파라미터의 값을 app_service_terms로 지정하여 전달합니다. 요청 성공 시 응답은 REST API를 참고합니다.

파라미터

이름	타입	설명	필수
url	String	/v1/user/service/terms 로 고정	O
success	Function(Object)	API 호출이 성공할 때 실행되는 콜백 함수	X
fail	Function(Object)	API 호출이 실패할 때 실행되는 콜백 함수	X
always	Function(Object)	API 호출 성공 여부에 관계없이 항상 호출되는 콜백 함수	X
data	Object	API에 전달할 파라미터, 자세한 내용은 data: 서비스 약관 동의 내역 확인하기 확인	O

data: 서비스 약관 동의 내역 확인하기

이름	타입	설명	필수
extra	String	추가 동작을 요청하는 파라미터 app_service_terms: 앱에 사용 설정된 서비스 약관 목록을 함께 요청	X

예제

Kakao.API.request({
  url: '/v1/user/service/terms',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

고급: 팝업 방식으로 로그인

기본 정보

사전 설정	동의항목	레퍼런스
플랫폼 등록 카카오 로그인 활성화 동의항목 Redirect URI 등록	필요: 필수 동의항목	login()

카카오 로그인 동의 화면을 팝업으로 띄우거나 클라이언트에서 모든 인증 처리를 하고 싶은 경우 Kakao.Auth.login() 함수를 사용할 수 있습니다.

함수 호출 시 팝업으로 카카오 로그인 동의 화면이 표시됩니다. 로그인 요청 결과 토큰이 발급되며, 이 토큰은 SDK 내부적으로 사용되고 있기 때문에 별도의 처리가 필요하지 않습니다.

로그인 성공 시 서비스의 로그인 및 회원 가입 처리가 필요합니다. 인증 성공 시 서비스의 로그인 처리는 success 콜백 함수를 사용해야 합니다.

파라미터

이름	타입	설명	필수
success	Function(Object)	로그인이 성공할 경우 토큰을 받을 콜백 함수	X
fail	Function(Object)	로그인이 실패할 경우 에러를 받을 콜백 함수	X
always	Function(Object)	로그인 성공 여부에 관계없이 항상 호출되는 함수	X
scope	String	추가 항목 동의 받기 요청 시 사용 추가 동의 받을 동의항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달 동의항목 ID는 [내 애플리케이션] > [카카오 로그인] > [동의항목] 참고 (예: 'account_email,gender') 주의: OpenID Connect를 사용하는 앱의 경우, scope 파라미터 값에 openid를 반드시 포함해야 함, 미포함 시 ID 토큰이 재발급되지 않음	X
nonce	String	OpenID Connect를 통해 ID 토큰을 함께 발급받을 경우, ID 토큰 재생 공격을 방지하기 위해 사용 ID 토큰 유효성 검증 시 대조할 임의의 문자열(정해진 형식 없음)	X
persistAccessToken	Boolean	세션이 종료된 뒤에도 액세스 토큰을 사용할 수 있도록 로컬 스토리지에 저장합니다. (기본값: true)	X
throughTalk	Boolean	간편로그인 사용 여부 (기본값: true)	X

* refresh_token, refresh_token_expires_in: Deprecated, 보안 강화를 위해 리프레시 토큰을 취급하지 않도록 변경, 공지 참고

예제

Kakao.Auth.login({
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  },
});

다음은 로그인 버튼에 이벤트 핸들러를 등록해주는 함수에 대한 예제입니다. createLoginButton을 사용합니다.

예제: createLoginButton

Kakao.Auth.createLoginButton({
  container: '${CONTAINER_ID}',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  },
});

예제: 팝업 방식으로 로그인 시 추가 항목 동의 받기

Kakao.Auth.login({
  scope: 'account_email,gender',
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  }
});

더 보기

Legacy JavaScript SDK 다운로드Legacy JavaScript SDK 레퍼런스outlink