[FlutterFlow/Firebase] 소셜 로그인 적용하기

 

✔️ 플러터플로우에 평소에 편리하게 이용하는 소셜로그인을 만들어보려 한다.

 

회원가입/ 로그인 페이지에 구글 로그인과 애플 로그인 버튼을 생성해준다.

 

 

Google Login

1) 클라이언트

Google Login 버튼 액션을 아래처럼 Login / Google 으로 선택해준 뒤, 계정을 만든 후 화면 이동 액션도 플로우에 추가해준다.

 

 

2) 파이어베이스 설정

추가로 서버에서 세팅해줘야하는 설정들이 있다.

 

• Authentication 로그인 제공 업체에 Google 을 추가

 

 

• firebase → Enable Auth On Firebase → 프로젝트 설정 → 안드로이드 앱 SHA 인증서 지문에 SHA1 추가

터미널에 다음 명령어를 입력하고, SHA1를 복사한다.(맥 기준) 

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

 

• 도메인 추가

승인된 도메인에 현재 실행시 도메인을 추가한다.

 

여기까지 파이어베이스의 전반적인 설정이 끝났다.

 

• 플러터플로우 → Settings → Regenerate Config Files

다시 플러터플로우로 이동해서 Regenerate Config Files 버튼을 눌러서 Config Files를 새롭게 생성해준다.

 

위의 과정을 설정해준 후 런모드로 실행해서 테스트를 시도하면 정상적으로 구글 로그인이 되는 것을 확인할 수 있다.(테스트 모드는 소셜 로그인 불가)

구글 로그인의 장점은 구글에서 사용하는 프로필 이미지와 이름이 제공된다는 점이다.

 

 

• 공식 문서

https://docs.flutterflow.io/integrations/authentication/firebase/google-oauth-login/

Google OAuth Login | FlutterFlow Documentation

 

 

Apple Login

구글 로그인을 설정했으니 애플 로그인도 이어서 만들어보자. 애플 로그인은 구글 로그인보다 아주 조금 까다롭다.

 

앱 스토어에 소셜 로그인을 넣는 순간, 애플로그인은 반드시 같이 넣어야 한다. 즉, 구글 로그인을 제공하면 필수로 애플 로그인을 제공해야 한다.

⚠️ 애플 로그인을 만들기 위해서는 애플 개발자 등록, 플러터 플로우 코드를 다운 받을 수 있는 유료 버전이 필요하다.

나는 개발자 등록이 안 되어있어서 애플 로그인을 등록하는 과정만 학습했다.

 

1) FlutterFlow & Firebase

• 위와 마찬가지로 애플로그인 버튼에 액션 플로우를 추가

 

 

• Authentication 로그인 제공 업체에 Apple 을 추가

 

 

이 이후로는 애플 웹사이트로 이동해서 설정해줘야 한다.

2) Apple Developer 로 이동해 수정

이메일 소스 등록

• Firebase → Authentication → Templates에 가서 발신 주소 복사
• 애플 개발자 웹사이트 → Sign in with Apple for Email Communication에서 Configure → Email Sources 추가 

Identifier(식별자)

• 이전에 만든 identifier에 애플 로그인 권한 주기
• 같은 페이지 Identifier → 이전에 만든 Identifier 선택 → Capabilitiy에 Sign in with Apple을 체크 후, 저장

 

3) Xcode 설정

1. 플러더플로우에서 소스코드를 다운로드

2. 이때 xcode가 맥에 설치되어 있어야 한다.
3. iOS 폴더 내의 Runner눌러 Xcode를 열기

4. Runner의 Signing & Capabilities 탭 선택 → Team에 자기 자신 선택

5. “automatically manage signing” 체크박스 표시를 확인

 

• 공식 문서

https://docs.flutterflow.io/integrations/authentication/firebase/apple/

Apple Login | FlutterFlow Documentation