ウェブアプリでカスタム プロバイダを使用して 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() の実装で常に新しいトークンを取得します。

Web

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

Web

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 サービスにアクセスする前に、次の初期化コードをアプリケーションに追加します。

Web

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

Web

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 を使用するをご覧ください。