Zenn
🐈

【Flutter】 FirebaseAuth GoogleSignIn

2023/02/18に公開
Firebase
Flutter
Google Sign-In
Firebase Auth
tech

初めに

初めてGoogleSignInを実装したので、備忘録として記述します。
今回はiosのみ実装している為、Androidは別の設定が必要です。
https://pub.dev/packages/google_sign_in
https://firebase.google.com/docs/auth/flutter/federated-auth?hl=ja

準備

今回下記のFirebaseの設定は省略します。
(こちらの記事、もしくは公式や他の方の記事を参考にしてください。)

Firebaseの設定とパッケージインストール

  • Firebaseコンソールで、FirebaseAuth(GoogleSignIn)の設定
  • FlutterプロジェクトでFirebaseの設定
  • パッケージインストール

info.plist設定(ios)

ios/Runner/info.plistに下記を追加。
(コピペだとインデントズレる可能性があるので公式のReadmeを参考にしてください。)

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        //↓ここ
        <string>REVERSED_CLIENT_ID</string>
      </array>
    </dict>
  </array>

上記コードのREVERSED_CLIENT_IDの部分は、ios/Runner/GoogleService-info.plist内のREVERSED_CLIENT_IDをコピペ。

<key>REVERSED_CLIENT_ID</key>
//↓ここ
<string>com.googleusercontent.apps.**************</string>

実装

[認証処理全体のコード]

final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
final googleAuth = await googleUser?.authentication;
final credential = GoogleAuthProvider.credential(
  accessToken: googleAuth?.accessToken,
  idToken: googleAuth?.idToken,
);
UserCredential userCredential =
    await FirebaseAuth.instance.signInWithCredential(credential);

Google認証を行う

Google認証フローを起動する

final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

リクエストから認証情報を取得する

final googleAuth = await googleUser?.authentication;

上記で取得した情報を元に、FirebaseAuthで利用する、credentialを作成する。

final credential = GoogleAuthProvider.credential(
  accessToken: googleAuth?.accessToken,
  idToken: googleAuth?.idToken,
);

FirebaseAuth認証を行う

作成したcredentialを利用しFirebaseAuth認証を行う。

UserCredential userCredential =
    await FirebaseAuth.instance.signInWithCredential(credential);

思っていたよりサクッと実装できました！

コード全体

追記している下記のif文を利用すると、新規ユーザーの場合と既存ユーザーの場合で処理を分けることができます。
(Firestoreへユーザーデータを登録する or Firestoreからユーザーデータを取得する等)

if (userCredential.additionalUserInfo!.isNewUser) {
  //新規ユーザーの場合の処理
} else {
  //既存ユーザーの場合の処理
}

コード全体

  void signInWithGoogle() async {
    try {
      //Google認証フローを起動する
      final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
      //リクエストから認証情報を取得する
      final googleAuth = await googleUser?.authentication;
      //firebaseAuthで認証を行う為、credentialを作成
      final credential = GoogleAuthProvider.credential(
        accessToken: googleAuth?.accessToken,
        idToken: googleAuth?.idToken,
      );
      //作成したcredentialを元にfirebaseAuthで認証を行う
      UserCredential userCredential =
          await FirebaseAuth.instance.signInWithCredential(credential);
	  
      if (userCredential.additionalUserInfo!.isNewUser) {
        //新規ユーザーの場合の処理
      } else {
        //既存ユーザーの場合の処理
      }
    } on FirebaseException catch (e) {
      print(e.message);
    } catch (e) {
      print(e);
    }
  }

終わりに

フィードバックございましたら頂けると幸いです。
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
https://mobile.twitter.com/tatsuki_kt

Discussion