Catch up on highlights from Firebase at Google I/O 2023. Learn more

開始在 Web 應用程序中使用帶有 reCAPTCHA v3 的 App Check

此頁面向您展示如何使用內置的 reCAPTCHA v3 提供程序在 Web 應用程序中啟用 App Check。當您啟用 App Check 時，您有助於確保只有您的應用可以訪問您項目的 Firebase 資源。請參閱此功能的概述。

reCAPTCHA v3 是一項免費服務。 App Check 還支持reCAPTCHA Enterprise ，這是一項免費配額的付費服務。要了解 reCAPTCHA v3 和 reCAPTCHA Enterprise 之間的差異，請參閱功能比較。

請注意，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 會影響應用的性能。
    • 配額和成本：較短的 TTL 和頻繁的重新證明會更快地耗盡您的配額，而對於付費服務，可能會花費更多。請參閱配額和限制。

    1 天的默認 TTL 對於大多數應用程序來說是合理的。請注意，App Check 庫會在 TTL 持續時間的一半左右刷新令牌。

2.將App Check庫添加到您的應用中

如果您還沒有將 Firebase 添加到您的網絡應用程序。請務必導入 App Check 庫。

3.初始化App Check

在您訪問任何 Firebase 服務之前，將以下初始化代碼添加到您的應用程序中。您需要將您在 reCAPTCHA 控制台中創建的 reCAPTCHA站點密鑰傳遞給activate() 。

Web version 9

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 version 8

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 庫後，部署它。

更新後的客戶端應用程序將開始發送 App Check 令牌及其向 Firebase 發出的每個請求，但 Firebase 產品不會要求令牌有效，直到您在 Firebase 控制台的 App Check 部分啟用強制執行。

監控指標並啟用強制執行

但是，在您啟用強制執行之前，您應該確保這樣做不會干擾您現有的合法用戶。另一方面，如果您發現對應用資源的可疑使用，您可能希望盡快啟用強制措施。

為幫助做出此決定，您可以查看您使用的服務的 App Check 指標：

啟用 App Check 強制執行

當您了解 App Check 將如何影響您的用戶並準備好繼續操作時，您可以啟用 App Check 強制執行：

在調試環境中使用 App Check

如果在為 App Check 註冊您的應用程序後，您希望在 App Check 通常不會歸類為有效的環境中運行您的應用程序，例如在開發期間在本地運行，或者在持續集成 (CI) 環境中運行，您可以創建使用 App Check 調試提供程序而不是真正的證明提供程序的應用程序調試版本。

請參閱在 Web 應用程序中將 App Check 與調試提供程序一起使用。