開始在網頁應用程式上透過自訂供應商使用 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()。

Web

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

Web

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 服務：

Web

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

Web

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 指標： 您使用的服務：

啟用強制執行 App Check

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

在偵錯環境中使用 App Check

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

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