Angular中Firebase App Check配置问题（开发/生产环境403错误）

一、修复Production环境"App attest failed"错误 #

1. 确认ReCaptcha V3生产密钥配置 #

• 登录Google ReCaptcha控制台，为你的生产域名（如yourdomain.com）生成专用的ReCaptcha V3 Site Key。
• 在Firebase控制台的App Check设置中，将该Site Key关联到生产项目，并确保ReCaptcha V3提供者已启用。

2. 校验生产环境变量 #

environment.prod.ts必须包含生产项目的真实有效配置，禁止使用测试或占位值：

export const environment = {
  production: true,
  useEmulators: false,
  firebase: {
    apiKey: "PRODUCTION_API_KEY",
    authDomain: "your-project.firebaseapp.com",
    projectId: "PRODUCTION_PROJECT_ID",
    storageBucket: "your-project.appspot.com",
    messagingSenderId: "XXX",
    appId: "XXX"
  },
  recaptchaV3SiteKey: "PRODUCTION_RECAPTCHA_V3_KEY"
};

二、本地开发环境优化配置 #

本地开发时使用调试令牌跳过App Check验证，避免开发阶段的403错误：

1. 获取调试令牌 #

• 登录Firebase控制台 → 目标项目 → App Check → 创建调试令牌，复制生成的令牌值。

2. 差异化配置实现 #

修改environment.ts添加调试令牌：

export const environment = {
  production: false,
  useEmulators: true,
  firebase: {
    apiKey: "DEV_API_KEY",
    authDomain: "your-project.firebaseapp.com",
    projectId: "真实开发项目ID", // 禁止使用demo-project
    storageBucket: "your-project.appspot.com",
    messagingSenderId: "XXX",
    appId: "XXX"
  },
  appCheckDebugToken: "YOUR_DEBUG_TOKEN"
};

更新app.module.ts中的provideAppCheck逻辑，实现环境适配：

provideAppCheck(() => {
  const appCheckConfig = {
    isTokenAutoRefreshEnabled: true
  };

  if (environment.production) {
    // 生产环境启用正式ReCaptcha V3验证
    appCheckConfig.provider = new ReCaptchaV3Provider(environment.recaptchaV3SiteKey);
  } else {
    // 本地开发启用调试模式
    appCheckConfig.provider = new ReCaptchaV3Provider(environment.recaptchaV3SiteKey);
    // 通过localStorage注入调试令牌（避免硬编码泄露）
    localStorage.setItem('FIREBASE_APP_CHECK_DEBUG_TOKEN', environment.appCheckDebugToken);
  }

  return initializeAppCheck(undefined, appCheckConfig);
}),

三、关键验证步骤 #

• 生产部署前，确认Firebase控制台App Check已为Web应用启用ReCaptcha V3，并关联正确的Site Key。
• 验证生产环境API密钥与项目ID严格匹配，杜绝"Invalid API key for project ID"类错误。
• 检查生产环境浏览器控制台，确认ReCaptcha资源加载正常，生产域名已被允许使用该密钥。

四、额外排查点 #

• 若生产环境仍报错，检查Firebase项目的App Check规则是否存在过度限制。
• 确认生产部署包未缓存旧环境配置，可通过清除浏览器缓存或强制刷新验证。

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