如何在使用 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()（应用程序/无应用程序）。

正确的做法是什么？

Answer 1

因此设法通过放弃

AngularFireModule

并使用它来解决这个问题：

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

还必须补充：

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

到

providers

。

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

403

状态。

Answer 2

如果您正在使用 @angular/fire/COMPAT 并且由于任何原因无法切换到新的模块化版本 Angularfire，那么您可以直接使用 Firebase JavaScript SDK 中的应用程序检查。

在

app.module.ts

：

import { AngularFireModule } from "@angular/fire/compat";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';
import { getApp } from 'firebase/app';

@NgModule({
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    ... 
  ]

export class AppModule {
  constructor() {
    this.initializeAppCheck();
  }

  private initializeAppCheck() {
    const firebaseApp = getApp(); // get app that has been initialized with Angularfire above
    initializeAppCheck(firebaseApp, {
      provider: new ReCaptchaEnterpriseProvider(environment.recaptchaSiteKey),
      isTokenAutoRefreshEnabled: true
    });
  }
}