使用 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 -> [object Object] -> FirebaseApps -> FirebaseApps -> FirebaseApps]: NullInjectorError: No provider for FirebaseApps!

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

providers: [
  FirebaseApps,
]

我得到的是这个错误：

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call 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 状态。

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

How to make Firebase App Check work when using Angularfire?

javascript

angular

firebase

angularfire

firebase-app-check