중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
1. 외부 서비스 연동하기
a. 서비스 회원가입 방식
서비스 회원가입 로직은 크게 2가지가 있습니다.
1.
자체 이메일로 회원가입하기
2.
소셜 로그인으로 회원가입하기
카카오톡 로그인, 구글 회원가입 등이 대표적인 소셜 로그인 방식입니다. 소셜 로그인, 이른바 간편 로그인을 활용하면 소셜 네트워킹 사이트의 계정을 활용해 접속한 서비스에서 회원가입을 진행할 수 있습니다. 카카오 간편 로그인으로 서비스를 시작하면, 해당 서비스의 계정은 자신의 카카오 계정이 됩니다.
간편 로그인을 사용하면, 유저는 자신이 평소 사용하는 소셜 계정을 활용해 쉽게 서비스 회원가입을 완료할 수 있습니다. 또한, 외부 소셜 서비스에 대한 접근 권한도 가지고 있습니다. 해당 권한을 활용해 버블에서 외부 소셜 서비스와 관련한 기능을 구현할 수 있습니다.
b. 간편 로그인과 외부 계정 연동을 구분합시다
당연히 버블에서도 다양한 간편 로그인을 구현할 수 있습니다. 이번 글에는 아래 내용을 다룰 겁니다.
1.
간편 로그인
a.
간편 로그인을 구현하는 방법
b.
간편 로그인의 작동 원리
2.
외부 계정 연동
a.
이미 가입한 계정에 카카오, 디스코드 등 외부 계정을 연동하는 방법
b.
계정에 연동한 외부 계정 데이터를 확인하는 방법
c.
간편 로그인 시, 유저 테이블에서 이메일이 처리되는 방식
이때, “간편 로그인”과 “외부 계정 연동”을 개념적으로 구분해서 이해하는 게 좋습니다. 여기서 “개념적”이란 표현을 사용했는데, 버블에서 설정 방식은 동일하기 때문입니다. 다만, 작동 원리가 조금 다르기 때문입니다. 이 둘을 왜 구분해야 하는지 예시로 설명드리겠습니다. 구글의 특정 서비스와 연결해서 사용하는 서비스를 버블로 만들었다고 합시다. 당연히 서비스에서 회원가입을 한 유저는 자신의 계정에 구글 계정을 연동해야 합니다.
여기서 “간편 로그인”의 케이스를 봅시다. 유저가 회원가입을 할 때, 구글 로그인을 사용하면 어떻게 될까요? 당연히 회원가입을 끝내자마자 버블 서비스와 구글 서비스가 연결 됩니다. 왜냐하면, 구글 계정으로 둘 다 사용하기 때문입니다. 쉽게 말해, “로그인 계정”과 “연결할 구글 계정”이 동일한 상황입니다.
근데 유저가 자체 이메일로 회원가입을 한 경우는 어떻게 해야 할까요? 로그인한 이메일은 구글 계정이 아니며, 별도로 구글 계정을 연결해야 합니다. 즉, 이 경우는 “외부 계정 연동” 케이스이며, “로그인 계정”과 “구글 계정”이 서로 다른 상황입니다.
자 좀 더 딥하게 들어가보겠습니다. 만약 버블로 만든 서비스에 연동해야 하는 외부 계정이 여러 개라면 어떨까요? 자체 이메일로 가입한 계정에 구글, 카카오, 페이스북 계정을 추가로 연동해야 한다면? 혹은, 카카오 간편 로그인으로 가입한 계정에 구글, 페이스북 계정을 추가로 연동해야 한다면?
이처럼 “간편 로그인”과 “외부 계정 연동”은 비슷하지만, 조금 다릅니다. 요약하면, 아래처럼 구분해서 접근하시면 됩니다.
•
간편 로그인 : 유저가 로그인하는 계정 = 연동할 외부 계정
•
외부 계정 연동 : 유저가 로그인하는 계정 ≠ 연동할 외부 계정
벌써부터 머리가 아프시다고요? 당연한 겁니다. 저도 디스코드 계정을 버블에 연동해야 하는데, 궁금해져서 뜯어보고 이해를 했습니다. 버블 4년차도 아직 버블이 너무 어려워 버블박스와 함께 하나하나 뜯어봅시다!
저도 매번 새롭게 배우네요 <출처 : 독수리 오형제>
2. 간편 로그인 뜯어보기
a. 플러그인으로 간편 로그인 구현하기
마켓플레이스에서 간편 로그인 플러그인을 찾아서 버블에 기능을 구현할 수 있습니다. 구글, 페이스북, 디스코드 등 해외 서비스의 간편 로그인 플러그인은 다수 존재합니다.
국내 유저가 주로 사용하는 카카오와 네이버 간편 로그인 플러그인도 존재합니다.
간편 로그인 플러그인을 다운 받으면, 워크플로우에서 [Signup/login with a social network] 액션을 추가해 사용하면 됩니다.
b. API로 간편 로그인 구현하기
혹은 직접 API를 활용해 간편 로그인을 구현할 수 있습니다. [API Connetor] 플러그인을 다운 받고, [OAuth2 User-Agent Flow]를 선택해 사용하시면 됩니다.
자세한 설정 방법은 히치하이커님이 작성한 아래 글을 참고하시면 됩니다. 각 필드에 어떤 값을 입력해야 하는지 등을 상세히 정리해주셨습니다
c. 간편 로그인 작동 원리 (OAuth)
그렇다면, 간편 로그인은 도대체 어떤 구조로 작동하는 걸까요? 이를 위해 OAuth를 이해하셔야 합니다. OAuth는 특정 서비스의 리소스에 접근하기 위해 유저 인증을 통해 유저의 리소스 접근 권한을 위임받는 것을 뜻합니다.
유저가 버블로 만든 서비스에서 카카오 간편 로그인을 통해 회원가입을 한다고 합시다. 버블은 카카오에게 해당 유저의 이메일, 닉네임 등의 정보를 받아와야 합니다. 유저는 버블에게 권한을 위임하고, 해당 정보를 받아오도록 합니다.
버블은 유저에게 위임 받은 권한을 사용해 정보를 받아오고, 이를 User 테이블에 저장해 회원가입을 완료합니다.
User 테이블에서 확인해보면, 카카오 간편 로그인으로 회원가입한 유저의 이메일은 “카카오 이메일”이 저장됩니다.
3. 외부 계정 연동 뜯어보기
a. 기존 계정에 외부 계정을 추가로 연동하기
처음에도 말했듯, 간편 로그인과 외부 계정 연동은 개념적으로 구분해서 이해하는 게 좋습니다.
•
간편 로그인 : 유저가 로그인하는 계정 = 연동할 외부 계정
•
외부 계정 연동 : 유저가 로그인하는 계정 ≠ 연동할 외부 계정
버블에서 자체 이메일로 회원가입을 완료한 상태에서 카카오, 디스 코드 등 외부 계정을 어떻게 연동할 수 있을까요? 사실 설정 방법은 간편 로그인과 동일합니다. 그냥 [Signup/log with a social network] 액션을 추가해 사용하시면 됩니다.
해당 액션이 완료되면, 현재 로그인 된 계정에서 외부 계정이 연동됩니다.
이게 끝이라고…?
b. 연동 계정 데이터가 DB에서 안 보여요!
버블에서 회원가입 액션을 실행하면, 유저 테이블에 유저 레코드(=행)가 새롭게 생성됩니다. 앞서 로그인한 계정에 외부 계정을 연동하기 위해 [Signup/log with a social network] 액션을 사용했습니다. 그러면, 새로운 레코드가 생성되는 걸까요? User 테이블을 보면, 새롭게 추가된 레코드는 없습니다.
그렇다면, 현재 로그인한 유저 데이터에 연동 계정에 대한 정보가 저장됐을 거란 킹리적 갓심을 가질 수 있습니다. 하지만 DB에서 데이터를 확인해봐도 연동 계정에 대한 데이터가 보이지 않습니다. 아래 이미지를 보면, 회원가입에 사용한 이메일만 보일 뿐입니다.
도대체 연동한 계정 정보는 어디로 사라진걸까요? 마술이라도 쓴 걸까요?
c. 사실, 연동 계정 데이터는 모두 확인할 수 있습니다.
해당 데이터는 버블 에디터에서만 보이지 않을 뿐, 실제로 해당 유저 데이터에 저장된 상태입니다. 버블은 유저가 로그인에 사용하는 이메일만 에디터에서 보여주고, 연동 계정 이메일은 딱히 보여주지 않습니다. 유저의 연동 계정 데이터까지 모두 확인하고 싶다면, 데이터 API를 사용하면 됩니다. 데이터 API는 “버블 데이터베이스를 접근하는 API”입니다. 이를 활용해 버블 DB에 저장된 데이터를 확인할 수 있습니다. 상세한 개념은 다른 게시글을 참고해주세요
데이터 API를 통해 유저 데이터를 확인해보면 아래와 같이 나옵니다. 빨간 색 박스를 보면, authentication이란 필드 안에 email과 Discordapp 필드가 있는 걸 볼 수 있습니다. 여기서 email 필드는 버블에서 자체 회원가입 정보이고, Discordapp 필드는 디스코드에서 연동한 계정 정보입니다.
이처럼 해당 유저와 관련된 계정 정보는 모두 authentication 필드에 저장됩니다. 만약 카카오, 페이스북, 디스코드 등 다양한 계정과 연동을 했다면, authentication 필드에 관련 정보가 계속 추가가 됩니다.
#형식
"authentication": {
"email": {
"email": "dlaudtjddlek@gmail.com",
"email_confirmed": true
},
"외부 연동 서비스": {
"id": "연동한 계정의 id",
"email": "연동한 계정의 id",
"access_token": "연동한 계정의 접근 토큰"
}
}
#예시 (디스코드, 카카오, 페이스북 연동 계정)
"authentication": {
"email": {
"email": "dlaudtjddlek@gmail.com",
"email_confirmed": true
},
"discordApp": {
"id": "디스코드 계정 id",
"email": "디스코드 계정의 id",
"access_token": "디스코드 계정의 접근 토큰"
},
"kakao": {
"id": "카카오 계정의 id",
"email": "카카오 계정의 id",
"access_token": "카카오 계정의 접근 토큰"
},
"facebook": {
"id": "페이스북 계정의 id",
"email": "페이스북 계정의 id",
"access_token": "페이스북 계정의 접근 토큰"
}
}
JSON
복사
d. 연동된 계정이 많을 때, 이메일 필드에 저장되는 값은?
참고로, 에디터에서 볼 수 있는 Email 값은 유저가 회원가입을 할 때, 등록한 이메일입니다. 해당 유저가 아무리 많은 계정을 연동헀을지라도 Email 필드에는 회원가입에 사용한 이메일이 저장됩니다.
만약 유저가 회원가입 시, 간편 로그인을 진행했다면 Email에는 간편 로그인 계정이 저장됩니다. 예를 들어, 유저의 카카오 계정 이메일이 “famelee@kakao.com”이라면, 카카오 간편 로그인 시에 Email 필드에는 “famelee@kakao.com”이 저장됩니다.
반대로 유저가 “dlaudtjddlek@google.com”이라는 자체 이메일로 가입을 했고, 이후에 카카오, 페이스북, 디스코드 계정을 연동했다고 합시다. 그래도 Email 필드에는 가입한 이메일인 “dlaudtjddlek@google.com”이 저장됩니다.
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
