ウェブアプリでカスタム プロバイダを使用して App Check を使ってみる

このページでは、App Check カスタム プロバイダを使用して、ウェブアプリで App Check を有効にする方法を説明します。App Check を有効にすると、自分のアプリだけがプロジェクトの Firebase リソースにアクセスできるようになります。

組み込みプロバイダのいずれかで App Check を使用する場合は、reCAPTCHA Enterprise での App Check のドキュメントをご覧ください。

始める前に

1. アプリに App Check ライブラリを追加する

ウェブアプリに Firebase を追加します（まだ行っていない場合）。必ず App Check ライブラリをインポートしてください。

2. App Check プロバイダ オブジェクトを作成する

カスタム プロバイダ用に App Check プロバイダ オブジェクトを作成します。このオブジェクトで getToken() クラスを使用して、App Check カスタム プロバイダが真正性の証明に必要な情報を収集してトークン取得サービスに送信し、App Check トークンと交換する必要があります。App Check SDK はトークン キャッシュを処理するので、getToken() の実装で常に新しいトークンを取得します。

ウェブ向けのモジュラー API

import { CustomProvider } from "firebase/app-check";

const appCheckCustomProvider = new CustomProvider({
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
});
appcheck_custom_provider.js

ウェブ向けの名前空間 API

const appCheckCustomProvider = {
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
};
index.js

3. App Check を初期化する

Firebase サービスにアクセスする前に、次の初期化コードをアプリケーションに追加します。

ウェブ向けのモジュラー API

import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

const appCheck = initializeAppCheck(app, {
  provider: appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true    
});
appcheck_initialize_custom_provider.js

ウェブ向けの名前空間 API

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
appCheck.activate(
  appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);
index.js

次のステップ

App Check ライブラリがアプリにインストールされたら、デプロイします。

更新されたクライアント アプリは、Firebase にリクエストを送信するたびに App Check トークンを送信しますが、Firebase コンソールの [App Check] セクションで適用を有効にするまで、Firebase プロダクトは有効なトークンを必要としません。

指標をモニタリングして適用を有効にする

ただし、適用を有効にする前に、既存の正規ユーザーを中断しないように対策を行う必要があります。一方、アプリリソースの不審な使用に気づいた場合は、すぐに適用を有効にすることもできます。

使用するサービスの App Check 指標を確認すると、この決定を行ううえで役立ちます。

App Check の適用を有効にする

App Check がユーザーに与える影響を理解し、続行する準備ができたら、App Check の適用を有効にします。

デバッグ環境で App Check を使用する

アプリを App Check に登録した後に、App Check が通常は有効として分類しない環境（ローカルの開発環境や継続的インテグレーション（CI）環境など）でアプリを実行する場合は、実際の証明書プロバイダの代わりに App Check デバッグ プロバイダを使用するアプリのデバッグビルドを作成できます。

ウェブアプリのデバッグ プロバイダで App Check を使用するをご覧ください。