如何在Gatsby项目中使用Firebase App Check并解决403报错问题

• reCAPTCHA v3公钥配置错误：代码中填入的公钥和Firebase控制台生成的不一致，或reCAPTCHA后台允许的域名列表未包含当前项目运行的域名（本地开发需额外添加localhost及对应端口）。
• 本地开发未启用App Check调试模式：Firebase默认会拦截本地环境的校验请求，未配置调试令牌时会返回403错误。
• Firebase初始化参数错误：initializeApp传入的项目配置和控制台注册的应用信息不匹配，导致身份校验失败。
• reCAPTCHA密钥类型不匹配：创建密钥时选择了reCAPTCHA v2/企业版等类型，和代码中使用的ReCaptchaV3Provider不兼容。

1. 核对基础配置
   登录Firebase控制台进入「应用检查」栏目，找到对应Web应用，复制生成的reCAPTCHA v3公钥替换代码中的MY_RECAPTCHA_PUBLIC_KEY，同时确认reCAPTCHA管理后台的允许域名列表已添加项目当前的访问域名（本地开发需添加localhost+对应端口，如localhost:8000）。
   同时核对initializeApp传入的配置参数，和Firebase控制台「项目设置」-「常规」下的Web应用配置完全一致，无拼写或参数缺失问题。

2. 本地开发添加调试配置
   本地运行Gatsby项目时，添加调试令牌跳过生产校验逻辑，修改后代码如下：

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

const app = initializeApp({
  // 替换为你的Firebase项目配置
});

// 仅本地开发环境添加这段代码，生产部署请删除
if (process.env.NODE_ENV === 'development') {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = '你在Firebase控制台生成的调试令牌';
}

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('MY_RECAPTCHA_PUBLIC_KEY'),
  isTokenAutoRefreshEnabled: true
});

getToken(appCheck)
  .then(() => {
    console.log('success')
  })
  .catch((error) => {
    console.log(error.message)
  })

调试令牌可在Firebase控制台「应用检查」- 对应Web应用的菜单中选择「管理调试令牌」生成，生成后填入代码对应位置即可。

3. 确认reCAPTCHA密钥类型
   登录reCAPTCHA管理后台，检查你创建的密钥类型为reCAPTCHA v3，若类型不符请重新创建对应类型的密钥替换使用。

内容的提问来源于stack exchange，提问作者85Ryan