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

本頁面說明如何使用內建的 reCAPTCHA 第 3 版供應商，在 Web 應用程式中啟用 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」部分，為應用程式註冊透過 reCAPTCHA 供應商使用 App Check。您需要提供在上一個步驟中取得的密鑰。

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

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

    • 安全性：存留時間越短，安全性就越高，因為這樣可縮短攻擊者濫用外洩或遭攔截權杖的時間範圍。
    • 效能：TTL 較短表示應用程式會更頻繁地執行認證。應用程式認證程序每次執行時，都會增加網路要求延遲時間，因此 TTL 較短可能會影響應用程式效能。
    • 配額和費用：TTL 較短且經常重新認證會更快耗盡配額，如果是付費服務，可能還會增加費用。詳情請參閱「配額與限制」。

    大多數應用程式都適用預設的 1 天存留時間。請注意，App Check 程式庫會在 TTL 時間長度的一半左右重新整理權杖。

調整進階設定 (選用)

使用者造訪網路應用程式時，reCAPTCHA v3 會評估使用者互動造成的風險程度，並傳回介於 0.0 和 1.0 之間的分數；1.0 很可能是良好的互動，0.0 很可能是機器人。App Check 可讓您設定應用程式風險門檻，以便調整對這類風險的容忍度。

在多數用途中，建議使用預設門檻值 0.5。如果您的用途需要調整，可以在每個 Web 應用程式的 Firebase 控制台，透過 App Check 區段進行設定。

詳細資料

App Check 會使用您設定的應用程式風險門檻，做為判斷使用者互動是否正當的最低 reCAPTCHA v3 分數。如果 reCAPTCHA v3 分數嚴格低於您設定的應用程式風險門檻，系統就會拒絕要求。調整應用程式風險門檻時，請注意下列事項：

  • 如要監控網頁應用程式的 reCAPTCHA v3 分數分布情形，請前往 reCAPTCHA 管理控制台，然後選取對應網頁應用程式的網站。

  • 如果應用程式風險容忍度偏低，請將滑桿向左移動，提高應用程式風險門檻。

    • 不建議將值設為 1.0，因為如果有合法使用者不符合此高信任度門檻，也可能無法獲得存取權。

  • 如果應用程式風險容忍度高，請將滑桿向右移動，降低應用程式風險門檻。

    • 不建議使用 0.0，因為這項設定會停用濫用保護措施。

詳情請參閱 reCAPTCHA 第 3 版說明文件。

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 程式庫後，即可部署。

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

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

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

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

啟用App Check強制執行功能

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

在偵錯環境中使用 App Check

如果您已為應用程式註冊 App Check，但想在 App Check 通常不會歸類為有效的環境中執行應用程式 (例如在本機開發期間，或從持續整合 (CI) 環境執行)，可以建立應用程式的偵錯版本，使用 App Check 偵錯供應器，而非實際的認證供應器。

請參閱「在網頁應用程式中使用 App Check 和偵錯供應器」。