実装した経緯

Flutterを勉強していると、ほとんどの場合、FirebaseAuthを使ったユーザー名とパスワード認証に遭遇します。パスワードを忘れた際には、毎回メールで確認したり、「パスワードを忘れた？」という手順を踏む必要があり、手間がかかります。

そこでユーザーのサインインとログインをgoogleまたはappleアカウントで実装しました

今回はgoogleアカウントでサインインの実装について書きます

警告
この記事では、firebaseの初期設定は完了している前提で進めます！

メリット

利便性向上:

ユーザーが既にAppleアカウントまたはGoogleアカウントを持っている場合、新たにユーザー名とパスワードを設定する手間が省かれ、サインインが簡単になります。

セキュリティ向上:

AppleとGoogleはセキュリティに力を入れており、サインインプロセスもセキュアです。ユーザーのデータを保護するために、信頼性が高い認証システムを利用できます。

ソーシャルログイン:

ソーシャルログインを実装することで、ユーザーエンゲージメントを向上させ、ユーザーアカウントの作成を促進できます。

デメリット

プラットフォーム依存性:

AppleとGoogleアカウントのみをサポートする場合、特定のプラットフォームに依存することになり、他の認証方法を希望するユーザーに制限を課すことになるかもしれません。

ユーザーの選択肢の制限:

ユーザーに提供できる認証方法が制限されるため、一部のユーザーには不便かもしれません。例えば、FacebookやTwitterなどの他のソーシャルプラットフォームを利用したいユーザーもいるかもしれません。

1.Authentication設定

自分のプロジェクトのfirebaseページ
↓
Authenticationを選択
↓
ログイン方法を設定をタップ！

↓
Firebaseダッシュボードの左メニューから→ログイン方法を設定をタップ→google選択

↓
Firebaseプロジェクト設定 -> 一般でサポートメールも追加してください。
ここで、Google（プロバイダーの下）を有効にし、プロジェクト名とサポートメールを入力し、保存をクリックします。

2.Info.plistに追加

Android端末は準備完了！
iOS端末で使用するには、もう1つだけ必要なことがあります。
まずプロジェクトディレクトリ -> ios -> Runner ->GoogleService-Info.plist

GoogleService-Info.plist

<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>ここに貼り付け</string>
			</array>
		</dict>
	</array>

以上のステップで準備完了です
次は実際にコード書いていきます！

3.firebaseの初期化

main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(
      child: MyApp(),
  );
}

4.googleサインインの実装

全体像
ui層でgoogleボタン押される
↓
signInWithGoogle
↓
authenticateWithGoogle
↓
成功したらtrue
失敗はfalse

signInWithGoogle

signInWithGoogleはui層でボタンが押されたら最初に呼ばれる

auth_view_model.dart

Future<bool> signInWithGoogles(WidgetRef ) async {
    try {
    //googleサインイン処理
      UserCredential? user = await authenticateWithGoogle();
      if (user != null) {
      //サインイン成功
        return true;
      }  
      //失敗
      return false;
    } catch (e) {
      //エラーハンドリング
      return false;
    }
  }

UserCredentialとは
・Authenticationで使用されるクラスで、ユーザーの認証情報を表しています。

・Authenticationを利用する際、ユーザーがログインやサインアップを行うと、このUserCredentialオブジェクトが生成され、アプリケーション内でユーザーの認証状態を管理するのに使用されます。

authenticateWithGoogle

Googleでのサインインプロセスを実行するメソッドです。
Googleアカウントを使用してユーザー認証を行い、その結果をFirebase Authで使用するためのAuthCredentialに変換します。
戻り値はFirebase Authを通じて認証されたUserCredentialです。

auth_view_model.dart

   Future<UserCredential?> authenticateWithGoogle() async {
    FirebaseAuth auth = FirebaseAuth.instance;

    // Googleアカウントでのログインを試みます。
    final GoogleSignIn googleSignIn = GoogleSignIn();

    // GoogleSignInAccountオブジェクトを取得します。
    // ユーザーがGoogleアカウントでログインした場合にこのオブジェクトが返されます。
    final GoogleSignInAccount? googleSignInAccount =
        await googleSignIn.signIn();

    // ユーザーがGoogleアカウントでのログインに成功した場合
    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 auth.signInWithCredential(credential);
      return userCredential;
    }
    return null;
  }

5.UI層

UI層ではview_modelのsignInWithGoogleから
trueが返ってきたら画面遷移すると完璧です！

login_and_signup.dart

 Future<void> onGoogleSignIn() async {
    try {
      final result = await AuthViewModel().signInWithGoogle();
      if (result) {
       //googleサインイン完了
       //画面遷移などのコード
      } 
    } catch (e) {
     //エラー処理
    }
  }

まとめ

最後まで読んでいただきありがとうございます！
私はまだまだflutter勉強中ですので、間違っている箇所などがありましたらコメントください
また質問も気軽にして下さい
次はappleサインインのやり方！でお会いしましょう！！