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

本頁面說明如何使用 reCAPTCHA Enterprise 供應器，在網頁應用程式中啟用 App Check。啟用 App Check 後，您就能確保只有您的應用程式可以存取專案的 Firebase 資源。請參閱這項功能的總覽。

請注意，App Check 使用 reCAPTCHA Enterprise 計分型網站金鑰，因此使用者看不到。reCAPTCHA Enterprise 供應商不會要求使用者隨時回答驗證問題。

如果您想將 App Check 與自訂供應器搭配使用，請參閱「實作自訂 App Check 供應器」一文。

1. 設定 Firebase 專案

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

  2. 開啟 Cloud 控制台的「reCAPTCHA Enterprise」專區，然後執行下列操作：

    1. 如果系統提示您啟用 reCAPTCHA Enterprise API，請按照提示操作。
    2. 建立「網站」類型的金鑰。您需要指定代管網頁應用程式的網域。請取消選取「使用核取方塊驗證」選項。

  3. 在 Firebase 控制台的 App Check 專區中，為應用程式註冊透過 reCAPTCHA Enterprise 供應商使用 App Check。您必須提供先前步驟中取得的網站金鑰。

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

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

    • 安全性：縮短存留時間可提供更強的安全性，因為這樣一來，攻擊者就無法在較短的時間內濫用遭洩漏或攔截的權杖。
    • 效能：TTL 越短，應用程式執行認證的頻率就越高。由於應用程式認證程序每次執行時都會為網路要求增加延遲時間，因此 TTL 時間過短可能會影響應用程式效能。
    • 配額與費用：縮短存留時間 (TTL) 和頻繁的重新認證作業會更快消耗配額。如果是付費服務，費用可能會增加。請參閱「配額與限制」。

    預設的 TTL 為 1 小時，適用於大多數應用程式。請注意，App Check 程式庫會在 TTL 時間長度的約一半時間內重新整理權杖。

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

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

3. 初始化 App Check

請先在應用程式中加入下列初始化程式碼，再存取任何 Firebase 服務。您必須將在 Cloud 控制台中建立的 reCAPTCHA Enterprise 網站金鑰傳送至 activate()。

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";

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

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */),
  isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});

Web

firebase.initializeApp({
  // Your Firebase configuration object.
});

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to activate().
const appCheck = firebase.appCheck();
appCheck.activate(
  new firebase.appCheck.ReCaptchaEnterpriseProvider(
    /* reCAPTCHA Enterprise site key */
  ),
  true // Set to true to allow auto-refresh.
);

後續步驟

在應用程式中安裝 App Check 程式庫後，請部署程式庫。

更新後的用戶端應用程式會開始傳送 App Check 權杖，並附帶每項對 Firebase 提出的要求，但 Firebase 產品不會要求權杖有效，除非您在 Firebase 控制台的 App Check 部分啟用強制執行功能。

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

不過，在強制執行之前，您應先確認這樣做不會影響現有的合法使用者。另一方面，如果您發現應用程式資源遭到濫用，建議您盡早啟用強制執行功能。

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

啟用 App Check 強制執行功能

瞭解 App Check 對使用者的影響，您已準備好進行後續步驟時，可以啟用 App Check 強制執行：

在偵錯環境中使用 App Check

如果您在為應用程式註冊 App Check 後，想在 App Check 通常不會歸類為有效的環境中執行應用程式，例如在開發期間的本機或持續整合 (CI) 環境中，您可以建立應用程式的偵錯版本，使用 App Check 偵錯提供者，而非實際的認證提供者。

請參閱「在網頁應用程式中搭配偵錯提供者使用 App Check」。

費用注意事項

App Check 會代表您建立評估作業，在執行網頁應用程式的瀏覽器每次重新整理 App Check 權杖時驗證使用者的回應權杖。每項超出免費配額的評估作業都會產生費用。詳情請參閱 reCAPTCHA 定價。

根據預設，您的網頁應用程式會每 1 小時重新整理此權杖兩次。如要控制應用程式更新 App Check 權杖的頻率 (以及新評估的建立頻率)，請設定存留時間。