FlutterFlow 프로젝트에서 Firebase를 통해 Google 로그인(Sign In) 기능을 구현하는 방법을 단계별로 정리했습니다. 앱 사용자가 구글 계정으로 간편하게 가입 및 로그인할 수 있도록 설정해보세요.
1. 사전 준비
- FlutterFlow 프로젝트에 Firebase가 이미 연결되어 있어야 합니다.
- Firebase Authentication(인증) 기능이 설정되어 있어야 합니다.
- Java가 컴퓨터에 설치되어 있어야 합니다 (SHA-1 키 생성을 위해).
2. 단계별 설정 방법
Step 1: Firebase에 SHA-1 키 등록하기
Google 로그인이 안전하게 작동하려면 앱의 고유 지문인 SHA-1 키를 Firebase에 등록해야 합니다.
- Firebase Console 접속 > Project settings (프로젝트 설정) > General 탭으로 이동.
- 스크롤을 내려 ‘Your apps’ 섹션에서 SHA certificate fingerprints의 Add fingerprint 클릭.
- 터미널(Mac/Windows)을 열고 아래 명령어를 입력하여 SHA-1 키 생성:
keytool -list -v -keystore ~/.android/debug.keystore –alias androiddebugkey -storepass android -keypass android
- Windows: Windows용 keytool 명령어를 사용 (보통 JDK bin 폴더에서 실행).
- 출력된 SHA1 값을 복사하여 Firebase에 붙여넣고 저장.
- FlutterFlow로 돌아와 Settings > Firebase 탭에서 Regenerate Config Files 버튼을 클릭하여 설정을 업데이트합니다.
Step 2: Firebase 인증 제공업체 설정
- Firebase Console > Authentication > Sign-in method 탭으로 이동.
- Google을 선택하고 Enable(사용 설정) 스위치를 켭니다.
- Project support email을 선택하고 저장합니다.
Step 3: 테스트를 위한 도메인 승인 (Authorized Domains)
FlutterFlow의 ‘Test Mode’나 ‘Run Mode’에서 로그인을 테스트하려면, 해당 미리보기 도메인을 Firebase가 신뢰할 수 있도록 등록해야 합니다.
- 도메인 주소 알아내기:
- Firebase에 등록:
Step 4: Google Cloud Console 설정 (필수)
Firebase 설정만으로는 웹(Test Mode)에서 로그인이 완벽히 작동하지 않을 수 있으므로 Google Cloud Console에서도 도메인을 추가해야 합니다.
- Google Cloud Console 접속 및 해당 프로젝트 선택.
- APIs & Services > Credentials (사용자 인증 정보) 메뉴로 이동.
- OAuth 2.0 Client IDs 목록에서 Firebase가 생성한 Web client를 클릭하여 수정 모드로 진입.
- Authorized JavaScript origins (승인된 자바스크립트 원본):
- Authorized redirect URIs (승인된 리디렉션 URI):
3. 테스트 및 확인
- 모든 설정이 끝났으면 FlutterFlow Test Mode를 새로고침합니다.
- Google 로그인 버튼을 누르면 정상적으로 팝업이 뜨고 로그인이 진행됩니다.
- Firebase Console > Authentication > Users 탭에서 Google 아이콘과 함께 새로운 사용자가 등록된 것을 확인할 수 있습니다.
참고 유튜브
https://youtu.be/x1SLLGJ9UAE?si=3mQzDPWcBbkMvwNZ