如何初始化 Firebase 应用签入 Angular

Question

我想知道如何使用 angular.

初始化 firebase 应用检查

我正在使用 angular fire，但我不确定如何在使用任何服务之前初始化 firebase 应用程序检查

文档有这个

Add the following initialization code to your application, before you access any Firebase services.

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate('abcdefghijklmnopqrstuvwxy-1234567890abcd');

但如何在应用程序模块中完成此操作。目前我导入 angular 像这样开火

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

更新：

我知道这可能还不是 angular fire 库的一部分，因为 firebase app-check 是新的，但我注意到有一个本地 firebase 库 https://www.npmjs.com/package/@firebase/app-check

我很高兴使用它（例如以某种方式覆盖本机 firebase js 对象），只要代码能够在调用任何服务之前将它应用到正确的位置并且它在打字稿

供参考我的版本如下：

Angular: 10.2.5

火力基地： 8.6.0

Angular火灾： 6.1.5

调试本地主机版本也必须有效

Answer 1

我不得不使用事件 DOMContentLoaded 来让应用程序检查与我的 angularJS 应用程序一起工作，也许你可以试试看：

window.addEventListener('DOMContentLoaded', () => {
  var appCheck = firebase.appCheck()
  appCheck.activate('captchatokenid')
})

Answer 2

这样做：

// firebase-initialization.ts
import firebase from 'firebase/app';
import 'firebase/app-check';

// Environment Config
import { environment } from './path/to/environments';

const app = firebase.initializeApp(environment.firebase);
const appCheck = app.appCheck()
appCheck.activate('');

然后在app模块中导入文件为：

import "firebase-initialization"

Answer 3

您也可以使用服务和拦截器（下面的代码）实现此目的。该服务可能应该添加某种令牌缓存（更短的 TTL 以提高安全性，更长的 TTL 以降低成本）。有关详细信息，请参阅 Enable App Check with reCAPTCHA Enterprise in web apps。

为了保持服务实现简单，不包含令牌缓存代码。

该服务包含使用 App Check 获取令牌的逻辑。

import { Injectable } from '@angular/core';
import { FirebaseApp, initializeApp } from 'firebase/app';
import { AppCheck, AppCheckTokenResult, getToken, initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AppCheckService {

  app: FirebaseApp;
  appCheck: AppCheck;

  constructor() {
    this.app = initializeApp(environment.firebase);

    // Create a ReCaptchaEnterpriseProvider instance using reCAPTCHA Enterprise.
    this.appCheck = initializeAppCheck(this.app, {
      provider: new ReCaptchaEnterpriseProvider(environment.recaptchaEnterpriseKey),
      isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
    });
  }


  async getToken(): Promise<AppCheckTokenResult | undefined> {
    let appCheckTokenResponse;
    try {
      appCheckTokenResponse = await getToken(this.appCheck);
    } catch (err) {
      // TODO: Handle any errors if the token was not retrieved.
      return;
    }
    return appCheckTokenResponse;
  }
}

此服务随后可由拦截器使用，该拦截器负责使用令牌添加 X-Firebase-AppCheck HTTP header。

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AppCheckTokenResult } from '@firebase/app-check';
import { from, Observable } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { AppCheckService } from '../services/app-check.service';

@Injectable()
export class AppCheckInterceptor implements HttpInterceptor {

    constructor(private readonly appCheckService: AppCheckService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return from(this.appCheckService.getToken()).pipe(
            take(1), // See https://whosebug.com/a/60196923/828547.
            switchMap((token: AppCheckTokenResult | undefined) => {
                if (token) {
                    request = request.clone({
                        setHeaders: { "X-Firebase-AppCheck": token?.token },
                    });
                }
                return next.handle(request);
            }),
        );
    }
}

您需要将 recaptchaEnterpriseKey 添加到 Angular 环境文件

export const environment = {
  recaptchaEnterpriseKey: '6LfGni324khkjh324hkDSFsdfSfsdm',
};

最后将拦截器添加到您的 app.module.ts 文件

providers: [
 {
      provide: HTTP_INTERCEPTORS,
      useClass: AppCheckInterceptor,
      multi: true,
 },
]

如何初始化 Firebase 应用签入 Angular

How to initialise Firebase App Check in Angular

firebase

typescript

angular

firebase-app-check