開始在網頁應用程式上透過自訂供應商使用 App Check

本頁面說明如何使用您的自訂 App Check 供應商在網頁應用程式中啟用 App Check。啟用 App Check 可以確保只有應用程式可以存取專案的 Firebase 資源。

如果您想將 App Check 與其中一個內建供應商搭配使用，請參閱透過 reCAPTCHA Enterprise 使用 App Check 的說明文件。

事前準備

1. 在應用程式中加入 App Check 程式庫

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

2. 建立 App Check 提供者物件

為自訂提供者建立 App Check 提供者物件。這個物件必須具備 getToken() 方法，此方法會收集自訂 App Check 供應商需要的驗證用資訊，並傳送至權杖取得服務，換取 App Check 權杖。App Check SDK 會處理權杖快取，因此請一律在 getToken() 實作中取得新權杖。

網頁模組 API

import { CustomProvider } from "firebase/app-check";

const appCheckCustomProvider = new CustomProvider({
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
});
appcheck_custom_provider.js

網路命名空間 API

const appCheckCustomProvider = {
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
};
index.js

3. 初始化 App Check

請先將下列初始化程式碼加入應用程式，然後再存取任何 Firebase 服務：

網頁模組 API

import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

const appCheck = initializeAppCheck(app, {
  provider: appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true    
});
appcheck_initialize_custom_provider.js

網路命名空間 API

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
appCheck.activate(
  appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);
index.js

後續步驟

在應用程式中安裝 App Check 程式庫後，請部署程式庫。

更新後的用戶端應用程式將開始傳送 App Check 權杖，以及對 Firebase 發出的每個要求，但您在 Firebase 控制台的「App Check」部分啟用強制執行後，Firebase 產品就不會要求權杖有效。

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

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

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

啟用強制執行 App Check

瞭解 App Check 會對使用者造成哪些影響，您已準備好進行後續步驟時，可以啟用 App Check 強制執行功能：

在偵錯環境中使用 App Check

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

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