0 0

すでに作成済みのアプリに、ログイン画面を追加します。

ここでは、Firebase Authentication機能を利用したログイン画面を作成して、それを（すでに作成済みの）アプリのmain()で呼び出します。

またローカル環境でのFirebase Emulators試験環境作成も行います。

以下、作業記録です。

１．前提

すでに動作確認済みのアプリ作成済みであること。
※出典｢Firebase を使用して認証システムを構築する場合｣参照
※以下では、アプリに最も迅速かつ簡単に認証機能を追加する為の、ドロップイン UI ライブラリの FirebaseUI Auth を利用しています。もしUX を変更する場合は、オープンソースのライブラリをフォークして独自のバージョンをできますし、ログインフローが大きく異なる場合は、Firebase SDK を使用して独自のフローを実装することが可能です。

２．Firebaseプロジェクト新規作成

→別記事｢[基礎知識]Firebaseの新規プロジェクト作成手順｣参照

３．Flutterアプリ追加

(1) Flutter プラットフォーム選択

(2)Firebase CLI のインストール、ログイン

① npm から Firebase CLI をインストール

＞　npm install -g firebase-tools

② Firebase CLI にログインしてテスト

＞　firebase login

※このコマンドにより、ローカルマシンが Firebase に接続され、Firebase プロジェクトへのアクセスが許可されます。

(3) Firebase プロジェクトを一覧表示

※CLI が正しくインストールされていて、アカウントにアクセスしていることをテストします。

＞　firebase projects:list

※Firebase コンソールと同じ Firebase プロジェクトが表示されています。

(4) Flutter SDK インストール

※実施済み（Flutter Doctor (下図) で確認可能）

(5) Flutter プロジェクト作成

※実施済み (Flutter コンソールで確認可能)

(6) FlutterFire CLI のインストール

① FlutterFire CLI をグローバルにインストール

＞　dart pub global activate flutterfire_cli

(7) Flutterアプリ登録

① FlutterアプリのFirebaseプロジェクトへの登録

flutterfire configure コマンドを実行し(ローカル開発環境の)FlutterプロジェクトをFirebaseプロジェクトに登録（関連付け）する。

＞　flutterfire configure –project=<Firebaseプロジェクト名>

※もし何度か当処理を繰り返している場合、古い（Flutterプロジェクト￥lib￥）firebase_options.dartは削除(または退避)してから実施する様にします。
※故に次のメッセージが表示された場合(上記firebase_options.dartを)削除してから、”n”を選択します。
? Generated FirebaseOptions file C:\app\lib\firebase_options.dart already exists, do you want to override it? (y/n) ›　←削除後に”n”を選択

すると以下のメッセージが表示されます。

※全てのプラットフォームを指定する場合：　そのままEnterキーを押します。
※もし(例えば)ios、macosを対象外とする場合：　矢印キーで選択後、SPACEキーで、除外します。

これで、プラットフォームごとのアプリが Firebase に自動的に登録され、
lib/firebase_options.dart 構成ファイルが Flutter プロジェクトに追加されます。

※もし(上記で(firebase_options.dartが))作成されていない場合は、再度、
＞　flutterfire configure –project=<Firebaseプロジェクト名>
を実行後、(上記ファイルが)作成されたことを確認してから、以降の手順に進みます。

４．Firebase の初期化とプラグインの追加

(1) Flutterプロジェクトのコード修正

以下①～④のコード修正を行う。

① firebase_options.dartファイル構成のインポート：

import ‘package:firebase_core/firebase_core.dart’;　←追加する

② firebase_coreパッケージのインポート：

import ‘firebase_options.dart’;　←追加する

⓷ Firebase.InitializeAppの呼び出し：

await FirebaseAuth.instance.useAuthEmulator(‘localhost’, 9099);　←追加する

例：

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

以下のコマンドを実行して(あるいはFlutterプロジェクトのpubspec.yamlに直接にFirebase関連の依存関係を追加して)Firebase関連パッケージをインストールします。

