【flutter】firebaseAuthenticationでGoogleアカウントを使用してログインする方法

flutterでfirebaseAuthenticationを使用してGoogleアカウントでログイン認証するための準備について備忘として残します。

環境

• Flutter 3.24.3
• cloud_firestore: ^5.4.2
• firebase_core: ^3.5.0
• google_sign_in: ^6.2.1

firebaseAuthenticationの設定

※firebaseでプロジェクトの作成は完了している前提で話が進みます。
FirebaseのコンソールでAuthenticationを選択します。
ここで色々聞かれますが、その辺は別記事を参照、、、、

とりあえずAuthenticationでGoogleアカウントでログインできるようにするぜ！という設定さえできていればOK。

「プロジェクト設定」をクリック。そうするとプロジェクト設定の画面が起動します。
「全般」タブを選択している状態で下の方にスクロールすると、「マイアプリ」という部分が出てきます。
既にアプリが登録されているので、Androidアプリ、Appleアプリの2つに対象となるアプリケーションが出ています。

Androidの設定

おそらく上記画面のようになっているので、google-service.jsonをダウンロードします。
ダウンロードしたgoogle-service.jsonの内容をflutterのアプリに適用します。

android/app/google-service.json を開きます。
ダウンロードした内容をコピペします。

基本的にはAndroid側の設定はこれで終わり（なはず）です。
（試行錯誤しながらやっていたので手順が足りない可能性ありです。。。。すみません）

※ ちなみに当時僕がこの状態でdebugした時にはSDKのバージョンでbuildエラーが出ました。

firebase_auth パッケージが minSdkVersion 23 を要求しているにもかかわらず、現在のプロジェクトが minSdkVersion 21 に設定されているためにビルドが失敗していることを示しています。

この問題を解決するには、プロジェクトの minSdkVersion を 23 に引き上げる必要があります。
この場合、android/app/build.gradleファイルを下記のように修正します。

build.gradle

android {
    defaultConfig {
        // 他の設定項目
        minSdkVersion 23 // ここを 23 に変更
        // 他の設定項目
    }
}

iosの設定

同様にGoogleService-Info.plistをダウンロードします。
ダウンロードしたGoogleService-Info.plistの内容をflutterのアプリに適用します。

ios/Runner/GoogleService-Info.plistを開きます。
ダウンロードした内容をコピペします。
多分下記内容が追加されるはずです。

GoogleService-Info.plist

	<key>CLIENT_ID</key>
	<string>クライアントID</string>
	<key>REVERSED_CLIENT_ID</key>
	<string>ここをコピーしておく</string>

次にios/Runner/Info.plistを開きます。
下記を追加します。

Info.plist

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>ここにGoogleService-Info.plistでコピーした内容をペースト</string>
			</array>
		</dict>
	</array>

flutter側の実装

account_view.dart

//色々省きますが、UI側でsignIn()メソッドを実行する
ListTile(
              leading: const Icon(Icons.logout),
              title: const Text('ログイン'),
              onTap: () {
                signIn();
              },
            ),
//...

firebase_service.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:refrigerator_app/model/buy_list.dart';
import 'package:refrigerator_app/repository/logger_service.dart';

final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
final FirebaseFirestore _firestore = FirebaseFirestore.instance;

/// サインイン
signIn() async {
  final GoogleSignIn googleSignIn = GoogleSignIn();

  // GoogleSignInAccountオブジェクトの取得。
  // Googleアカウントでログインした場合にオブジェクトが返却される。それ以外の場合はNull。
  final GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();

  if (googleSignInAccount != null) {
    final GoogleSignInAuthentication googleSignInAuthentication = await googleSignInAccount.authentication;

    // Googleアカウントの認証情報からAuthCredentialを生成します。
    final AuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleSignInAuthentication.accessToken,
      idToken: googleSignInAuthentication.idToken,
    );

    // 生成されたAuthCredentialを使用してFirebaseでのサインインを行います。
    final UserCredential userCredential = await _firebaseAuth.signInWithCredential(credential);
    return userCredential;
  }
  return null;
}

※エミュレータを使用するときにmain.dartでawait FirebaseAuth.instance.useAuthEmulator('localhost', 9099);として初期化しているとNetworkエラーになるみたいです。

まだまだ未熟ですので、間違っている点等でご指摘あればお願いします！