Google I/O 2023 での Firebase の最新情報。詳細

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

このページでは、App Check カスタム プロバイダを使用して、ウェブアプリで 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

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 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. App Check を初期化する

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

Web version 9

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

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