このページは Cloud Translation API によって翻訳されました。

Webアプリのカスタムプロバイダーでアプリチェックを有効にする

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

組み込みプロバイダーの1つでAppCheckを使用する場合は、reCAPTCHAv3でのAppCheckおよびreCAPTCHAEnterpriseでのAppCheckのドキュメントを参照してください。

あなたが始める前に

1.アプリチェックライブラリをアプリに追加します

まだ追加していない場合は、Firebaseをウェブアプリに追加します。必ずAppCheckライブラリをインポートしてください。

2.AppCheckプロバイダーオブジェクトを作成します

カスタムプロバイダーのAppCheckプロバイダーオブジェクトを作成します。このオブジェクトにはgetToken()メソッドが必要です。このメソッドは、カスタムApp Checkプロバイダーが信頼性の証明として必要とする情報を収集し、AppCheckトークンと引き換えにトークン取得サービスに送信します。 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へのすべてのリクエストとともにアプリチェックトークンの送信を開始しますが、Firebase製品では、Firebaseコンソールの[アプリチェック]セクションで適用を有効にするまで、トークンが有効である必要はありません。詳細については、次の2つのセクションを参照してください。

4.リクエストの指標を監視する

更新されたアプリがユーザーの手に渡ったので、使用しているFirebase製品に対してアプリチェックを適用できるようになります。ただし、そうする前に、そうすることで既存の正当なユーザーを混乱させないことを確認する必要があります。

リアルタイムデータベース、Cloud Firestore、およびCloud Storage

Realtime Database、Cloud Firestore、およびCloud Storageでこの決定を行うために使用できる重要なツールは、アプリチェックリクエストの指標画面です。

商品のアプリチェックリクエストの指標を表示するには、Firebaseコンソールの[アプリチェック]セクションを開きます。例えば：

AppCheckメトリクスページのスクリーンショット

各製品のリクエストメトリックは、次の4つのカテゴリに分類されます。

確認済みのリクエストとは、有効なAppCheckトークンを持つリクエストです。 App Checkの適用を有効にすると、このカテゴリのリクエストのみが成功します。
古いクライアントリクエストとは、AppCheckトークンが欠落しているリクエストです。これらのリクエストは、アプリチェックがアプリに含まれる前の古いバージョンのFirebaseSDKからのものである可能性があります。
不明な発信元のリクエストとは、App Checkトークンが欠落しているリクエストであり、FirebaseSDKからのものではないようです。これらは、盗まれたAPIキーを使用して行われたリクエスト、またはFirebaseSDKを使用せずに行われた偽造されたリクエストからのものである可能性があります。
無効なリクエストとは、アプリを偽装しようとしている不正なクライアントからの、またはエミュレートされた環境からの、無効なアプリチェックトークンを持つリクエストです。

アプリのこれらのカテゴリの分布は、施行を有効にすることを決定したときに通知する必要があります。ここにいくつかのガイドラインがあります：

最近のリクエストのほとんどすべてが検証済みのクライアントからのものである場合は、強制を有効にしてバックエンドリソースの保護を開始することを検討してください。
最近のリクエストの大部分が古くなっている可能性のあるクライアントからのものである場合、ユーザーの混乱を避けるために、施行を有効にする前に、より多くのユーザーがアプリを更新するのを待つことを検討してください。リリースされたアプリにAppCheckを適用すると、AppCheckSDKと統合されていない以前のアプリバージョンが破損します。
アプリがまだ起動していない場合は、使用中の古いクライアントがないため、すぐにAppCheckの適用を有効にする必要があります。

クラウド機能

Cloud Functionsの場合、関数のログを調べることでAppCheckの指標を取得できます。呼び出し可能な関数を呼び出すたびに、次の例のような構造化されたログエントリが出力されます。

{
  "severity": "INFO",    // INFO, WARNING, or ERROR
  "logging.googleapis.com/labels": {"firebase-log-type": "callable-request-verification"},
  "jsonPayload": {
    "message": "Callable header verifications passed.",
    "verifications": {
      // ...
      "app": "MISSING",  // VALID, INVALID, or MISSING
    }
  }
}

次の指標フィルターを使用してログベースのカウンター指標を作成することで、GoogleCloudConsoleでこれらの指標を分析できます。

resource.type="cloud_function"
resource.labels.function_name="YOUR_CLOUD_FUNCTION"
resource.labels.region="us-central1"
labels.firebase-log-type="callable-request-verification"

フィールドjsonPayload.verifications.appCheckを使用してメトリックにラベルを付けます。

5.施行を有効にする

施行を有効にするには、以下の各製品の指示に従ってください。製品の施行を有効にすると、その製品に対する未確認のリクエストはすべて拒否されます。

リアルタイムデータベース、Cloud Firestore、およびCloud Storage

Realtime Database、Cloud Firestore（iOSおよびAndroid）、およびCloudStorageの適用を有効にするには：

Firebaseコンソールの[アプリチェック]セクションを開きます。
施行を有効にする製品のメトリックビューを展開します。
[強制]をクリックして、選択を確認します。

強制を有効にしてから有効になるまで、最大15分かかる場合があることに注意してください。

クラウド機能

クラウド機能のアプリチェックの実施を有効にするを参照してください。