ウェブアプリで reCAPTCHA v3 を使用して App Check を使ってみる

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

reCAPTCHA v3 はユーザーに表示されません。reCAPTCHA v3 プロバイダがユーザーに課題の解決を求めることはありません。詳しくは、reCAPTCHA v3 のドキュメントをご覧ください。

独自のカスタムプロバイダで App Check を使用する場合は、App Check カスタムプロバイダを実装するをご覧ください。

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

Firebase を JavaScript プロジェクトに追加します（まだ行っていない場合）。
reCAPTCHA v3 にサイトを登録して、reCAPTCHA v3 のサイトキーと秘密鍵を取得します。
Firebase コンソールで [App Check] セクションに移動し、reCAPTCHA プロバイダで App Check を使用するようにアプリを登録します。前の手順で取得した秘密鍵を指定する必要があります。

Firebase プロダクトで適用を有効にすると、プロダクトのバックエンドリソースにアクセスできるのは登録されているアプリのみとなるため、通常、プロジェクトのアプリすべてを登録する必要があります。
省略可: アプリの登録設定で、プロバイダが発行する App Check トークンにカスタム有効期間（TTL）を設定します。TTL は 30 分から 7 日までの任意の値に設定できます。この値を変更する場合は、次のトレードオフに注意してください。
- セキュリティ: TTL が短いほど、漏えいしたトークンや傍受されたトークンが攻撃者によって悪用される可能性が低減するため、セキュリティが向上します。
- パフォーマンス: TTL が短いほど、アプリで証明書の取得が頻繁に行われます。アプリで証明書が取得されるたびにネットワークリクエストのレイテンシが増加するため、TTL が短いと、アプリのパフォーマンスに影響する可能性があります。
- 割り当てとコスト: TTL を短くすると、証明書の取得が頻繁に発生し、割り当てが早く消費されます。有料サービスの場合は、費用が増加する可能性があります。割り当てと上限をご覧ください。
通常は、デフォルトの TTL（1 日）で十分です。App Check ライブラリは TTL の約半分でトークンを更新します。

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

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

3. App Check を初期化する

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

ウェブ向けのモジュラー API

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "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
});appcheck_initialize.js

ウェブ向けの名前空間 API

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、Authentication（ベータ版）で App Check リクエストの指標をモニタリングする。
Cloud Functions で App Check リクエストの指標をモニタリングする。

App Check の適用を有効にする

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

Realtime Database、Cloud Firestore、Cloud Storage、Authentication（ベータ版）で App Check の適用を有効にする。
Cloud Functions で App Check の適用を有効にする。

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

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

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