使用入门：将 App Check 与 reCAPTCHA v3 搭配使用（Web 应用）

本页介绍了如何使用内置的 reCAPTCHA v3 提供方在 Web 应用中启用 App Check。启用 App Check 有助于确保只有您的应用可以访问项目的 Firebase 资源。请查看此功能的概览。

请注意，reCAPTCHA v3 对用户不可见。reCAPTCHA v3 提供程序永远不会要求用户进行验证。请参阅 reCAPTCHA v3 文档。

如果您希望将 App Check 与自己的自定义提供方搭配使用，请参阅实现自定义 App Check 提供方。

1. 设置您的 Firebase 项目

  1. 将 Firebase 添加到您的 JavaScript 项目（如果尚未添加）。

  2. 向 reCAPTCHA v3 注册您的网站，并获取 reCAPTCHA v3 网站密钥和 Secret 密钥。

  3. 在 Firebase 控制台中的 App Check 部分中注册您的应用，以便将 App Check 与 reCAPTCHA 提供方搭配使用。您需要提供上一步中获取的 Secret 密钥。

    您通常需要注册项目的所有应用，因为在您为 Firebase 产品启用强制执行后，只有注册的应用才能访问产品的后端资源。

  4. 可选：在应用注册设置中，为提供方颁发的 App Check 令牌设置自定义存留时间 (TTL)。您可以将 TTL 设置为 30 分钟到 7 天之间的任何值。更改此值时，请注意权衡以下几个方面：

    • 安全性：较短的 TTL 可以提供更强的安全性，因为它可以缩短攻击者可能滥用已泄露或者已被拦截的令牌的时长。
    • 性能：较短的 TTL 意味着您的应用将更频繁地执行证明操作。由于每次执行应用证明过程都会增加网络请求的延迟时间，因此短 TTL 可能会影响应用的性能。
    • 配额和费用：较短的 TTL 和频繁的重新证明会更快地耗尽您的配额，而对于付费服务，费用可能更高。请参阅配额和限制。

    对于大多数应用而言，默认的 TTL（1 天）比较合理。请注意，App Check 库会在达到 TTL 时长约一半时刷新令牌。

2. 将 App Check 库添加到您的应用中

将 Firebase 添加到您的 Web 应用（如果尚未添加）。请务必导入 App Check 库。

3. 初始化 App Check

在访问 Firebase 服务之前，请将以下初始化代码添加到您的应用中。您需要将自己在 reCAPTCHA 控制台中创建的 reCAPTCHA 网站密钥传递给 activate()。

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});
appcheck_initialize.js

Web

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);
index.js

后续步骤

将 App Check 库安装到您的应用中之后，请部署该应用。

更新后的客户端应用会开始将 App Check 令牌随其发出的每个请求一起发送到 Firebase；不过，您在 Firebase 控制台的 App Check 部分中启用强制执行之前，Firebase 产品并不会要求令牌必须有效。

监控指标并启用强制执行

不过，在启用强制执行之前，您应该确保这样做不会干扰现有的合法用户。另一方面，如果您发现自己的应用资源被非法使用，建议您尽快启用强制执行。

为帮助您做出相关决策，建议您查看自己使用的服务的 App Check 指标：

启用 App Check 强制执行

在了解 App Check 对用户有何影响并为后续操作做好准备之后，您便可以启用 App Check 强制执行：

在调试环境中使用 App Check

为 App Check 注册应用后，如果您希望在 App Check 通常不会归类为有效提供方的环境（例如开发期间的本地环境）或持续集成 (CI) 环境中运行您的应用，可以创建应用的调试 build，该 build 使用 App Check 调试提供方，而不是真正的证明提供方。

请参阅将 App Check 与调试提供方搭配使用（Web 应用）。