Flutter 프로젝트에서 Google Login 설정하기

2024.11.14 - [개발노트/Flutter] - Flutter 프로젝트에서 Firebase 이용하기 (공통 설정)

---

1. Firebase Console 설정

1-a. Google Login 기능 활성화

Firebase Console 좌측 메뉴 빌드 카테고리에서 Authentication 메뉴를 클릭하면 된다.

```시작하기```를 클릭하고 제공업체 중에서 Google을 선택하여 사용 설정을 on 해준다.

 

1-b. SHA1 인증서 지문 추가 (for Android)

Android 기기에서 구글 로그인을 테스트 해보려면 필요한 절차다.

(스토어에 제출할 때는 스토어 앱 서명에 있는 값을 추가해주기 때문에

혹시라도 Android 디바이스에서 테스트해볼 일이 없다면 추가 안 해도 된다는 뜻)

(하지만 Flutter로 개발하는데 아이폰에서만 확인해볼거라고..? 설마..)

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

Android Studio 터미널 창에 그대로 복붙해서 입력하면 된다.
비밀번호는 ```android```

 

Certificate fingerprints:
                SHA1: 98:55:16:~
                SHA256: FF:D9:F0:~

그러면 결과값이 이런 형태로 출력될텐데, 여기서 ```SHA1``` 값을 복사하면 된다.

 

그다음 다시 콘솔로 돌아와서,

프로젝트 설정 → 일반

요기 아래에서 디지털 지문 추가 클릭해서 복사해온 거 그대로 붙여넣으면 된다.

Google Play Store 업로드 시에는
Play Store Console → 해당 앱 프로젝트 → 좌측 네비게이션 바의 설정 → 앱 서명에 있는 SHA1을 추가

 

 

 

2. 프로젝트 설정

🔗 google sign in 문서

 

2-a. 패키지 다운로드

flutter pub add firebase_auth
flutter pub add google_sign_in

실행하거나,

  # Google Login
  firebase_auth: ^4.20.0
  google_sign_in: ^6.2.1

또는 pubspec.yaml에 작성하고 pub get 해준다
(버전 작성은 알아서)

 

2-b. Firebase 초기화 코드 추가

void main() async {
	WidgetsFlutterBinding.ensureInitialized();

	// ...
	
	/// Firebase 초기화
	await Firebase.initializeApp(
    	options: DefaultFirebaseOptions.currentPlatform,
 	);

	// ...
	runApp(const MyApp());
}

main.dart

 

2-c. plist 업데이트 (for iOS) 

iOS 기기에서 구글 로그인 기능을 사용하려면 URL Scheme 추가가 필요하다.

안 해주면 App Crash..

REVERSED_CLIENT_ID를 추가해주면 되는데, Google에서 생성해준 Info.plist 안에서도 찾을 수 있다.

📁 [project]/ios/Runner/GoogleService-Info.plist

(만약 plist 파일 안에 클라이언트 아이디가 존재하지 않는다면,

위에서 Android SHA1 지문을 추가해줬던 화면의 애플 앱에서 plist 파일을 새로 다운로드 받을 수 있다. [Firebase Console-프로젝트설정-일반 하단]

다운 받은 plist 파일은 프로젝트에도 덮어쓰기 해줘야 한다.)

 

<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<!-- TODO Replace this value: -->
			<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>
<!-- End of the Google Sign-in Section -->

Info.plist

 

 

 

3. Error 해결하기

3-a. Unhandled Exception: PlatformException(sign_in_failed, ~

E/flutter (12868): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 12500: , null, null)
E/flutter (12868): #0      GoogleSignInApi.signIn (package:google_sign_in_android/src/messages.g.dart:221:7)
E/flutter (12868): <asynchronous suspension>
E/flutter (12868): #1      GoogleSignInAndroid._signInUserDataFromChannelData (package:google_sign_in_android/google_sign_in_android.dart:111:3)
E/flutter (12868): <asynchronous suspension>
E/flutter (12868): #2      GoogleSignIn._callMethod (package:google_sign_in/google_sign_in.dart:278:30)
E/flutter (12868): <asynchronous suspension>
E/flutter (12868): #3      GoogleSignIn.signIn.isCanceled (package:google_sign_in/google_sign_in.dart:431:5)
E/flutter (12868): <asynchronous suspension>

이런 에러가 발생한다면

Google Cloud Console에도 SHA1 지문 추가가 필요하다

 

3-a-i. Firebase Console에서 프로젝트 설정 → 서비스 계정:

```서비스 계정 권한 관리``` 클릭하면 자동으로 Google Cloud Console 페이지로 이동된다.

이렇게 이동하면 Google Cloud Console에도 현재 프로젝트가 자동으로 추가돼서 클라우드 콘솔에 이렇게 접속했었다.

아마 다른 편리한 접속 경로도 있을 것 같은데 나중에 찾으면 수정하는 걸로

 

3-a-ii. Google Cloud Console 좌측 메뉴 중 API 및 서비스 → 사용자 인증 정보

현재 프로젝트가 설정하고자 하는 프로젝트가 맞는지도 확인해주자.

우측 상단에서 현재 프로젝트 확인 및 변경 가능하다.

 

3-a-iii. ```사용자 인증정보 만들기``` → OAuth 2.0 클라이언트 ID

애플리케이션 유형 ```Android``` 선택 후 정보 입력해주면 된다.

 

 

 

Firebase Console 프로젝트 변경 (ver. Flutter)

---

<도움 받은 링크들>

• My iOS app crashes when I click the "Sign in with Google" button