開始在網頁應用程式中，搭配使用 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 專案，請先完成這項操作。

  2. 開啟 Cloud 控制台的 reCAPTCHA Enterprise 部分，然後執行下列操作：

    1. 如果系統提示您啟用 reCAPTCHA Enterprise API，請按照提示操作。
    2. 建立網站類型金鑰。您必須指定代管網頁應用程式的網域。請將「使用核取方塊驗證問題」選項保持在未選取的狀態。

  3. 在 Firebase 控制台的 App Check 部分，為應用程式註冊使用 App Check，以便與 reCAPTCHA Enterprise 供應商搭配使用。您需要提供在上一個步驟中取得的網站金鑰。

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

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

    • 安全性：縮短存留時間越短，安全性就越高，越能避免攻擊者濫用權杖。
    • 效能：縮短存留時間 (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 控制台的「App Check」部分啟用強制執行後，Firebase 產品就不會要求權杖有效。

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

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

為做出此決定，您可以查看所用服務的 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 權杖的頻率 (以及新評估的建立頻率)，請設定存留時間。