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

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

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

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

reCAPTCHA v3 はユーザーには表示されないことに注意してください。 reCAPTCHA v3 プロバイダーでは、ユーザーがいつでも課題を解決する必要はありません。 reCAPTCHA v3 ドキュメントを参照してください。

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

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

まだ行っていない場合は、JavaScript プロジェクトに Firebase を追加します。
サイトを reCAPTCHA v3 に登録し、reCAPTCHA v3 サイトキーとシークレットキーを取得します。
Firebase コンソールのApp Checkセクションで、reCAPTCHA プロバイダーを使用して 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 サービスにアクセスする前に、次の初期化コードをアプリケーションに追加します。 reCAPTCHA コンソールで作成した reCAPTCHAサイトキーをactivate()に渡す必要があります。

Web version 9

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

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

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // 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();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // 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 指標を確認できます。

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 を使用するを参照してください。