启用Firebase AppCheck后Angular Fire调用Firestore遇权限拒绝问题

你遇到的权限拒绝问题，核心原因几乎可以确定是App Check验证未通过——毕竟你已经把Firestore规则设置为完全开放，所以权限限制肯定来自App Check层面，而非Firestore规则本身。以下是具体排查和解决步骤：

• 确认Angular应用中App Check与reCAPTCHA的初始化是否正确
  必须在项目中完成App Check的初始化配置，确保reCAPTCHA提供者正常工作。示例代码如下：

  import { initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
  import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
  import { environment } from '../environments/environment';
  
  // 在应用的依赖注入配置中（如app.config.ts）
  export const appConfig: ApplicationConfig = {
    providers: [
      provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
      provideAppCheck(() => {
        // 替换为你在Firebase控制台获取的reCAPTCHA v3站点密钥
        const recaptchaProvider = new ReCaptchaV3Provider('YOUR_RECAPTCHA_SITE_KEY');
        return initializeAppCheck(undefined, {
          provider: recaptchaProvider,
          isTokenAutoRefreshEnabled: true // 自动刷新令牌，避免过期
        });
      })
    ]
  };
  

  注意：站点密钥要和Firebase控制台中配置的完全一致，测试环境可以使用reCAPTCHA测试密钥，避免频繁触发验证拦截。

• 检查Firebase控制台的App Check保护状态
  进入Firebase控制台的App Check页面，找到Firestore服务，确认是否已经开启了App Check保护。如果是测试阶段，可以临时关闭Firestore的App Check保护，验证问题是否消失——如果消失，就坐实了是App Check验证的问题。

• 验证App Check令牌生成是否正常
  在浏览器开发者工具的控制台中执行以下代码：

  firebase.appCheck().getToken()
  

  如果返回错误，说明reCAPTCHA集成存在问题：

  • 检查reCAPTCHA控制台，确认你的应用域名已经添加到允许列表中
  • 排查是否有浏览器插件（如广告拦截器）阻止了reCAPTCHA脚本的加载

• 排查版本兼容性问题
  确保Angular Fire和Firebase SDK的版本相互兼容，版本不匹配可能导致App Check集成出现异常，建议使用官方推荐的配套版本。

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