如何在Angular项目中使用Firebase App Check Debug Provider

1. self指代说明 #

示例中的self是浏览器全局上下文对象，和前端常用的window对象等价，这里用来挂载全局的App Check调试标记变量，兼容普通页面和Web Worker场景，普通Angular项目直接用window也可以正常运行。

2. 代码放置位置与实现步骤 #

该变量必须在Firebase App Check初始化之前赋值，推荐结合Angular的环境变量配置，仅在开发环境开启调试模式，避免生产环境出现安全风险，有两个常用的放置位置：

方案1：放置在src/main.ts全局入口（最稳妥） #

在项目入口文件最前面添加判断逻辑，示例代码如下：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// 仅非生产环境开启App Check调试模式
if (!environment.production) {
  (window as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

方案2：放置在App Check初始化逻辑前 #

如果你是在AppModule的providers中配置AngularFire App Check，或者在特定服务中手动初始化App Check，只需要在初始化代码的前一行添加变量赋值即可，示例：

// 你的App Check初始化逻辑所在文件
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from '@angular/fire/app-check';
import { environment } from '../environments/environment';

if (!environment.production) {
  (self as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

// 原有初始化逻辑保持不变
initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('你的reCAPTCHA公钥'),
  isTokenAutoRefreshEnabled: true
});

3. 后续配置 #

首次启动项目后，浏览器控制台会输出一串App Check调试令牌，你需要将该令牌添加到Firebase控制台App Check配置页的调试令牌列表中，即可完成本地调试环境的配置。

注意：生产环境务必不要开启该配置，否则会导致App Check防护失效，存在严重安全风险。

内容的提问来源于stack exchange，提问作者Jack