Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Web アプリのカスタム プロバイダーで App Check の使用を開始する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

組み込みプロバイダーのいずれかで App Check を使用する場合は、reCAPTCHA v3を使用した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()の実装で常に新しいトークンを取得してください。

Web version 9

const { CustomProvider } = require("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);
    });
  }
});
index.js

Web version 8

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.アプリチェックの初期化

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

Web version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck } = require("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    
});
index.js

Web version 8

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 に登録した後、開発中にローカルで、または継続的インテグレーション (CI) 環境からなど、App Check が通常は有効と分類しない環境でアプリを実行する場合は、次を作成できます。実際の構成証明プロバイダーの代わりに App Check デバッグ プロバイダーを使用するアプリのデバッグ ビルド。

Web アプリのデバッグ プロバイダーで App Check を使用する を参照してください。