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

本頁說明如何在網頁應用程式中啟用 App Check，並使用自訂 App Check 提供者。啟用 App Check 後，只有您的應用程式可以存取專案的 Firebase 資源，有助於確保安全。

如要搭配內建供應商使用 App Check，請參閱 App Check 與 reCAPTCHA Enterprise 搭配使用的說明文件。

事前準備

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

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

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

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

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

啟用App Check強制執行功能

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

  • 針對 Data Connect、Firebase AI Logic、Realtime Database、Cloud Firestore、Cloud Storage、Authentication、Google Identity for iOS、Maps JavaScript API 和 Places API (新版)，啟用 App Check 強制執行。
  • 為 Cloud Functions 啟用 App Check 強制執行功能。

在偵錯環境中使用 App Check

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

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