開始在網頁應用程式中搭配使用 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 專區中，為應用程式註冊使用 App Check 和 reCAPTCHA 供應商的服務。您必須提供先前步驟中取得的密鑰。

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

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

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

    預設的存留時間為 1 天，這對大多數應用程式來說是合理的值。請注意，App Check 程式庫會在 TTL 時間長度的約一半時間內重新整理權杖。

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

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

3. 初始化 App Check

先將下列初始化程式碼加入應用程式，再存取任何 Firebase 服務。您必須將在 reCAPTCHA 主控台建立的 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 程式庫後，請部署程式庫。

更新後的用戶端應用程式會開始傳送 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」。