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

WebアプリでreCAPTCHAv3を使用してアプリチェックを有効にする

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

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

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

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

1.Firebaseプロジェクトを設定します

まだ追加していない場合は、JavaScriptプロジェクトにFirebaseを追加します。
サイトをreCAPTCHAv3に登録し、 reCAPTCHAv3サイトキーと秘密キーを取得します。
Firebaseコンソールの[アプリチェック]セクションで、reCAPTCHAプロバイダーにアプリチェックを使用するようにアプリを登録します。前の手順で取得した秘密鍵を提供する必要があります。
Firebase製品の適用を有効にすると、登録済みのアプリのみが製品のバックエンドリソースにアクセスできるようになるため、通常はプロジェクトのすべてのアプリを登録する必要があります。
オプション：アプリ登録設定で、プロバイダーによって発行されたアプリチェックトークンのカスタム存続時間（TTL）を設定します。 TTLは30分から7日の間の任意の値に設定できます。この値を変更するときは、次のトレードオフに注意してください。
- セキュリティ：TTLを短くすると、リークまたはインターセプトされたトークンが攻撃者によって悪用される可能性のあるウィンドウが減少するため、セキュリティが強化されます。
- パフォーマンス：TTLが短いほど、アプリはより頻繁に認証を実行します。アプリの認証プロセスは、実行されるたびにネットワークリクエストにレイテンシを追加するため、TTLが短いとアプリのパフォーマンスに影響を与える可能性があります。
- クォータとコスト：TTLが短く、再認証が頻繁に行われると、クォータがより早く使い果たされます。有料サービスの場合は、コストが高くなる可能性があります。クォータと制限を参照してください。
ほとんどのアプリでは、デフォルトのTTLである1日が妥当です。 App Checkライブラリは、TTL期間の約半分でトークンを更新することに注意してください。

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

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

3.アプリチェックを初期化します

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

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へのすべてのリクエストとともにアプリチェックトークンの送信を開始しますが、Firebase製品では、Firebaseコンソールの[アプリチェック]セクションで適用を有効にするまで、トークンが有効である必要はありません。詳細については、次の2つのセクションを参照してください。

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

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

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

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

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

アプリチェックメトリックページのスクリーンショット

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

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

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

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

クラウド機能

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

{
  "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）、およびCloud Storageの適用を有効にするには：

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

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

クラウド機能

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

次のステップ

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

Webアプリのデバッグプロバイダーでのアプリチェックの使用を参照してください。