Flutter x FirebaseのGoogle認証はコピペだけでOK！

Dart

2020.06.17 2020.06.11

概要

どうも、@daiki1003です！

「Google認証を実装したいけどどうしたら良いか分からない…。」

今回の記事では、そんなあなたのために
Flutter x Firebase AuthでのGoogleログインについて詳しく解説しています！

あなたがやることは
クリックとコピペのみです！
めっちゃ簡単！

前提

今回の記事では、Firebaseプロジェクトは作成されていると言う前提で書いています。
もし、まだでしたら下記からお願いします！
2,3分で出来ると思います。

【超簡単！】FlutterでFirebaseを使って爆速コーディング！〜登録から認証まで〜

概要みなさん、Firebase使ってますか？「個人開発で何かを開発して世に出してみたい！」って欲望のある人は確実に使った方が良いと思います。めちゃくちゃ便利ですよ。チーム開発した事がある人はすごさわかると...

今回のソースコード

例によって、サンプルコードはgithubにあげてあります。
firebase_google ブランチに移動して

・bundleID
・GoogleService-Info.plist または google-services.json

を設定すればすぐに動きます。

daiki1003/firebase_sample

This is firebase sample created with flutter. Contribute to daiki1003/firebase_sample development by creating an account on GitHub.

ここからの流れ

以下の5ステップとなります。
どれもクリック or コピペで出来ます！

1. Firebase側でGoogle Sign inの設定
2. Flutter側でGoogle Sign inの設定
3. iOS側でGoogle Sign inの設定
4. Googleでログイン
5. Flutter側でGoogleによる認証情報をFirebaseに送信

Firebase側でのGoogle Sign inの設定

Firebaseコンソールにアクセス

ログイン - Google アカウント

Authenticationを選択

Sign-in Methodの選択

Googleの選択

「有効にする」を選択し、「プロジェクトの公開名」と「プロジェクトのサポートメール」をそれぞれ入力、選択する

画面左の「プロジェクトの概要」右の歯車から「プロジェクトを設定」を選択

Androidアプリの設定画面でSHA1を入力

「ターミナル」等で各OS毎にコマンドを叩き、フィンガープリントのコピー

Mac/Linuxであれば

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

Windowsであれば

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

こちらをコピーします。

Authenticating Your Client | Google APIs for Android

参考ページ。

設定画面に追加

これで完了です！

Flutter側でGoogle Sign inの設定

google_sign_inのインストール

google_sign_inをインストールします。

google_sign_in | Flutter Package

Flutter plugin for Google Sign-In, a secure authentication system for signing in with a Google account on Android and iOS.

インストールの方法が分からない方はこちらの記事を参考にしてみてください。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

概要 Flutter(Dart)で画像のクリッピングするコードが書けますか？ Flutter(Dart)でhttp通信するコードが書けますか？大丈夫、書けなくて良いんです。 Flutterでは、色んな人が使いそ...

firebase_authのインストール

firebase_auth | Flutter Package

Flutter plugin for Firebase Auth, enabling Android and iOS authentication using passwords, phone numbers and identity providers like Google, Facebook and Twitte...

まだの人はfirebase_authもインストールしておいてください！

これで、準備完了です！

iOS用Google Sign inの設定

Info.plistに以下記述のコピペ

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>URL_SCHEME_HERE</string>
		</array>
	</dict>
</array>

GoogleServices-Info.plistのREVERSED_CLIENT_IDをコピー

先ほどコピペした内容の「URL_SCHEME_HERE」のところにコピーした内容を貼り付け

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>com.googleusercontent.apps.123456789123-hogehoge</string>
		</array>
	</dict>
</array>

Googleでログイン

認証部分

GoogleSignIn クラスをインスタンス化します。
その際にscopeの設定をします。

このインスタンスに対してsignInを投げると Future<GoogleSignInAccount> が
取得出来ますので、その結果に応じて処理をしています。

Flutter側でGoogleによる認証情報をFirebaseに送信

さて、成功した場合は認証情報をFirebaseに伝えてあげましょう。

GoogleSignInAuthentication auth = await signinAccount.authentication;
final credential = GoogleAuthProvider.getCredential(
  idToken: auth.idToken,
  accessToken: auth.accessToken,
);
FirebaseAuth.instance.signInWithCredential(credential);

GoogleAuthProvider は firebase_auth プラグインに含まれているクラスです。
getCredentialで認証情報をidToken及びアクセストークンより取得して、それをsignInWithCredentialに伝えています。
こうすることで、認証情報をFirebase側が保持してくれます。