로그인

아이템 블록

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

설정 팝업

설정 필드

앱 REST API 키

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

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

Redirect URI

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

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

추가항목 동의목록

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

로그인 화면 종류

  • 로그인 화면

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

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

  • 카카오 신규가입 화면

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

카카오계정 가입 페이지로 이동 후, 카카오계정 가입 완료 후 동의 화면 출력합니다.

  • 화면 보이지 않기

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

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

서비스 약관

약관 선택해 동의 받기 요청 시 사용합니다.

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

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

전달 파라미터

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

Cross-Site Request Forgery(CSRF) 공격으로부터 카카오 로그인 요청을 보호하기 위해 사용하며, 각 사용자의 로그인 요청에 대한 state 값은 고유해야 합니다.

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

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

ID 토큰 검증 문자열

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

로그인 프로젝트 구성

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

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

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

  1. 위 로그인화면에서 ID / PW 를 입력하면 아래 미리 등록한 Redirect URI 주소로 토큰 받기 요청에 필요한 인가 코드가 code 파라미터를 통해 전달됩니다.

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

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

Last updated