[bubble.io]노코드 툴 버블 소셜로그인

bubble.io 노코드툴 버블 쉽게 시작하기 두번째 - 카카오로그인

 

---

 

 

 

소셜로그인, 회원가입의 불편함을 최소한으로 하면서 고객의 온보딩을 빠르게 한다는 점에서 웹서비스에서 없어서는 안되는 기능으로 빠르게 적용되었다. 복잡해 보이는 api를 다루고 난다면 당신도 어느 순간 버블에 자신있는 사람이 되어있지 않을까?

 

 

 

강의 목차

 

1. 소셜로그인 이란
2. 버블에서 카카오 로그인 시작하기
   • 들어가기 앞서
     • 카카오와 완만한 협의 바랍니다.
       • 카카오 디벨로퍼스에서 APP 설정하기
       • 카카오 비지니스 채널 설정
   • API 플러그인 설정하기
   • UI 만들기
   • 워크플로우 설정
   • 테스트
3. 이어서

 

 

 

소셜 로그인이란?

 

 

 

 

나무위키에서 가져온 개요를 보면, 제 3의 서비스 계정을 통해 내 서비스의 새로운 유저를 형성하거나 그 계정에 접속하는 것을 말한다.

 

 

 

카카오에서 설명하는 카카오 로그인은 아래와 같다.

 

카카오는 소셜로그인인 카카오 로그인, 카카오 서비스 간편가입으로 확장한 카카오 싱크

 

두가지를 구분하여 제공하고있다.

 

 

 

 

카카오 로그인

 

• 카카오 톡 또는 카카오 계정으로 간편한 사용자 로그인

 

• 사용자 로그인 시 서비스의 카카오톡 채널 추가 유도

 

• 사용자 고유 식별자 및 인증 정보, 기본적인 사용자 정보인 프로필과 이메일 데이터 제공

 

 

 

카카오 싱크 (카카오 로그인에 추가적으로)

 

• 이름, 연령대, 생년월일, 전화번호, 성별, 배송지 등 서비스 가입에 필요한 다양한 사용자 정보 제공

 

• 카카오 로그인 시 이용약관 동의를 통해 한 번의 동의 절차 만으로 가입

 

• 채널톡, 알림톡 등 연동된 카카오 비즈니스채널을 통한 알림

 

 

 

일반적으로 사업자가 없는 초기 팀은 비즈니스 인증이 필요한 카카오 비즈니스 채널과 그에 연동된 카카오 싱크는 이용할 수 없다.

 

이 강의는 '카카오 로그인'을 중심으로 설명한다.

 

 

 

 

 

버블에서 카카오 로그인 시작하기

 

 

 

 

 

들어가기 앞서 필요한 것

 

• 버블 유료결제

 

버블에서 카카오 로그인을 사용하기 위해서는 API를 사용하기 위한 플러그인인 "API connacter"가 필요하다. 버블에서 플러그인을 사용하기 위해서는 유료 플랜 가입이 필요하니 가장 첫번째 난관은 버블의 유료 결제이다.

 

• 카카오 디벨로퍼스 가입

 

https://developers.kakao.com/

 

카카오 API KEY를 받기 위해 카카오 디벨로퍼스에 가입하는 과정이 필요하다.

 

• 카카오 비즈니스 가입 - 비즈니스 채널 인증

 

https://business.kakao.com/

 

카카오 싱크 서비스를 하기위해선 카카오에 비즈니스를 인증 받는 과정이 필요하다. 여기서는 카카오 비즈니스 인증은 다루지 않을 예정이다. (추후 요청이 있다면 다루겠다.)

 

 

 

모쪼록 카카오와 원만한 협의 바랍니다.

 

 

 

카카오 로그인의 첫걸음, 카카오 Oauth 받기

 

 

 

1. 카카오 디벨로퍼스 APP 설정하기

 

내 애플리케이션 메뉴 - 애플리케이션 추가

 

카카오에 나의 소중한 웹페이지를 소개하는 과정이다. 첫만남이 중요하다. 당신이 해적 웹사이트를 운영하는 것이 아니라는것을 잘 증명할 기회다.

 

 

사업자명에 "사업자명 없음"을 입력했다. 앱아이콘은 꼭 입력하길 바란다.

 

 

 

 

 

 

앱설정-요약정보

 

완료하면 앱키를 부여 받을 수 있다.

 

 

 

 

내 애플리케이션-앱설정-플랫폼

 

플랫폼메뉴에 들어가서 우리의 웹서비스를 보여주자.

 

 

(거의 다 왔어요.)

 

버블 도메인이던 구매한 도메인이던 연결된 도메인을

 

www 없이, https://를 포함하여 입력합시다.

 

 

 

 

내 애플리케이션-제품설정-카카오 로그인

 

카카오 로그인 활성화 on

 

 

이후 오픈아이디 커넥트도 활성화 합시다.

 

 

 

 

내 애플리케이션-제품설정-카카오 로그인-동의항목

 

마지막입니다. 카카오로그인 시 유저에게 동의받을 개인정보 항목을 설정합니다.

 

 

 

동의항목을 선택하고

 

동의단계, 동의 목적을 입력하고 저장합니다.

 

 

카카오 디벨로퍼스에서 설정해야하는 부분은 완료되었다.

 

 

 

 

 

2. 카카오 비즈니스 설정

 

카카오 싱크를 위한 카카오 비즈니스 채널 설정 및 연동은 다음 기회에 설명하겠다.

 

앞서 언급했듯 비즈니스 채널은 별도의 사업자등록증이 필요한 구조이다. (유명인도 가능하다고하는데..)

 

 

 

 

 

 

