> For the complete documentation index, see [llms.txt](https://docs.apidrag.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apidrag.com/kakao-api/references/kakao-login/login.md).

# 로그인

## 아이템 블록

카카오톡 로그인 아이템 블록은 카카오톡 로그인 서비스를 제공하기 위한 Gateway 역할을 합니다.

<figure><img src="/files/aIsILRvg1LaGBBvlUurk" alt=""><figcaption></figcaption></figure>

## 설정 팝업

<figure><img src="/files/gbnzFS9zPBhNz8QoxLz6" alt=""><figcaption></figcaption></figure>

## 설정 필드

### 앱 REST API 키

Kakao Developers 사이트에서 앱을 등록하고 발급받을 수 있습니다.&#x20;

내 애플리케이션 > 앱 설정 > 요약정보 경로에서 확인하세요.

### Redirect URI

인가 코드를 전달받을 서비스 서버의 URI 입니다. 이 항목은 Kakao Developers 사이트에서 미리 Redirect URI 항목에 등록되어 있어야합니다. API Drag 서비스를 통해 Redirect 이후 서비스를 구현하고자 한다면, API Drag 의 Http In 아이템 블록에서 제공하는 서브도메인을 활용하면 됩니다.

\[내 애플리케이션] > \[카카오 로그인] > \[Redirect URI]에서 등록합니다.

<figure><img src="/files/bLIkUe3eJ3d4hqkXzuQI" alt=""><figcaption></figcaption></figure>

### 추가항목 동의목록

<mark style="color:blue;">추가 항목 동의 받기</mark> 요청 시 사용합니다.\
사용자에게 동의 요청할 동의 항목 ID 목록입니다.\
동의 항목의 ID는 <mark style="color:blue;">사용자 정보</mark> 또는 \[내 애플리케이션] > \[카카오 로그인] > \[동의 항목]에서 확인 가능\
쉼표(,)로 구분해 여러 개 전달 가능합니다.\
\
**주의**: OpenID Connect를 사용하는 앱의 경우, `scope` 파라미터 값에 `openid`를 반드시 포함해야 합니다. 미포함 시 ID 토큰이 재발급되지 않습니다.

### 로그인 화면 종류

* 로그인 화면

존 사용자 인증 여부와 상관없이 사용자에게 카카오계정 로그인 화면을 출력하여 다시 사용자 인증을 수행하고자 할 때 사용합니다.&#x20;

카카오톡 인앱 브라우저에서는 이 기능이 제공되지 않습니다.

* 카카오 신규가입 화면

사용자에게 카카오계정 신규 가입 후 로그인하도록 하기 위해 사용합니다.&#x20;

<mark style="color:blue;">카카오계정 가입 페이지</mark>로 이동 후, 카카오계정 가입 완료 후 동의 화면 출력합니다.

* 화면 보이지 않기

사용자에게 동의 화면과 같은 대화형 UI를 노출하지 않고 인가 코드 발급을 요청할 때 사용합니다.

인가 코드 발급을 위해 사용자의 동작이 필요한 경우 에러 응답 전달합니다.

### 서비스 약관

<mark style="color:blue;">약관 선택해 동의 받기</mark> 요청 시 사용합니다.

동의받을 약관 태그 목록이며, 약관 태그는 \[내 애플리케이션] > \[간편가입]에서 확인 가능합니다.

쉼표(,)로 구분된 문자열 값 목록으로 전달합니다.

### 전달 파라미터

카카오 로그인 과정 중 동일한 값을 유지하는 임의의 문자열(정해진 형식 없음)입니다.

<mark style="color:blue;">Cross-Site Request Forgery(CSRF)</mark> 공격으로부터 카카오 로그인 요청을 보호하기 위해 사용하며, \
각 사용자의 로그인 요청에 대한 `state` 값은 고유해야 합니다.

인가 코드 요청, 인가 코드 응답, 토큰 발급 요청의 `state` 값 일치 여부로 요청 및 응답 유효성 확인이 가능합니다.

로그인 과정의 처음에서 마지막 단계까지 전달 할 데이터가 있으면 활용이 가능합니다.

### ID 토큰 검증 문자열

<mark style="color:blue;">OpenID Connect</mark>를 통해 ID 토큰을 함께 발급받을 경우, <mark style="color:blue;">ID 토큰 재생</mark> 공격을 방지하기 위해 사용\ <mark style="color:blue;">ID 토큰 유효성 검증 시</mark> 대조할 임의의 문자열(정해진 형식 없음)

## 로그인 프로젝트 구성

OAuth 로그인 과정은 복잡합니다. 아래 예제를 보고 그 흐름을 이해해 보세요.

> 1. Http In 아이템 블록을 이용하여 웹 호출에 대한 Listen 상태를 만들어야 합니다. 사용자가 브라우져나 프로그램을 통해서 접근 할 주소를 적절히 <mark style="color:blue;">Http In 아이템 블록</mark>의 설정에 등록하면 됩니다. 그리고 <mark style="color:blue;">로그인 아이템 블록</mark> 설정은 위 설정 필드 챕터를 참고하여 설정하시면 됩니다.

<div><figure><img src="/files/PcLEPUQDWkiDqfB1YXXH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6doVI9t74lMUD9c62N0i" alt=""><figcaption></figcaption></figure></div>

> 2. 사용자가 브라우져나 프로그램을 통해 위 주소로 접근하면 아래와 같이 Kakao 로그인 화면이 나옵니다.

<figure><img src="/files/jiXOnfF6ssFzrUTvHEO5" alt=""><figcaption></figcaption></figure>

> 3. 위 로그인화면에서 ID / PW 를 입력하면 아래 미리 등록한 Redirect URI 주소로 [토큰 받기](https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token) 요청에 필요한 인가 코드가 <mark style="color:blue;">code</mark> 파라미터를 통해 전달됩니다.

<figure><img src="/files/bLIkUe3eJ3d4hqkXzuQI" alt=""><figcaption></figcaption></figure>

> 4. 처음 생성한 Project 와 별도로 새로운 Project 를 만들고 Redirect URI 호출에 대비하여 Http In 아이템 블록을 이용하여 아래와 같이 구성을 해야 합니다.

<figure><img src="/files/QgG4cbEDAPffU8WlTDwt" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/O8fak7wgdGDfb1qMcTzA" alt=""><figcaption></figcaption></figure>

> 5. Http Response 의 응답은 아래와 같이 정상 응답으로 설정하시면 됩니다.

<figure><img src="/files/v388x90kf3zktfTb1hgH" alt=""><figcaption></figcaption></figure>