Angularfire AppCheck未正确初始化

Question

我使用的是Angular Fire 7.3（模块化），并且不清楚如何设置AppCheck。我是“ 丢失或不足的权限”。

我已经看到了代码示例在这里 并配置了如图所示的环境变量/a> 我已经配置了应用模块，类似于他们建议做在这里，除了我不使用仿真器

，但它仍然表现得好像初始化并没有通过本地和已部署版本所关注的AppCheck进行操作。 （在recaptcha上均已重新确定Localhost和域）

显然我使用的Recaptcha V3站点密钥是正确的，并且也已在Firebase上进行了设置。我以前在以前的React项目上做到了这一点，至少对于该部分而言，它的工作原理类似，但至少请求正在解决。

...我想念什么？

我看到有一篇文章可以像没有Angularfire的情况下那样初始化壁炉，但这最终会在运行2个Firebase应用程序中，这听起来确实很骇人听闻且次优。

我希望他们的文档对AppCheck说了些什么...

App-Module：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './components/menu/menu.component';
import { LayoutComponent } from './components/layout/layout.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatIconModule} from "@angular/material/icon";
import { HeroComponent } from './components/hero/hero.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';
import {RouterModule} from "@angular/router";
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { LoginComponent } from './components/login/login.component';
import { AppcheckComponent } from './components/appcheck/appcheck.component';
import { ReleaseComponent } from './components/release/release.component';
import { PreloadComponent } from './components/preload/preload.component';

let resolvePersistenceEnabled: (enabled: boolean) => void;

export const persistenceEnabled = new Promise<boolean>(resolve => {
  resolvePersistenceEnabled = resolve;
});


@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    LayoutComponent,
    HeroComponent,
    PagenotfoundComponent,
    LoginComponent,
    AppcheckComponent,
    ReleaseComponent,
    PreloadComponent,



  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideStorage(() => getStorage()),

  ],
  providers: [
    ScreenTrackingService,UserTrackingService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

AppCheck-Component

import { Component, OnInit } from '@angular/core';
import { getToken, AppCheck } from '@angular/fire/app-check';
import { traceUntilFirst } from '@angular/fire/performance';
import { EMPTY, from, Observable } from 'rxjs';
import { keepUnstableUntilFirst } from '@angular/fire';
import { share } from 'rxjs/operators';

@Component({
  selector: 'app-app-check',
  template: `
    <p>
      App Check!
      <code>{{ (change$ | async)?.token | slice:0:12 }}<ng-container *ngIf="(change$ | async) !== null">&hellip;</ng-container></code>
    </p>
  `,
  styles: []
})

export class AppcheckComponent implements OnInit {

  readonly change$: Observable<any>;

  constructor(appCheck: AppCheck) {
    if (appCheck) {
      this.change$ = from(getToken(appCheck)).pipe(
        traceUntilFirst('app-check'),
        keepUnstableUntilFirst,
        share(),
      );
    } else {
      this.change$ = EMPTY;
    }
  }

  ngOnInit(): void {
  }
}

Enviroment变量

export const environment = {
  firebase: {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  },
  recaptcha3SiteKey: '...',
  production: false
};

版本信息：

Anglular 13.1 火箱9.8 AngularFire 7.3（模块化）

Answer 1

只需将AppCheck提供商添加到AppModule导入中，就像您对所有其他（Firestore，功能等）所做的那样。

import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check'    

... 

provideAppCheck(() =>
  initializeAppCheck(undefined, {
    provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey),
    isTokenAutoRefreshEnabled: true,
  })
),