# 로그인

## 아이템 블록

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

<figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FcLeE8uo7oCIDjCyLrzPv%2F00061.jpg?alt=media&#x26;token=62e1959a-d412-457d-83d7-d3f16fe2ca9c" alt=""><figcaption></figcaption></figure>

## 설정 팝업

<figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FOveojFW8DNSpDIFYdNpk%2F00062.jpg?alt=media&#x26;token=42971f77-ab7e-44e2-a4a8-c9ea9aeced6e" 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="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FGkXYdZSIK115qnAZpcSe%2F00066.jpg?alt=media&#x26;token=a9a4d435-4d18-438e-aade-930bcdfcfd28" 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="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FKwJl8J53CHcz1eXkCCxD%2F00063.jpg?alt=media&#x26;token=f941df78-08d5-4b46-ba76-7c76277857f3" alt=""><figcaption></figcaption></figure> <figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FBecOQXrKYq1NODKsajsH%2F00068.jpg?alt=media&#x26;token=783b2e12-2a58-4510-9e0a-8f04afb2f48f" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FBb6iLZ0HS9lyGsaT5xSh%2F00065.jpg?alt=media&#x26;token=331f60ac-8cac-4e8d-90e2-59a205a7663c" 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="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FGkXYdZSIK115qnAZpcSe%2F00066.jpg?alt=media&#x26;token=a9a4d435-4d18-438e-aade-930bcdfcfd28" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FbIjG2Qk95pvTP6dEpByo%2F00067.jpg?alt=media&#x26;token=1319180f-45e8-4bd4-aab8-325a2c3949b5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2F4epPgAzWRQJnu1epj2lW%2F00064.jpg?alt=media&#x26;token=54d7e52f-e424-4a8f-bc74-cdd57dbfbd77" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1316000475-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqYk0i8X9mEtmaB9dGSVq%2Fuploads%2FkxdCyvv87qOz5oyKXa1E%2F00069.jpg?alt=media&#x26;token=1a58ecd8-852b-48ef-a4d0-64ec3c27ed57" alt=""><figcaption></figcaption></figure>