Playground

Flutter で Firebase Authentication が使えるようになるまで

Playground
この記事は約7分で読めます。
スポンサーリンク

お久しぶりです。みやかわです。

Flutter にて Firebase の Authentication を使った Google 認証を実装することがありました。

色々と悩んだ箇所があったので簡単にまとめて行きます。

チュートリアルに沿ってセットアップしていきます。

また、セットアップ中に悩んだところや引っかかったところを補足として書いていきます。

FlutterFire Overview | FlutterFire
スポンサーリンク

環境

OS:macOS Monterey
Flutter:2.10.2
Dart:2.9.2

今回は Android エミュレータで使えるようにすることを目標にする。

作るもの

ログインボタンを押したらGoogle認証をし、ユーザーネームを表示。

ログアウトボタンを押せば、ログアウトをする。

事前準備

CLIのインストール

簡単に Flutter で Firebase を使えるようにセットアップしてくれる flutterfire_cliをインストールする。
※ 手動でもセットアップ可能だが、プラットフォームごとに設定をする必要がある。

$ dart pub global activate flutterfire_cli

# path を通す
$ echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.zshrc #お使いの terminal が zsh の場合
$ source ~/.zshrc

c.f.) https://firebase.flutter.dev/docs/overview#initializing-flutterfire

Flutter

プロジェクト立ち上げ

flutter create で Flutter プロジェクトを立ち上げる。

CLIの実行

プロジェクトのフォルダに入り、先程インストールした flutterfire_cli を実行する。

色々聞かれるが聞かれたとおりに答えればOK。

$ flutterfire configure                     
i Found 3 Firebase projects.
✔ Select a Firebase project to configure your Flutter application with · hogehoge-project 
? Which platforms should your configuration support (use arrow keys & space to s✔ Which platforms should your configuration support (use arrow keys & space to select)? · android, ios, web 
~~

パッケージのインストール

実装に必要なパッケージをインストールする。

$ flutter pub add firebase_core
$ flutter pub add firebase_auth
$ flutter pub add google_sign_in

インストールされたバージョンは以下

firebase_core: ^1.12.0
firebase_auth: ^3.3.7
google_sign_in: ^5.2.4

Firebase

プロジェクトの立ち上げ

Firebase のサイトに行き、適当にプロジェクトを立ち上げる。

その後、Authentication から Google 認証を有効にする。

デバッグ証明書の取得と登録

Google認証を実装するには、証明書に書いてあるSHA-1の値を Firebase に登録する必要がある。

これをしないと、Google認証ログインのときに以下の例外が発生します。

throw PlatformException(code: errorCode, message: errorMessage as String?, details: errorDetails, stacktrace: errorStacktrace);

 

ここに証明書のSHA-1の値を取得する方法があるが、躓いたので詳しく書く。

記載してあるとおりに keytool コマンドを実行して証明書を閲覧しようとするとエラーがでる。

% keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

Javaをインストールしろというエラー。

Java をインストールすれば解決すると思いますが、このためだけにJavaをインストールするのも嫌なので、Android Studio が持っている Java を使って回避。

キーストアの初期パスワードは、 android

% /Applications/Android\ Studio.app/Contents/jre/Contents/Home/bin/keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

キーストアのパスワードを入力してください:  
別名: androiddebugkey
作成日: 2021/06/02
エントリ・タイプ: PrivateKeyEntry
証明書チェーンの長さ: 1
証明書[1]:
所有者: C=US, O=Android, CN=Android Debug
発行者: C=US, O=Android, CN=Android Debug
シリアル番号: 1
有効期間の開始日: Wed Jun 02 21:41:36 JST 2021終了日: Fri May 26 21:41:36 JST 2051
証明書のフィンガプリント:
	 SHA1: FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF # この値をコピー
	 SHA256: FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF
署名アルゴリズム名: SHA1withRSA (弱)
サブジェクト公開鍵アルゴリズム: 2048ビットRSA鍵
バージョン: 1

Warning:
証明書 uses the SHA1withRSA signature algorithm which is considered a security risk. This algorithm will be disabled in a future update.

これで証明書の SHA-1 を取得することができた。

 

一度、Firebase のサイトに行く。

左上付近にある、歯車アイコンをクリック。

プロジェクトの設定より、Androidアプリの項目にて、SHA認証フィンガープリントに先程コピーした SHA-1 の値を貼り付ける。

実装

最初にコード全体を貼り付け

以下の箇所で Firebase の初期化をしています。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  runApp(const App());
}

あとは、_userCredential に認証情報をもたせて、ログインしたらログインボタン消して、ログアウトボタン等を表示にしている。

 

ログインしたあとに Firebase を見ると、ログインされていることを確認できる。

参考文献

コメント

タイトルとURLをコピーしました