Flutter で App Check とデバッグ プロバイダを使用する

App Check を使用するようにアプリを登録した後は、通常はエミュレータまたは継続的インテグレーション（CI）環境からアプリを実行することはできません。これらの環境は有効なデバイスとして認識されないためです。開発中やテスト中にこのような環境でアプリを実行する場合は、実際の証明書プロバイダの代わりに App Check デバッグ プロバイダを使用するようにアプリのデバッグビルドを作成します。

Apple プラットフォーム

開発中など、シミュレータでインタラクティブにアプリを実行しているときにデバッグ プロバイダを使用するには、次の手順を行います。

  1. Firebase アプリを初期化した直後に、デバッグ プロバイダで App Check を有効にします。

    import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

// Import the firebase_app_check plugin
import 'package:firebase_app_check/firebase_app_check.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await FirebaseAppCheck.instance.activate(
    // Set appleProvider to `AppleProvider.debug`
    appleProvider: AppleProvider.debug,
  );
  runApp(App());
}

  2. Xcode プロジェクト（v11.0 以降）でデバッグ ロギングを有効にします。

    1. [Product] > [Scheme] > [Edit scheme] の順に開きます。
    2. 左側のメニューから [Run] を選択し、[Arguments] タブを選択します。
    3. [Arguments Passed on Launch] セクションで -FIRDebugEnabled を追加します。

  3. Xcode を使用して ios/Runner.xcworkspace を開き、シミュレータでアプリを実行します。Firebase がバックエンドにリクエストを送信しようとする際に、アプリはデバッグ出力にローカル デバッグ トークンを出力します。例:

    Firebase App Check Debug Token:
123a4567-b89c-12d3-e456-789012345678

  4. Firebase コンソールの [App Check] セクションで、アプリのオーバーフロー メニューから [デバッグ トークンを管理] を選択します。前の手順でロギングされたデバッグ トークンを登録します。

    [デバッグ トークンを管理] メニュー項目のスクリーンショット

トークンを登録すると、Firebase バックエンド サービスはトークンを有効なものとして受け入れます。

このトークンを使用すると、有効なデバイスでなくても Firebase リソースにアクセスできます。このトークンは他に漏らさないように注意してください。公開リポジトリには commit しないでください。登録されたトークンが不正利用された場合は、直ちに Firebase コンソールでトークンを取り消してください。

Android

Android 環境で Flutter アプリを実行しているときにデバッグ プロバイダを使用するには、Flutter アプリ内に次のコードを実装します。

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

// Import the firebase_app_check plugin
import 'package:firebase_app_check/firebase_app_check.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await FirebaseAppCheck.instance.activate(
    webRecaptchaSiteKey: 'recaptcha-v3-site-key',
    // Set androidProvider to `AndroidProvider.debug`
    androidProvider: AndroidProvider.debug,
  );
  runApp(App());
}

Firebase がバックエンドにリクエストを送信しようとする際に、アプリはデバッグ出力にローカル デバッグ トークンを出力します。例:

D DebugAppCheckProvider: Enter this debug secret into the allow list in
the Firebase Console for your project: 123a4567-b89c-12d3-e456-789012345678

  1. Firebase コンソールの [App Check] セクションで、アプリのオーバーフロー メニューから [デバッグ トークンを管理] を選択します。前の手順でロギングされたデバッグ トークンを登録します。

    [デバッグ トークンを管理] メニュー項目のスクリーンショット

トークンを登録すると、Firebase バックエンド サービスはトークンを有効なものとして受け入れます。

ウェブ

開発中など、localhost からアプリを実行しているときにデバッグ プロバイダを使用するには、次の操作を行います。

  1. ファイル web/index.html で、self.FIREBASE_APPCHECK_DEBUG_TOKEN を true に設定してデバッグモードを有効にします。

    <body>
  <script>
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  </script>

  ...

</body>

  2. ウェブアプリをローカルで実行して、ブラウザのデベロッパー ツールを開きます。デバッグ コンソールに、デバッグ トークンが表示されます。

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678". You will
need to safelist it in the Firebase console for it to work.

    このトークンは、ブラウザのローカルに格納され、同じマシンの同じブラウザでアプリを使用するたびに使用されます。トークンを別のブラウザや別のマシンで使用する場合は、self.FIREBASE_APPCHECK_DEBUG_TOKEN を true ではなくトークン文字列に設定します。

  3. Firebase コンソールの [App Check] セクションで、アプリのオーバーフロー メニューから [デバッグ トークンを管理] を選択します。前の手順でロギングされたデバッグ トークンを登録します。

    [デバッグ トークンを管理] メニュー項目のスクリーンショット

トークンを登録すると、Firebase バックエンド サービスはトークンを有効なものとして受け入れます。

このトークンを使用すると、有効なデバイスでなくても Firebase リソースにアクセスできます。このトークンは他に漏らさないように注意してください。公開リポジトリには commit しないでください。登録されたトークンが不正利用された場合は、直ちに Firebase コンソールでトークンを取り消してください。