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

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 產品不需要權杖 您必須在App Check Firebase 控制台。

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

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

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

啟用「App Check」強制執行功能

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

在偵錯環境中使用 App Check

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

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