概要
どうも、@daiki1003です!
「Google認証を実装したいけどどうしたら良いか分からない…。」
今回の記事では、そんなあなたのために
Flutter x Firebase AuthでのGoogleログインについて詳しく解説しています!
あなたがやることは
クリックとコピペのみです!
めっちゃ簡単!
前提
今回の記事では、Firebaseプロジェクトは作成されていると言う前提で書いています。
もし、まだでしたら下記からお願いします!
2,3分で出来ると思います。



今回のソースコード
例によって、サンプルコードはgithubにあげてあります。
firebase_google ブランチに移動して
・bundleID
・GoogleService-Info.plist または google-services.json
を設定すればすぐに動きます。
ここからの流れ
以下の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コンソールにアクセス
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
こちらをコピーします。



参考ページ。
設定画面に追加
これで完了です!
Flutter側でGoogle Sign inの設定
google_sign_inのインストール
google_sign_inをインストールします。



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



firebase_authのインストール



まだの人は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側が保持してくれます。
さいごに
いかがでしたでしょうか?
他のFirebaseの認証記事をみていただけると分かるのですが、ほぼやってる事同じ過ぎて
とても簡単に出来てしまいます。
Twitterフォローお願いします
「次回以降も記事を読んでみたい!」「この辺分からなかったから質問したい!」
そんな時は、是非@daiki1003のフォローお願いします♪
また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!
コメント