Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

使用 Web 應用中的 App Check 保護非 Firebase 資源

您可以使用 App Check 保護應用的非 Firebase 資源,例如自託管後端。為此,您需要執行以下兩項操作:

  • 修改您的應用程序客戶端以將 App Check 令牌與每個請求一起發送到您的後端,如本頁所述。
  • 修改後端需要一個有效的應用程序令牌檢查每個請求,如在從定制後端驗證應用程序檢查令牌

在你開始之前

添加應用程序檢查到您的應用程序,將使用默認的reCAPTCHA V3提供商,或自定義提供

使用後端請求發送 App Check 令牌

在您的應用程序客戶端,每個請求之前,獲得一個有效的,未過期的,應用程序檢查與令牌appCheck().getToken()如有必要,App Check 庫將刷新令牌。

獲得有效令牌後,將其與請求一起發送到後端。你是如何做到這一點的細節是你的,但不發送應用程序檢查令牌作為網址的一部分,包括在查詢參數,因為這使得他們很容易受到意外洩漏和攔截。以下示例在自定義 HTTP 標頭中發送令牌,這是推薦的方法。

網頁版 9

const { initializeAppCheck, getToken } = require('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.
};

網頁版 8

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.
};