# 로그인

## 아이템 블록

카카오톡 로그인 아이템 블록은 카카오톡 로그인 서비스를 제공하기 위한 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.apidrag.com/kakao-api/references/kakao-login/login.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.