[Flutter] プラグインで簡単設定！Firebaseを使ってGoogle Sign Inする方法

今回は、FlutterアプリにFirebase Authenticationを使って Google Sign In を行う方法をご紹介します。

Firebase Authentication は FIrebase が提供している機能で、メールとパスワードによる認証だけでなく、twitterやApple、Facebookとの認証も提供されています。これを利用することで、簡単にログイン認証機能をつくることができます。

作るものはサインインボタンを表示して、認証後にアイコン、名前、メールアドレス、ログアウトボタンを表示します。

では Googleアカウントを利用してサインインする手順をご紹介していきます。

ITエンジニアが利用したい転職エージェントNo.1

» レバテックキャリアの無料登録はこちら

Firebase Authenticationの設定

まず Firebase コンソールでプロジェクトを作成する必要があります。詳細な手順は以下の記事でご紹介しています。

2021年4月2日[Flutter] 初心者でも簡単に導入可能！Firebaseのセットアップ方法

プロジェクトの作成が終わったら、Authentication のユーザの認証と管理をクリックします。

「始める」ボタンをクリックします。

画面上部の「Sign-in method」をクリックして「Google」欄の右端のペンマークをクリックします。

次の画面で右上のスライドを「有効」に変更、サポートメールを選択して「保存」ボタンをクリックします。

Googleのステータスが「有効」になっていることを確認しましょう。

AndroidのFirebaseの設定

AndroidでのGoogleサインインを行うには、Firebaseのプロジェクトの設定で、SHA 証明書フィンガープリントを設定する必要があるようです。コマンドラインから keytool を実行して、SHA-1とSHA-256の値を設定します。

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

iOSの設定

iOS では google_sing_in パッケージの公式に記載されている通り Info.plist に CFBundleURLTypes を追加する必要があります。CFBundleURLSchemes には、GoogleService-info.plist のREVERSED_CLIENT_ID の値をコピペすればOKです。

Info.plist

 <key>CFBundleURLTypes</key>
  <array>
    <dict>
     <key>CFBundleTypeRole</key>
     <string>Editor</string>
     <key>CFBundleURLSchemes</key>
     <array>
     <string>com.googleusercontent.apps.48083753xxxx-xxxxxxxxxxxxxxxxxxxxxxxxx</string>
     </array>
    </dict>
  </array>

Firebase関連パッケージのインストール

Firebase とGoogleサインインボタン、riverpod を使うためのパッケージをインストールするために、pubspec.yaml ファイルに以下のように追加し、flutter pub get でインストールします。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0

  //以下の4つを追加
  firebase_auth: ^0.18.3
  google_sign_in: ^4.5.6

  flutter_riverpod: ^0.12.0
  flutter_signin_button: ^1.1.0

Flutterでの実装

今回は状態遷移に flutter_riverpod をしていますので、provider や stateful ウィジェットを使う場合は適宜読みかえてください。

プロバイダを定義してmain関数でFirebaseの初期化を行います。

final googleSignInProvider =
    ChangeNotifierProvider((ref) => GoogleSignInProvider());

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

ChangeNotifier を継承した Google認証用のクラスを作成します。

class GoogleSignInProvider extends ChangeNotifier {
  final googleSignIn = GoogleSignIn();
  bool _isSignIn;

  GoogleSignInProvider() {
    _isSignIn = false;
  }

  bool get isSignIn => _isSignIn;

  set isSignIn(bool isSignIn) {
    _isSignIn = isSignIn;
    notifyListeners();
  }

  //ログイン
  Future login() async {
    isSignIn = true;
    final user = await googleSignIn.signIn();

    if (user == null) {
      isSignIn = false;
      return;
    } else {
      final auth = await user.authentication;
      final credential = GoogleAuthProvider.credential(
        accessToken: auth.accessToken,
        idToken: auth.idToken,
      );
      await FirebaseAuth.instance.signInWithCredential(credential);

      isSignIn = false;
    }
  }

  //ログアウト
  void logout() async {
    await googleSignIn.disconnect();
    FirebaseAuth.instance.signOut();
  }
}

画面表示は、StreamBuilder で FirebaseAuth をチェックして、Google側の処理を待っている状態では、インジケータを表示します。処理が戻ってきて snapshot.hasData があれば、currentUser からユーザの画像URL、名前、メールアドレスを取得して表示します。

snapshot.hasData がなければ、「Sign up with Google」のログインボタンを表示します。flutter_signin_button パッケージをインストールしたので、SignInButton ウィジェットを使用しています。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, watch, child) {
      final provider = watch(googleSignInProvider);

      return Scaffold(
        appBar: AppBar(
          title: Text('Google Sign In'),
        ),
        body: StreamBuilder(
            stream: FirebaseAuth.instance.authStateChanges(),
            builder: (context, snapshot) {
              if (provider.isSignIn) {
                return Center(child: CircularProgressIndicator());
              } else if (snapshot.hasData) {
                final user = FirebaseAuth.instance.currentUser;
                return Container(
                  alignment: Alignment.center,
                  color: Colors.pink[50],
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text('Logged In'),
                      SizedBox(height: 10),
                      CircleAvatar(
                          maxRadius: 25,
                          backgroundImage: NetworkImage(user.photoURL)),
                      SizedBox(height: 10),
                      Text('Name: ' + user.displayName),
                      SizedBox(height: 10),
                      Text('Email: ' + user.email),
                      SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: () {
                          context.read(googleSignInProvider).logout();
                        },
                        child: Text('Logout'),
                      ),
                    ],
                  ),
                );
              } else {
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SignInButton(
                        Buttons.Google,
                        text: "Sign up with Google",
                        onPressed: () {
                          context.read(googleSignInProvider).login();
                        },
                      ),
                    ],
                  ),
                );
              }
            }),
      );
    });
  }
}