- 首先在 Angular 项目中安装 Firebase 和 Firebase App Check:
npm install firebase @angular/fire firebase/app-check
- 在 app.module.ts 中引入 Firebase 和 Firebase App Check 模块,并在 NgModule 的 imports 中注入:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { FirebaseAppCheckModule, FirebaseAppCheckProvider } from '@firebase/app-check';
import { environment } from '../environments/environment';
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireDatabaseModule,
AngularFireFunctionsModule,
FirebaseAppCheckModule,
// 配置 App Check 开发者密钥
FirebaseAppCheckProvider.forRoot({
// Replace with your own App Check key pair.
provider: new firebase.appcheck.RecaptchaVerifier('reCAPTCHA_site_key')
})
],
})
export class AppModule {}
- 然后在 App 基本组件中启动 Firebase App Check:
import { Component, OnInit } from '@angular/core';
import firebase from 'firebase/app';
import { FirebaseAppCheck } from '@firebase/app-check';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements OnInit {
constructor(
private readonly appCheck: FirebaseAppCheck
) {}
ngOnInit() {
this.appCheck.activate()
.catch(error => console.error(error));
}
}
- 在服务端渲染 Angular 应用之前,需要通过另外一个 Firebase Cloud Functions 云函数来获取客户端所需的 App Check Token。以下是一个 Cloud Functions 的示例代码:
const functions = require("firebase-functions");
const admin = require("firebase-admin");
const playwright = require("playwright-core");
admin.initializeApp();
const serviceAccount = require("./serviceAccountKey.json");
const appCheckSettings = {
app