Flutter で Firebase Authentication を使ってみる

アプリを Firebase に接続する

Flutter 用の Firebase SDK をインストールして初期化します（まだ行っていない場合）。

アプリに Firebase Authentication を追加する

  1. Flutter プロジェクトのルートから、次のコマンドを実行してプラグインをインストールします。

    flutter pub add firebase_auth

  2. 完了したら、Flutter アプリケーションを再ビルドします。

    flutter run

  3. プラグインを Dart コードにインポートします。

    import 'package:firebase_auth/firebase_auth.dart';

認証プロバイダを使用するには、Firebase コンソールで認証プロバイダを有効にする必要があります。[Authentication] セクションの [Sign-in method] ページに移動して、[メール / パスワード] のほか、アプリに必要な ID プロバイダを有効にします。

（省略可）Firebase Local Emulator Suite でプロトタイピングおよびテストを行う

アプリによるユーザーの認証方法について見ていく前に、Authentication 機能のプロトタイピングとテストに使用できるツール、Firebase Local Emulator Suite をご紹介します。認証手法やプロバイダを検討している場合や、Authentication と Firebase セキュリティ ルールを使用して公開および非公開のデータで各種データモデルを試している場合、さらにログイン時の UI デザインのプロトタイプを作成している場合などは、ライブサービスをデプロイせずにローカルで作業できると便利です。

Local Emulator Suite の一部である Authentication エミュレータを使用すると、アプリはエミュレートされたデータベースのコンテンツと構成のほか、プロジェクト リソース（関数、他のデータベース、セキュリティ ルール）ともやり取りできます。

いくつかの手順を実施するだけで、Authentication エミュレータを使用できます。

  1. アプリのテスト構成にコード行を追加して、エミュレータに接続します。

  2. ローカル プロジェクトのディレクトリのルートから、firebase emulators:start を実行します。

  3. 対話型のプロトタイピングには Local Emulator Suite UI を使用し、非対話型のテストには Authentication エミュレータ REST API を使用します。

  4. useAuthEmulator() を呼び出して、エミュレータのアドレスとポートを指定します。

    Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();

// Ideal time to initialize
await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
//...
}

詳細な手順については、アプリを Authentication エミュレータに接続するをご覧ください。また、Local Emulator Suite の概要もご覧ください。

次に、ユーザーの認証方法を見てみましょう。

現在の認証状態を確認する

Firebase Auth には、新規または既存の Flutter アプリケーションに安全な認証を統合するためのメソッドとユーティリティが用意されています。多くの場合、ユーザーの認証状態（ユーザーがログインしているのか、ログアウトしているのか）を把握する必要があります。

Firebase Auth では、Stream を使用して、この状態をリアルタイムで取得できます。Stream が呼び出されると、ユーザーの現在の認証状態を即時に提供します。また、認証状態が変更されるたびに、後続のイベントを提供します。

認証状態の変更をリッスンする方法は 3 つあります。

authStateChanges()

これらの変更を取得するには、FirebaseAuth インスタンスで authStateChanges() メソッドを呼び出します。

FirebaseAuth.instance
  .authStateChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

次の場合にイベントが発生します。

  • リスナーの登録直後。
  • ユーザーがログインしたとき。
  • 現在のユーザーがログアウトしたとき。

idTokenChanges()

これらの変更を取得するには、FirebaseAuth インスタンスで idTokenChanges() メソッドを呼び出します。

FirebaseAuth.instance
  .idTokenChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

次の場合にイベントが発生します。

  • リスナーの登録直後。
  • ユーザーがログインしたとき。
  • 現在のユーザーがログアウトしたとき。
  • 現在のユーザーのトークンが変更されたとき。

userChanges()

これらの変更を取得するには、FirebaseAuth インスタンスで userChanges() メソッドを呼び出します。

FirebaseAuth.instance
  .userChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

次の場合にイベントが発生します。

  • リスナーの登録直後。
  • ユーザーがログインしたとき。
  • 現在のユーザーがログアウトしたとき。
  • 現在のユーザーのトークンが変更されたとき。
  • FirebaseAuth.instance.currentUser が提供する次のメソッドが呼び出されたとき:
    • reload()
    • unlink()
    • updateEmail()
    • updatePassword()
    • updatePhoneNumber()
    • updateProfile()

認証状態を維持する

どのプラットフォーム用の Firebase SDK でも、アプリの再起動やページの再読み込み後もユーザーの認証状態を維持する機能がデフォルトでサポートされています。

Android や iOS などのネイティブ プラットフォームの場合、この動作は構成不可で、ユーザーの認証状態はアプリを再起動してもデバイスに保持されます。ユーザーは、デバイスの設定でアプリのキャッシュ データを削除できます。これにより、保存されている既存の状態がワイプされます。

ウェブ プラットフォームの場合、ユーザーの認証状態は IndexedDB に保存されます。Persistence.LOCAL を使用して永続性を変更し、ローカル ストレージにデータを格納できます。このデフォルトの動作は必要に応じて変更できます。現在のセッションの認証状態のみを保持するように設定することも、認証状態を保持しないように設定することもできます。これらの設定を構成するには、FirebaseAuth.instanceFor(app: Firebase.app(), persistence: Persistence.LOCAL); メソッドを呼び出します。setPersistence(Persistence.NONE) を使用して、各 Auth インスタンスの永続性を引き続き更新できます。

// Disable persistence on web platforms. Must be called on initialization:
final auth = FirebaseAuth.instanceFor(app: Firebase.app(), persistence: Persistence.NONE);
// To change it after initialization, use `setPersistence()`:
await auth.setPersistence(Persistence.LOCAL);

次のステップ

サポートされている ID と認証サービスを使用したユーザーのログインと登録に関するガイドをご覧ください。