使用 Angularfire 时如何使 Firebase App Check 工作？

Question

我正在尝试让 Firebase App Check 工作，但我正在努力寻找一种使用 Angularfire 来实现这一点的方法，因为我能找到的似乎没有相关文档。

...
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
import { FirebaseApps, getApp } from '@angular/fire/app';

@NgModule({
  ...
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(),
    AngularFireStorageModule,
    provideFirestore(() => getFirestore()),
    provideAppCheck(() => initializeAppCheck(getApp(), { provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey), isTokenAutoRefreshEnabled: true })),
  ],
})
export class AppModule {}

这样，当我运行应用程序时，我收到此错误：

NullInjectorError：R3InjectorError（AppModule）[AngularFireAuthGuard - > AngularFireAuth - > AppCheckInstances - > InjectionToken angularfire2.app-check-instances - > [对象对象] - > FirebaseApps - > FirebaseApps - > FirebaseApps]：NullInjectorError：没有FirebaseApps的提供者！

如果我FirebaseApps直接添加到提供商，例如：

providers: [
  FirebaseApps,
]

我收到此错误：

FirebaseError：Firebase：未创建 Firebase 应用程序“[DEFAULT]” - 调用 Firebase App.initializeApp() (app/no-app)。

这样做的正确方法是什么？

Answer 1

AngularFireModule因此，设法通过放弃并使用它来解决这个问题：

 provideFirebaseApp(() => initializeApp(environment.firebase)),

还必须添加：

{ provide: FIREBASE_OPTIONS, useValue: environment.firebase },

到providers。

之后，我还必须添加 SDK 在浏览器控制台中记录的“App Check 调试令牌”，以在 Firebase 控制台的“App Check”部分下调试令牌。如果不这样做，您的请求将会失败并出现403状态。