Firebase App Check本地调试：调试令牌多变及环境适配疑问

你遇到的问题是本地调试时App Check自动生成的令牌每次都变，只能手动设置固定令牌，但又不想让这段代码影响生产环境，下面给你几种纯JS的实现方式：

1. 基于域名判断开发环境 #

本地开发常用的域名一般是localhost、127.0.0.1或者自定义的本地域名（比如dev.local），直接通过当前页面的域名判断：

<!-- 这段代码必须放在Firebase初始化脚本之前 -->
<script>
  const isDevelopment = ['localhost', '127.0.0.1', 'dev.local'].includes(window.location.hostname);
  if (isDevelopment) {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = '186152BD-4BAA-blabla';
  }
</script>

这种方式简单直接，只有在本地访问时才会启用调试令牌，生产环境完全不受影响。

2. 通过URL参数手动触发调试模式 #

如果需要更灵活的开关，可以用URL参数控制，比如访问http://localhost:3000/?appcheck_debug=true时才启用：

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const enableDebug = urlParams.get('appcheck_debug') === 'true';
  if (enableDebug) {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = '186152BD-4BAA-blabla';
  }
</script>

适合临时开启调试的场景，生产环境只要不传入该参数就不会生效，避免误触发。

3. 结合构建工具注入环境变量（推荐） #

如果你的项目用了Webpack、Vite这类构建工具，通过环境变量控制是最规范的方式，生产环境不会包含调试相关代码：

Vite项目示例： #

1. 根目录创建.env.development文件：

VITE_APPCHECK_DEBUG_TOKEN=186152BD-4BAA-blabla

2. 在index.html中读取环境变量：

<script>
  <% if (import.meta.env.DEV) { %>
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = '<%= import.meta.env.VITE_APPCHECK_DEBUG_TOKEN %>';
  <% } %>
</script>

Webpack项目示例： #

1. 配置webpack的DefinePlugin注入变量：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.APPCHECK_DEBUG_TOKEN': JSON.stringify(process.env.APPCHECK_DEBUG_TOKEN)
    })
  ]
};

2. 在index.html中使用：

<script>
  if (process.env.NODE_ENV === 'development') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = process.env.APPCHECK_DEBUG_TOKEN;
  }
</script>

关键注意点 #

• 所有设置调试令牌的代码必须放在Firebase App Check初始化脚本之前，否则Firebase无法读取到令牌。
• 你自定义的调试令牌需要提前在Firebase控制台的App Check设置中添加，才能正常通过验证。

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