[Flutter on Mac] 로그인 페이지 + 파이어베이스 구글 로그인 구현 과정 정리 - 23.07.02

1. 로그인 페이지를 구성하는 데 참고한 영상

https://www.youtube.com/watch?v=Dh-cTQJgM-Q 

초기 세팅으로부터 화면 구성하는 것만 살짝 참고함

 

2. VSCode에서 Firebase 구글 로그인 시 구현할 때 참고한 링크

(1) 로그인 관련 위젯과 화면 구성에 구글로그인 코드 엮는 거 참고

https://engschool.tistory.com/156

https://firebase.google.com/docs/auth/flutter/federated-auth?hl=ko#android_1 [ 최신 docs 코드 ]

제휴 ID 및 소셜 로그인  |  Firebase 문서

[Flutter] - Firebase auth! 소셜 로그인

 

(2) sha 인증서 설정하는 법 참고

https://www.youtube.com/watch?v=D43XZZMtSHo

https://developers.google.com/android/guides/client-auth?hl=ko 

중간 까지만 참고함

클라이언트 인증  |  Google Play services  |  Google for Developers

* 인증서 지문 설정중에 keystore를 찾지 못하는 에러 발생. Java를 설치해야할 듯 해서 homebrew로 설치하고 환경설정까지 해줬음

자바를 설치해라

 

- 자바 설치하고 나서 keytools -list 명령어 실행하니까 keystore 파일을 찾을수 없다는 에러가 발생

keystore가 없다

 

- 다음 명령어로 keystore를 만들어주었음

keytool -genkey -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android -keyalg RSA -keysize 2048 -validity 10000

keystore 생성 과정

 

- 다시 다음 명령어 실행하니 정상적으로 SHA1 정보를 얻을 수 있었음!

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

- 해당 내용 firebase 사이트에서 정보 기입해주기

 

(3) XCode 에서 커스텀 URL 스키마 추가해주는 것 아래 링크 참고

https://engschool.tistory.com/156

[Flutter] - Firebase auth! 소셜 로그인

- 해당 사항 안해주면 아이폰 시뮬레이터에서 구글 로그인 버튼 누르면 바로 튕겨버리는 에러 발생

- GoogleService-info.plist 파일은 ios 폴더 안에 있음! 거기서 REVERSED_CLIENT_ID 값에 해당하는 string 값 복사

- 맥에 설치된 XCode 어플을 틀고나서, open folder에서 플러터 프로젝트 안의 ios 폴더를 열어준 다음에 위 링크에서 하라는대로 따라하면 됨. 

 

 

이렇게 하면 VSCode, Mac환경에서 Flutter로 Firebase를 활용한 구글 로그인까지 실행되었음.