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

Web アプリで reCAPTCHA Enterprise を使用して App Check の使用を開始する

このページでは、reCAPTCHA Enterprise プロバイダーを使用して、Web アプリで App Check を有効にする方法について説明します。 App Check を有効にすると、アプリのみがプロジェクトの Firebase リソースにアクセスできるようになります。この機能の概要を参照してください。

reCAPTCHA Enterprise は、無料の割り当てがある有料サービスです。 App Check は、無料のサービスであるreCAPTCHA v3もサポートしています。 reCAPTCHA v3 と reCAPTCHA Enterprise の違いについては、機能の比較をご覧ください。

App Check は reCAPTCHA Enterprise スコアベースのサイトキーを使用するため、ユーザーには見えないことに注意してください。 reCAPTCHA Enterprise プロバイダーでは、ユーザーがいつでも課題を解決する必要はありません。

独自のカスタムプロバイダーで App Check を使用する場合は、「カスタム App Check プロバイダーを実装する」を参照してください。

1. Firebase プロジェクトをセットアップする

まだ行っていない場合は、JavaScript プロジェクトに Firebase を追加します。
Cloud コンソールのreCAPTCHA Enterpriseセクションを開き、次の操作を行います。
1. reCAPTCHA Enterprise API を有効にするよう求められた場合は、有効にしてください。
2. Websiteタイプのキーを作成します。 Web アプリをホストするドメインを指定する必要があります。 [チェックボックスチャレンジを使用] オプションはオフのままにします。
Firebase コンソールのApp Checkセクションで、reCAPTCHA Enterprise プロバイダで App Check を使用するようにアプリを登録します。前の手順で取得したサイトキーを提供する必要があります。
通常、プロジェクトのすべてのアプリを登録する必要があります。これは、Firebase プロダクトの適用を有効にすると、登録されたアプリのみがプロダクトのバックエンドリソースにアクセスできるようになるためです。
オプション: アプリの登録設定で、プロバイダーによって発行された App Check トークンのカスタム Time-to-Live (TTL) を設定します。 TTL は 30 分から 7 日間の任意の値に設定できます。この値を変更するときは、次のトレードオフに注意してください。
- セキュリティ: TTL を短くすると、漏洩または傍受されたトークンが攻撃者によって悪用される可能性があるウィンドウが減少するため、セキュリティが強化されます。
- パフォーマンス: TTL が短いほど、アプリはより頻繁に構成証明を実行します。アプリの構成証明プロセスは、実行されるたびにネットワークリクエストに待機時間を追加するため、短い TTL はアプリのパフォーマンスに影響を与える可能性があります。
- クォータとコスト: TTL を短くし、再認証を頻繁に行うと、クォータがより早く枯渇します。また、有料サービスの場合は、より多くのコストがかかる可能性があります。割り当てと制限を参照してください。
デフォルトの TTL である1 時間は、ほとんどのアプリにとって妥当です。 App Check ライブラリは、TTL 期間の約半分でトークンを更新することに注意してください。

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

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

3.アプリチェックの初期化

Firebase サービスにアクセスする前に、次の初期化コードをアプリケーションに追加します。 Cloud コンソールで作成した reCAPTCHA Enterprise サイトキーをactivate()に渡す必要があります。

Web version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck, ReCaptchaEnterpriseProvider } = require("firebase/app-check");

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

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */),
  isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});

Web version 8

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

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to activate().
const appCheck = firebase.appCheck();
appCheck.activate(
  new firebase.appCheck.ReCaptchaEnterpriseProvider(
    /* reCAPTCHA Enterprise site key */
  ),
  true // Set to true to allow auto-refresh.
);

次のステップ

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

更新されたクライアントアプリは、Firebase へのすべてのリクエストとともに App Check トークンの送信を開始しますが、Firebase コンソールの App Check セクションで適用を有効にするまで、Firebase 製品ではトークンが有効である必要はありません。

メトリックを監視し、適用を有効にする

ただし、強制を有効にする前に、それによって既存の正当なユーザーが混乱しないことを確認する必要があります。一方、アプリリソースの不審な使用が見られる場合は、すぐに適用を有効にすることをお勧めします。

この決定を行うために、使用しているサービスの App Check 指標を確認できます。

Realtime Database、Cloud Firestore、Cloud Storage のApp Check リクエストメトリックを監視します。
Cloud Functions の App Check リクエストメトリックをモニタリングします。

App Check の実施を有効にする

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

Realtime Database、Cloud Firestore、Cloud Storage に対してApp Checkの適用を有効にします。
Cloud Functions の App Check 適用を有効にします。

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

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

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

費用についてのご注意

App Check は、Web アプリを実行しているブラウザーが App Check トークンを更新するたびに、ユーザーの応答トークンを検証するための評価を作成します。プロジェクトは、無料の割り当てを超えて作成された評価ごとに課金されます。詳しくは、 reCAPTCHA Enterprise の料金をご覧ください。

デフォルトでは、Web アプリはこのトークンを1 時間ごとに 2 回更新します。アプリが App Check トークンを更新する頻度 (つまり、新しい評価が作成される頻度) を制御するには、それらの TTL を構成します。