如何在Auth0托管页面模板中插入环境变量？多租户场景问询

我明白你现在的痛点——想在不同Auth0租户（dev/rc/live）的登录页面里动态插入对应环境的Google Analytics ID，之前试的@@my_variable@这类格式不管用对吧？别担心，Auth0有专门的配置变量机制，下面一步步给你讲怎么弄：

1. 给每个租户添加自定义配置变量 #

首先得在每个Auth0租户里配置好对应的GA ID：

• 登录到对应租户的Auth0管理控制台
• 导航到 Settings > Advanced > Custom Fields（新版控制台可能是 Tenant Settings > Advanced > Custom Metadata）
• 添加一个自定义字段，比如命名为googleAnalyticsId，然后给每个租户填入对应的GA ID（比如dev填UA-XXXXXX-1，rc填UA-XXXXXX-2，生产环境填正式的GA ID）

2. 在托管页面模板中引用变量 #

打开你的自定义登录页面模板（路径是 Universal Login > Login > Customize Login Page），找到Google Tag Manager的脚本，把硬编码的GA ID替换成Auth0的变量语法：${configuration.googleAnalyticsId}。

举个例子，原来的GTM脚本可能是这样：

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

修改后变成：

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id=${configuration.googleAnalyticsId}';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${configuration.googleAnalyticsId}');</script>
<!-- End Google Tag Manager -->

为什么之前的格式没用？ #

Auth0的托管页面模板用的是自己的变量插值规则，@@my_variable@这类是其他模板引擎（比如Handlebars）的语法，Auth0不支持。正确的引用方式是通过${configuration.变量名}来调用你在租户设置里添加的自定义字段。

验证是否生效 #

修改完模板后，点击页面上的「Preview」按钮，查看页面源代码，确认${configuration.googleAnalyticsId}已经被替换成了你设置的GA ID。也可以直接在对应环境测试登录，看Google Analytics是否收到了对应环境的访问数据。

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