BUBBLE API 설정하기

 

버블에서 API를 사용하기 위해서는

 

• 버블 유료플랜

 

• 버블 API Connector 플러그인

 

두가지가 필요하다.

 

 

 

 

 

 

API Connector 플러그인 설치 후 플러그인을 살펴보면

 

"Add another API" 버튼으로 새로운 api를 설정하자.

 

 

'expand'를 눌러 새로운 API를 살펴보자

 

버블 API Connect에서는 세가지 작업이 이뤄진다.

 

1. API 권한 설정하기
2. API 요청설정하기
3. 요청응답을 확인하기

 

 

 

API 권한 설정하기

 

첫번째로 API 이름은 Kakao Oauth로 설정하고

 

Authentication 방식은 "OAuth2 User-Agent Flow"로 설정하면 아래와 같이 입력하는 창이 나온다.

 

 

 

• App ID는 '카카오 디벨로퍼스'에서 부여해준 앱키 중 REST API 앱키를 입력하고

 

• App Secret은 추가 보안용 키인데 따로 설정하지 않았다면 공백으로 남겨도 된다.

 

• Authentication goes in the header에 체크하고

 

• Use generic redirect URL 에 체크한후 해당 URL을 복사하여 <카카오 디벨로퍼스> 제품설정-카카오로그인-REDIRECT URI 에 등록한다.
• Login dialog redirect : "https://kauth.kakao.com/oauth/aythorize"
• Access token endpoint : "https://kauth.kakao.com/oauth/token"
• User profile endpoint : "https://kapi.kakao.com/v2/user/me"
• User ID key path : "id"
• User email key path : "kakao_account.email"

 

1차적인 카카오 로그인 Oauth 작업은 끝났다.

 

 

카카오 디벨로퍼스에서 지원하는 api 목록을 참조

 

 

 

API 요청 설정하기

 

이제 api 요청을 보낼 차례다 Add Call 버튼을 눌러 요청을 추가한다.

 

Get 요청을 카카오톡 서버에 보내고 응답으로 유저 데이터를 JSON 형식으로 받는다.

 

아래와 같이 입력한다. "https://kapi.kako.com/v2/user/me"

 

 

 

 

여기까지 완료했다면. UI와 Workflow를 설정할 차례다. 이유는

 

1. preview에서 auth가 잘 작동하는 지 확인한 후
2. api 플러그인으로 돌아와 initial call을 통해 요청에 대한 응답이 제대로 돌아오는지 확인하기 위함이다.

 

 

 

UI 만들기

 

 

 

페이지에 카카오 로그인 버튼을 만들고

 

 

 

 

참고로 카카오 디벨로퍼에서는 카카오 로그인 버튼에대한 리소스를 제공하고있다. 카카오데빌로퍼스메뉴에서 도구-리소스 다운로드 -카카오로그인을 확인하자

 

 

 

 

워크플로우 만들기

 

ui 버튼이 정리되었다면 본격적으로 워크플로우를 작업하자

 

 

오른쪽 클릭 후 스타트/에딧 워크플로우를 선택하면 빠르게 워크 플로우를 설정할수 있다.

 

 

카카오 버튼을 누르면 Account-Signup/login with a social network 액션을 통해

 

API - kakao Oauth 를 실행하자

 

 

이후 API call에 대한 응답을 카카오톡 로그인한 유저의 정보에 저장하는 작업이 필요하다.

 

Make changes to current user 액션을 선택하고

 

 

 

 

User type에 추가할 Field를 선택하고 "Get data from an external API"를 통해 API 응답을 원하는 자료로 넣으면 완료! 지만 아직 API 응답 탬플릿이 없어 설정이 불가능 하다.

 

 

 

API응답 템플릿 받기

 

UI - 워크플로우 까지 설정이 완료 되었다면

 

PREVIEW를 통해 카카오톡 로그인 버튼을 클릭-로그인을 완료하고 첫 API 승인을 받는다.

 

첫승인 완료 메시지

 

이후 플러그인 으로 돌아가자! 플러그인의 마지막 단계 '3.API 응답 확인 '을 통해 API 응답 탬플릿을 만들면 끝!

 

 

 

API 요청 (get-user-info)를 클릭하고 "initialize call"버튼을 눌러 카카오톡 서버로 부터 유저 정보에대한 JSON응답이 오는 것을 확인하자. 모든 것이 정상이라면 아래와 같은 탬플릿이 생성된다. 자료형에 대한 설정을 완료한 후 워크플로우로 돌아가자!

 

 

 

 

Make change current user 액션으로 돌아와 API 응답으로 받은 데이터를 저장하자!

 

 

 

 

TEST

 

이후 DATA USER 에서 이전 계정을 삭제하고 Preview로 정상적으로 작동하는지 확인하면

 

정말 모든작업이 완료되었다.

 

 

 

이어서

 

이번 게시물에서는 버블로 소셜로그인을 하는 법에 대해 알아보았다. API를 설정하는 방법, 돌아온 응답을 활용하는 방법을 배워두면 이후 다양한 응용이 가능할 것이다.

 

카카오톡 메시지를 보내기 위한 "카카오 싱크"를 위해서 이 게시글에 들어온 사람이라면 댓글이나 Contract를 통해 문의하면 추가적으로 안내할수 있도록하고, 이후 게시글로 다시 찾아오겠다 긴 글 읽어 주셔서 감사합니다:)

 

 

 

구글/페이스북로그인은?

 

구글로그인 혹은 페이스북로그인도 같은 방식으로 API를 연결해서 진행할 수 있다.

 

구글, 페이스북은 플러그인도 있어 굉장히 빠르게 빌딩할 수 있다