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

您可以使用 App Check 保護應用程式的非 Firebase 資源，例如自行管理的後端。如要這樣做，您必須同時完成下列兩項操作：

  • 修改應用程式用戶端，以便在每次向後端傳送要求時一併傳送 App Check 權杖，如本頁所述。
  • 修改後端，讓每個要求要求有效的 App Check 權杖，如從自訂後端驗證 App Check 權杖一節所述。

事前準備

使用 reCAPTCHA 企業供應商或自訂提供者，將 App Check 新增至應用程式。

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

在應用程式用戶端中，請在每次要求前，使用 appCheck().getToken() 取得有效且未過期的 App Check 權杖。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);