如何在ReactJS前端的Firebase中实现App Check及相关问题咨询

1. 服务流程说明 #

App Check的核心验证流程如下：

• 客户端初始化App Check SDK，通过指定的验证提供者（如reCAPTCHA v3）完成人机验证，获取有效的App Check token
• 客户端向目标服务（Firebase官方服务或自定义后端）发送业务请求
• 目标服务将请求中的App Check token提交至Firebase App Check验证服务
• 验证服务校验token的签名合法性、过期时间、所属应用匹配度等信息
• 验证通过则允许目标服务处理请求并返回响应；验证失败则直接拒绝请求

2. Firebase自动发送Token的方式 #

对于Firebase官方SDK集成的服务（如Cloud Firestore、Cloud Storage、Cloud Functions等），在启用App Check并初始化SDK后，SDK会自动在所有请求的HTTP头中添加X-Firebase-AppCheck字段，值为当前有效的App Check token，无需开发者手动处理这一步骤。

3. 手动处理Token并加入请求的实现 #

你的代码中存在一个小问题：getToken()返回的Promise解析后会得到包含token属性的结果对象，而非直接返回token字符串。以下是修正后的实现，以及将token加入自定义请求的方法：

const appCheck = firebase.appCheck();
// 传入reCAPTCHA v3公钥，需与Firebase控制台配置的私钥对应
appCheck.activate(
  '<ReCaptcha V3 site key>',
  true // 开启自动刷新，SDK会在token过期前自动获取新token
);

// 获取Token并添加到自定义请求
appCheck.getToken()
  .then((tokenResult) => {
    // 提取实际的JWT Token
    const appCheckToken = tokenResult.token;
    
    // 示例：发送自定义后端请求，携带App Check Token
    fetch('https://your-custom-backend.com/api/endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 必须添加的请求头字段
        'X-Firebase-AppCheck': appCheckToken
      },
      body: JSON.stringify({ your: 'data' })
    })
    .then(res => res.json())
    .then(data => console.log('请求成功', data))
    .catch(err => console.error('请求失败', err));
  })
  .catch(err => console.error('获取App Check Token失败', err));

关键说明： #

• getToken()返回的Promise解析结果是一个对象，其中token属性才是用于验证的JWT字符串
• 自定义后端请求必须在HTTP头中添加X-Firebase-AppCheck字段，后端服务需将该字段的值发送至Firebase验证接口完成校验
• 开启自动刷新后，后续调用getToken()会自动返回最新的有效token，无需手动处理过期逻辑

内容的提问来源于stack exchange，提问作者Jaivardhan Deshwal