1

我想知道如何使用 Angular 初始化 Firebase 应用程序检查。

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

文档有这个

在您访问任何 Firebase 服务之前，将以下初始化代码添加到您的应用程序。

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');

但是如何在 app 模块中做到这一点。目前我像这样导入角火

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

更新：

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

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

作为参考，我的版本如下：

角度：10.2.5

火力基地：8.6.0

角火：6.1.5

调试本地主机版本也必须工作

4

3 回答 3

6

做这个：

// 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('');

然后将应用模块中的文件导入为：

import "firebase-initialization"
于 2021-06-14T20:39:45.133 回答
0

我不得不使用事件 DOMContentLoaded 使应用程序检查与我的 angularJS 应用程序一起工作，也许您可​​以尝试一下：

window.addEventListener('DOMContentLoaded', () => {
  var appCheck = firebase.appCheck()
  appCheck.activate('captchatokenid')
})
于 2021-06-14T16:07:15.437 回答
0

您也可以使用服务和拦截器（下面的代码）来实现这一点。该服务可能应该添加某种类型的令牌缓存（更短的 TTL 以提高安全性，更长的 TTL 以降低成本）。有关更多详细信息，请参阅在 Web 应用程序中使用 reCAPTCHA Enterprise 启用应用程序检查。

为了使服务实现简单，不包括令牌缓存代码。

该服务包含使用 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 标头的拦截器使用。

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://stackoverflow.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,
 },
]
于 2021-11-22T20:42:20.190 回答