＞　flutter pub add firebase_core

＞　flutter pub add firebase_auth

⑤ FlutterプロジェクトでのFirebase初期化

すでに作成済みのアプリのmain.dartに(上記で追加したFirebase関連パッケージを)インポートします。

import ‘package:firebase_auth/firebase_auth.dart’;　←追加する

import ‘package:firebase_core/firebase_core.dart’;　←追加する

→Firebaseドキュメント｢Flutter アプリに Firebase を追加する｣参照

→同上｢使用できるプラグイン｣参照

(2) 認証プロバイダの有効化

以下の①～②で認証プロバイダ(ログイン設定)を有効化する。

① ログイン方法選択：

※ここでは｢メール／パスワード｣を選択する

② ログイン設定の有効化：

※ここでは｢メール／パスワード｣設定を有効化する

５．ウェブアプリ（Web版）設定

Firebaseコンソールから(firebaseプロジェクトの)ウェブアプリ情報を確認し以下の設定を行います。

① firebaseプロジェクト設定）ウェブアプリ設定：

②index.htmlへの設定追加：

ローカル開発環境のFlutterプロジェクトフォルダ直下の web フォルダ直下の index.html ファイルに追加する必要があります。

６．ウェブアプリ（Windows版）設定

（現在の所）上記５と同様の設定手順は用意(公開)されているが、実際に設定しようとしても、まだ開発中で指定されたパッケージが使えない部分が残っており、ここでは未設定です。

しかし上記５の設定だけの状態でビルドしてもWindows上のアプリが動作することを（現在の所は）確認済みです。

７．Firebase Local Emulator Suite 環境作成

Firebase Local Emulator Suite を使用すると、本番環境にデプロイする前に、ローカルで Firebase 機能をプロトタイプ化してテストできます。これにより、開発時間を短縮し、本番環境での予期しない動作のリスクを軽減できます。

→別記事｢[基礎知識]Firebase エミュレータ スイートを使用した Flutter アプリのローカル開発｣参照

(1) Firebaseインストール

未インストール時は要インストール。
→別記事｢[基礎知識]Firebase エミュレータ スイートを使用した Flutter アプリのローカル開発｣参照

※インストールの有無（バージョン確認）方法：　firebase –version

(2) Firebase初期化

未初期化時は要初期化。
→別記事｢[基礎知識]Firebase エミュレータ スイートを使用した Flutter アプリのローカル開発｣参照

＞　firebase init

(3) firebase emulators 起動

＞　firebase emulators:start

(4) ログイン情報登録

(上記で表示された)Authentication設定画面で、ログイン情報を登録しておきます。

(5) useAuthEmulator() メソッドの使用

main.dart に、以下のコードを追記します。

import 'package:firebase_auth/firebase_auth.dart';　※追記済み

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();　※追記済み
  await Firebase.initializeApp();　※追記済み

  // Ideal time to initialize
  await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);　※今回新規追加
  //...
}

※上記追加コードは本番リリースの際は要削除な為、以下の様に記述してデバッグビルドでのみ実行される様にするのが一般的です。

import 'package:flutter/foundation.dart'; // 追加）デバッグ用
（途中省略）
  // 追加）Firebase Emulators Sweet 利用に必要
  if(kDebugMode){ // デバッグビルドのみで実行
    await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
  }

８．動作確認

(1) flutterアプリ起動：

＞　flutter run -d windows

（※途中cmake関連のワーニング等発生する場合あり。最終的に起動すればここではＯＫとします。）

アプリ起動後、以下の確認を行います。

(2) ログイン情報入力：

ログイン情報入力後、｢Login｣ボタンをクリックします。

(3) ログイン成功の確認：

ログインに成功すると(下図)アプリのメイン画面が表示されます。

以上で、Flutterアプリ開発における、Firebase Local Emulator Suite でプロトタイピングおよびテストを行う準備が整いました。

About Post Author

zakku-spot

ys.yama2@gmail.com

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %