버블과 구글 로그인 연동으로 스마트한 기능 구현
오늘은 버블(Bubble.io)에서 구글 회원가입/로그인 연동 기능을 구현해보겠습니다.
구글 회원가입/로그인 연동은 사용자 경험을 크게 향상시키는 핵심 기능입니다. 사용자는 별도의 계정 생성 없이 기존에 사용하는 구글 계정을 통해 간편하게 서비스에 접근할 수 있으며, 개발자는 이 과정을 통해 사용자 정보를 안전하게 관리할 수 있습니다. 특히, 구글 OAuth 2.0을 활용하면 보안성이 강화되고, 사용자 인증 과정에서의 복잡한 작업을 최소화할 수 있어 노코드 플랫폼인 버블(Bubble)에서 더욱 효율적으로 활용할 수 있습니다.
그럼 이제 구글 회원가입/로그인 연동을 구현하는 방법을 단계별로 알아보겠습니다.
1. 버블(Bubble)에서 구글 회원가입/로그인 연동 시작하기
구글 회원가입/로그인은 버블에서 플러그인으로 제공하는데요.
워크플로우 상에서 Signup/login with a social network 를 클릭하면 구글 이외에도 다른 여러 SNS 회원가입/로그인 기능을 사용하실 수 있습니다.
2. Google OAuth 2.0 플러그인 설치
저희는 ‘Google OAuth 2.0 with Profile Info’ 플러그인을 설치해서 이용해보겠습니다.
처음 설치하시면 API key를 입력할 수 있습니다.
해당 부분을 클릭하면, 필수 입력값인 두개의 정보(API Key, App Secret)가 비어있습니다.
API Key 와 App Secret은 아래 순서를 따라 구글 사용자 인증 정보를 만드시면 발급받을 수 있습니다.
3. Google API 콘솔 접속 및 프로젝트 생성
API Key 와 App Secret 값을 발급받아 볼까요?
먼저 Google API 콘솔에 접속합니다.
처음에는 프로젝트가 없으므로 ‘프로젝트 만들기’ 버튼을 클릭해 프로젝트를 생성합니다.
프로젝트 이름은 아무렇게나 설정해줍니다. 조직 설정은 생략하고 ‘만들기’ 버튼을 클릭해줍니다.
4. OAuth 동의 화면 설정
다음은 ‘OAuth 동의 화면’ 탭에 들어가서 User Type을 ‘외부’로 설정해주고 ‘만들기’를 클릭합니다.
목적에 따라 내부/외부를 설정하면 됩니다. 외부 유저들이 사용할 앱이라면 ‘외부’를 선택하고, 조직내 구성원만 사용할 목적이라면 ‘내부’를 선택합니다. 참고로 외부를 선택했다면, 앱 배포를 위해 인증절차가 필요합니다.
지금부터는 테스트 목적으로 최소 정보만을 입력해서 설정을 완료합니다.
실제로 앱을 배포할 목적이라면, 앱 로고, 앱 도메인, 승인된 도메인 등 모든 정보를 입력하시고 심사를 요청 후 통과하셔야 합니다.
테스트 목적으로 진행할 때는 필수 정보인 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보만 입력한 후 ‘저장 후 계속’을 클릭합니다.
5. 범위 설정
‘범위 추가 또는 삭제’ 버튼을 눌러 앱에서 구글 로그인을 통해 가져올 정보를 선택합니다.
여기서는 앱에서 구글 로그인을 할 때 유저에게 가져올 정보들을 어디까지 가져올지 선택합니다.
저는 회원가입/로그인에 필요한 기본 정보들만 가져올 것이기 때문에 상위 3개만 선택하겠습니다.
범위 설정이 완료되면 ‘저장 후 계속’을 클릭합니다.
6. 테스트 사용자 등록
이 앱은 테스트 용도로 사용되므로, 테스트 사용자로 등록할 구글 이메일을 추가합니다.
여기서 테스트 하고자 하는 구글 이메일을 추가해주세요.
이제 ‘사용자 인증 정보’ 탭에서 ‘+ 사용자 인증 정보 만들기’ 버튼을 눌러 ‘OAuth 클라이언트 ID’를 클릭해주세요.
연결하려는 앱 유형에 맞게 애플리케이션 유형을 선택한 후 이름을 지정하고, ‘만들기’ 버튼을 누릅니다.
드디어 API Key 값과 App Secret 값 생성이 완성되었습니다!
‘클라이언트 ID’ 칸에 API Key 값을, ‘클라이언트 보안 비밀번호’ 칸에 App Secret 값을 입력해주면 됩니다.
이 과정을 완료하면 구글 회원가입/로그인 연동이 가능해집니다.
버블과 구글 회원가입/로그인 연동을 통해 사용자는 번거로운 절차 없이 간편하게 서비스에 접근할 수 있으며, 개발자는 보다 안전하고 효율적으로 사용자 인증을 관리할 수 있습니다. 또한, 구글 OAuth 2.0을 활용하면 사용자 데이터를 기반으로 맞춤형 서비스를 제공하거나, 구글 API를 연계해 더욱 유용한 기능을 구현할 수 있습니다.
버블과 구글 회원가입/로그인을 성공적으로 연동하여 더욱 편리하고 효율적인 앱 개발을 이루시길 바랍니다!
![[2025 최신] 버블에서 리피팅 그룹 각 셀마다 워크플로우를 실행하고 싶을 때 : 플러그인 오케스트라(Orchestra)](/_next/image?url=https%3A%2F%2Fuosmtaxndlzgvsnhbugi.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fmedia%2F12-1.jpg&w=3840&q=75)