Google I/O 2022 で発表された Firebase の最新情報をご覧ください。詳細

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 デザインのプロトタイプを作成している場合、ライブサービスをデプロイせずにローカルで作業できるようにすることは、良い手段です。

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

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 と認証サービスを使用したユーザーのログインと登録に関するガイドをご覧ください。