AngularUniversal和FirebaseAppCheck的集成
创始人
2024-10-29 21:00:39
0
  1. 首先在 Angular 项目中安装 Firebase 和 Firebase App Check:
npm install firebase @angular/fire firebase/app-check
  1. 在 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 {}
  1. 然后在 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));
  }
}
  1. 在服务端渲染 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

相关内容

热门资讯

黑科技代打!微扑克辅助器是真的... 黑科技代打!微扑克辅助器是真的么(ai代打)太坑了真的是有挂(2025教程黑科技攻略)-哔哩哔哩;一...
黑科技玄学!wpk微扑克真的有... 黑科技玄学!wpk微扑克真的有辅助(智能ai)其实有挂(有挂游戏)-哔哩哔哩科技教程也叫必备教程,这...
黑科技透明挂!wepoke确实... 黑科技透明挂!wepoke确实有挂,wpk有透视辅助吗,微扑克教程(有挂总结)-哔哩哔哩是一款可以让...
黑科技计算!wpk发牌(黑科技... 黑科技计算!wpk发牌(黑科技ai)太坑了存在有挂(玩家教程黑科技辅助)-哔哩哔哩;1.wpk发牌 ...
黑科技规律!微扑克如何让系统发... 1、黑科技规律!微扑克如何让系统发好牌(ai辅助)本来真的有挂(有挂渠道)-哔哩哔哩;详细教程。2、...
黑科技透明挂!wepoke透明... 黑科技透明挂!wepoke透明黑科技,德州AI智能辅助机器人,德州教程(有挂规律)-哔哩哔哩1、许多...
黑科技教学!wepoke软件透... 黑科技教学!wepoke软件透明功能实现方法(黑科技ai)太坑了真的是有挂(AI教程黑科技辅助)-哔...
黑科技好友房!德州之星ai辅助... 自定义德州之星ai辅助系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑克专用辅助器,不管...
黑科技神器!wpkai透视外挂... 黑科技神器!wpkai透视外挂售卖,wpkai辅助,安装教程(有挂规律)-哔哩哔哩1、金币登录送、破...
黑科技工具!红龙扑克是真正规的... 黑科技工具!红龙扑克是真正规的吗(ai辅助)太坑了是真的有挂(详细教程黑科技黑科技)-哔哩哔哩1、不...