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

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

如要將 App Check 與其中一個內建供應器搭配使用，請參閱App Check 與 reCAPTCHA Enterprise 的說明文件。

事前準備

如果尚未將 Firebase 新增至 JavaScript 專案，請將 Firebase 新增至 JavaScript 專案。
實作自訂 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 產品不會要求權杖必須有效，除非您在 Firebase 控制台的 App Check 部分啟用強制執行功能。

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

不過，啟用違規處置前，請先確認這項處置不會影響現有的合法使用者。另一方面，如果您發現應用程式資源遭到可疑使用，可能需要盡快啟用強制執行機制。

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

啟用 App Check 強制執行功能

瞭解 App Check 對使用者的影響，並準備繼續執行時，您可以啟用 App Check 強制執行機制：

為 Data Connect、Vertex AI in Firebase、Realtime Database、Cloud Firestore、Cloud Storage、Authentication、Google 身分識別服務 (適用於 iOS)、Maps JavaScript API 和 Places API (新版) 啟用 App Check 強制執行。
為 Cloud Functions 啟用 App Check 強制執行設定。

在偵錯環境中使用 App Check

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

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