在Angular中实现Firebase App Check调试令牌时遭遇403错误求助

你遇到的403错误核心原因是ReCaptchaEnterpriseProvider的初始化参数错误——你把调试令牌当成了站点密钥传入，这是常见误区。以下是具体修复步骤：

1. 纠正ReCaptchaEnterpriseProvider的参数 #

ReCaptchaEnterpriseProvider需要传入的是Firebase控制台生成的ReCaptcha Enterprise站点密钥，而非本地调试令牌。正确代码如下：

// 替换为你在Firebase控制台获取的ReCaptcha Enterprise站点密钥
const provider = new ReCaptchaEnterpriseProvider("YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY");
return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });

站点密钥可以在Firebase控制台的「App Check」板块，对应Web应用的配置卡片中找到。

2. 确认调试令牌的注册状态 #

• 进入Firebase控制台「App Check」->「管理调试令牌」，确保你从浏览器控制台复制的调试令牌已被正确添加，且状态为启用。
• 注意：调试令牌与Firebase项目绑定，不要跨项目使用。

3. 验证本地环境的基础配置 #

• 检查本地开发域名（如localhost:4200）是否已添加到Firebase项目的「授权域名」列表（路径：项目设置 -> 应用 -> Web应用 -> 授权域名）。
• 确保浏览器未禁用Cookie，ReCaptcha验证依赖Cookie完成本地身份校验。

4. 清除缓存并重启服务 #

• 清除浏览器缓存、LocalStorage，避免旧的无效App Check令牌残留。
• 重启Angular开发服务器（终止ng serve后重新启动），确保新配置生效。

调试令牌的作用是让Firebase App Check信任你的本地请求，而ReCaptchaProvider的密钥是触发验证的凭证，两者功能完全不同，不要混淆。完成以上步骤后，本地测试的App Check请求应该能正常通过。

内容的提问来源于stack exchange，提问作者delio ribas