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

本頁面說明如何使用 reCAPTCHA Enterprise 提供者,在網頁應用程式中啟用 App Check。啟用 App Check 後,只有您的應用程式才能存取專案的 Firebase 資源。請參閱這項功能的總覽

請注意,App Check 使用 reCAPTCHA Enterprise 計分型網站金鑰,因此使用者不會看到 reCAPTCHA。reCAPTCHA Enterprise 供應商絕不會要求使用者解決任何驗證問題。

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

1. 設定 Firebase 專案

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

  2. 開啟 Cloud 控制台的「reCAPTCHA Enterprise」部分,然後執行下列操作:

    1. 如果系統提示您啟用 reCAPTCHA Enterprise API,請啟用。
    2. 建立「網站」類型的金鑰。您必須指定代管網頁應用程式的網域,並將「使用核取方塊挑戰」選項取消選取
  3. Firebase 控制台的「App Check」部分,為應用程式註冊透過 reCAPTCHA Enterprise 供應商使用 App Check。您需要提供在上一個步驟中取得的網站金鑰。

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

  4. 選用:在應用程式註冊設定中,為供應商核發的 App Check 權杖設定自訂存留時間 (TTL)。您可以將 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 程式庫後,即可部署。

更新後的用戶端應用程式會開始在每次向 Firebase 發出的要求中,一併傳送 App Check 權杖,但您必須在 Firebase 控制台的「App Check」App Check 部分啟用強制執行功能,Firebase 產品才會要求權杖有效。

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

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

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

啟用App Check強制執行功能

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

  • 針對 Data ConnectFirebase AI LogicRealtime DatabaseCloud FirestoreCloud StorageAuthentication、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 和偵錯供應器」。

費用注意事項

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

根據預設,網頁應用程式每 1 小時會重新整理這個權杖兩次。如要控管應用程式重新整理 App Check 權杖的頻率 (也就是建立新評估的頻率),請設定權杖的存留時間