使用 App Check 保护非 Firebase 资源（Web 应用）

您可以使用 App Check 来保护应用的非 Firebase 资源，例如自托管的后端。为此，您需要执行以下两项操作：

  • 修改您的应用客户端，以将 App Check 令牌随每个请求一起发送到后端，如本页所述。
  • 按照从自定义后端验证 App Check 令牌中所述，修改后端以要求将有效的 App Check 令牌随每个请求一起发送。

准备工作

使用 reCAPTCHA Enterprise 提供方或自定义提供方将 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);