在網頁應用程式中使用 App Check 保護非 Firebase 資源

您可以保護應用程式的非 Firebase 資源，例如自行管理的後端。 與 App Check 整合如要這麼做，您需要執行這兩項操作：

  • 修改應用程式用戶端，傳送 App Check 權杖和每個要求 如本頁所述，將 VM 傳送至您的後端。
  • 修改後端，在每次要求中要求有效的 App Check 權杖。 ，詳情請參閱「從自訂後端驗證 App Check 權杖」一文。

事前準備

您可以使用以下程式碼，將 App Check 新增至應用程式： reCAPTCHA Enterprise 供應商 或自訂供應商

透過後端要求傳送 App Check 權杖

在應用程式用戶端中，每次要求前取得有效、未過期的 App Check 產生符記appCheck().getToken()App Check 程式庫會重新整理 符記

取得有效的權杖後，請將該權杖與要求傳送至後端。 您可以自行決定要如何完成這項作業，但請勿傳送 App Check 權杖是網址的一部分，包括查詢參數中，因為 容易造成意外的資料外洩和攔截下列 「範例」會透過自訂 HTTP 標頭傳送權杖， 。

Web

import { initializeAppCheck, getToken } from 'firebase/app-check';

const appCheck = initializeAppCheck(
    app,
    { provider: provider } // ReCaptchaV3Provider or CustomProvider
);

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};
appcheck_nonfirebase.js

Web

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};
index.js

重播防護措施 (Beta 版)

向已啟用的端點傳送要求時 重播防護措施 使用 getLimitedUseToken() (而非 getToken()) 取得權杖：

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);