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

本頁面說明如何在網頁應用程式中，使用 reCAPTCHA v3 供應商。啟用 App Check 可以協助確保 應用程式可以存取專案的 Firebase 資源。查看 這項功能的總覽。

請注意，使用者不會看到 reCAPTCHA v3。reCAPTCHA v3 供應商不會 會要求使用者隨時解決驗證問題詳情請參閱 reCAPTCHA v3 說明文件。

如要將 App Check 與自訂服務供應商搭配使用，請參閱 導入自訂 App Check 供應商。

1. 設定 Firebase 專案

  1. 將 Firebase 新增至您的 JavaScript 專案 (如果您尚未這麼做) 已完成其他驗證步驟

  2. 為您的網站註冊 reCAPTCHA v3，並取得 您的 reCAPTCHA v3 網站金鑰和密鑰。

  3. 在以下位置註冊應用程式，以便透過 reCAPTCHA 供應商使用 App Check： App Check (應用程式檢查) Firebase 控制台。您需要提供先前取得的密鑰 先前的步驟

    通常您需要註冊專案的所有應用程式，因為 允許對 Firebase 產品強制執行；只有已註冊的應用程式可以 存取產品的後端資源

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

    • 安全性：較短的存留時間可提高安全性，因為這麼做能減少 出現安全漏洞，可能導致權杖遭到洩漏或攔截 攻擊者
    • 效能：縮短存留時間 (TTL) 越短，應用程式就越能執行認證 經常更新因為應用程式認證程序會增加網路延遲時間 因此短暫的存留時間 (TTL) 可能會影響效能
    • 配額與費用：縮短存留時間 (TTL) 和頻繁的重新認證作業，皆會破壞您的 配額更快，而如果是付費服務，費用可能更高。 請參閱配額與上限。

    預設存留時間 1 天 對大多數應用程式而言都是合理的做法。請注意，系統會重新整理 App Check 程式庫 權杖的 75 倍。

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 控制台。

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

不過，啟用強制執行功能之前，請先確認這項操作不會 幹擾現有的合法使用者另一方面，如果您發現 如果您對應用程式資源都很可疑，不妨啟用強制執行功能

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

啟用強制執行 App Check

瞭解 App Check 對使用者的影響後，您就能做好準備 下一步，您可以啟用 App Check 強制執行功能：

在偵錯環境中使用 App Check

只要在應用程式註冊 App Check 後， 應用程式所在的環境中，App Check 通常不會歸類為有效應用程式。 或是在持續整合 (CI) 環境中儲存在本機 您就能為應用程式建立偵錯版本，該應用程式會使用 App Check 偵錯供應器，而非真正的認證提供者。

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