このページでは、組み込みの 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()
に渡す必要があります。
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 });
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);
次のステップ
App Check ライブラリがアプリにインストールされたら、デプロイします。
更新されたクライアント アプリは、Firebase にリクエストを送信するたびに App Check トークンを送信しますが、Firebase コンソールの App Check セクションで適用を有効にするまで、Firebase プロダクトは有効なトークンを必要としません。
指標をモニタリングして適用を有効にする
ただし、適用を有効にする前に、既存の正規ユーザーを中断しないように対策を行う必要があります。一方、アプリリソースの不審な使用に気づいた場合は、すぐに適用を有効にすることもできます。
この決定を行うことができるように、使用するサービスの App Check 指標を確認します。
- Data Connect、Vertex AI in Firebase、Realtime Database、Cloud Firestore、Cloud Storage、Authentication、Google Identity for iOS、Maps JavaScript API、Places API(新規)の App Check リクエスト指標をモニタリングします。
- Cloud Functions に対して App Check リクエスト指標をモニタリングします。
App Check 適用を有効にする
App Check がユーザーに与える影響を理解し、続行する準備ができたら、App Check の適用を有効にできます。
- Data Connect、Vertex AI in Firebase、Realtime Database、Cloud Firestore、Cloud Storage、Authentication、Google Identity for iOS、Maps JavaScript API、Places API(新規)の App Check の適用を有効にします。
- Cloud Functions に対して App Check の適用を有効にします。
デバッグ環境で App Check を使用する
アプリを App Check に登録した後に、App Check が通常は有効として分類しない環境(ローカルの開発環境や継続的インテグレーション(CI)環境など)でアプリを実行する場合は、実際の証明書プロバイダの代わりに App Check デバッグ プロバイダを使用するアプリのデバッグビルドを作成できます。
ウェブアプリのデバッグ プロバイダで App Check を使用するをご覧ください。