AngularFire主应用与Web组件共存时AppCheck重复初始化问题

核心解决方案：利用Firebase SDK直接检查AppCheck实例 #

修改Web组件中的provideAppCheck工厂函数，通过Firebase SDK的getAppCheck方法尝试获取已存在的实例，仅在实例不存在时执行初始化：

import { getAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@firebase/app-check';
import { getApp } from '@firebase/app';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    // 其他模块导入
    provideAppCheck(() => {
      try {
        // 尝试获取已存在的AppCheck实例
        return getAppCheck(getApp());
      } catch (error) {
        // 实例不存在时初始化
        return initializeAppCheck(getApp(), {
          provider: new ReCaptchaV3Provider(environment.firebase.appCheck.recaptcha3SiteKey),
          isTokenAutoRefreshEnabled: environment.firebase.appCheck.isTokenAutoRefreshEnabled,
        });
      }
    })
  ],
  // 其他模块配置
})
export class WebComponentModule { }

原理说明 #

• Firebase SDK的getAppCheck方法在当前Firebase App实例未关联AppCheck时会抛出错误，通过try-catch可以精准判断是否需要初始化。
• 主应用初始化AppCheck后，Web组件嵌入时会直接复用已存在的实例，避免重复渲染reCAPTCHA组件导致的报错。

为什么之前的尝试无效 #

1. appCheckInstance$无法适配：AngularFire提供的appCheckInstance$是Observable类型，用于组件内异步监听实例状态，但provideAppCheck需要同步返回AppCheck实例的工厂函数，无法直接对接。
2. 移至组件内初始化报错：provideAppCheck是模块级别的配置，移至组件内时，AngularFire的初始化流程尚未完成，导致抛出"AngularFireModule未提供"的错误。

注意事项 #

• 确保主应用与Web组件使用相同的Firebase配置（尤其是appId），这样两者会共享同一个Firebase App实例，getAppCheck才能正确获取已初始化的实例。
• 若需支持多Firebase App场景，可在getApp中指定App名称，针对性检查对应App的AppCheck实例。

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