開始在網頁應用程式中搭配使用 App Check 和 reCAPTCHA v3

本頁面說明如何使用內建的 reCAPTCHA 第 3 版供應商，在網頁應用程式中啟用 App Check。啟用 App Check 後，只有您的應用程式才能存取專案的 Firebase 資源。請參閱這項功能的總覽。

請注意，使用者不會看到 reCAPTCHA v3。reCAPTCHA v3 供應商絕不會要求使用者解決任何問題。請參閱 reCAPTCHA v3 說明文件。

如要搭配使用 App Check 和自訂供應商，請參閱實作自訂 App Check 供應商。

1. 設定 Firebase 專案

  1. 如果您尚未將 Firebase 新增至 JavaScript 專案，請先新增。

  2. 為網站註冊 reCAPTCHA v3，並取得 reCAPTCHA v3 網站金鑰和密鑰。

  3. 在 Firebase 控制台的「App Check」部分，為應用程式註冊透過 reCAPTCHA 供應商使用 App Check。您需要提供在上一個步驟中取得的密鑰。

    您通常需要註冊專案的所有應用程式，因為一旦啟用 Firebase 產品的強制執行功能，只有已註冊的應用程式才能存取產品的後端資源。

  4. 選用：在應用程式註冊設定中，為供應商核發的 App Check 權杖設定自訂存留時間 (TTL)。您可以將 TTL 設定為介於 30 分鐘至 7 天之間的任何值。變更這個值時，請注意下列取捨：

    • 安全性：存留時間越短，安全性就越高，因為這樣可縮短攻擊者濫用外洩或遭攔截權杖的時間範圍。
    • 效能：TTL 較短表示應用程式會更頻繁地執行認證。應用程式認證程序每次執行時，都會增加網路要求延遲時間，因此 TTL 較短可能會影響應用程式效能。
    • 配額和費用：TTL 較短且經常重新認證會更快耗盡配額，如果是付費服務，可能還會增加費用。詳情請參閱「配額與限制」。

    大多數應用程式都適用預設的 1 天存留時間。請注意，App Check 程式庫會在 TTL 時間長度的一半左右重新整理權杖。

2. 將 App Check 程式庫新增至應用程式

如果尚未將 Firebase 新增至網頁應用程式，請先新增。請務必匯入 App Check 程式庫。

3. 初始化 App Check

在存取任何 Firebase 服務之前，請將下列初始化程式碼加入應用程式。您需要將在 reCAPTCHA 控制台中建立的 網站金鑰傳遞至 activate()。

Web

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

Web

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」App Check 部分啟用強制執行功能，Firebase 產品才會要求權杖有效。

監控指標並啟用強制執行功能

不過，啟用強制執行前，請先確認這麼做不會影響現有的合法使用者。另一方面，如果發現應用程式資源有可疑的使用情形，建議盡快啟用強制執行功能。

如要協助做出這項決定，您可以查看所用服務的 App Check 指標：

啟用App Check強制執行功能

瞭解 App Check 對使用者的影響後，即可啟用 App Check 強制執行：

  • 針對 Data Connect、Firebase AI Logic、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 和偵錯供應器」。