如何获取Azure AD B2C登录URL中携带的自定义参数并展示在自定义登录页

问题根因说明 #

你遇到的JS禁用提示并非真的浏览器禁用了JS，是Azure AD B2C的默认逻辑：页面初始化时会默认显示no_js节点，等B2C内置脚本执行完成后才会隐藏该节点。你直接读取window.location拿不到参数、触发JS报错阻断了B2C内置脚本执行，才会一直显示该报错。
同时你自定义的AppName参数默认不会被B2C透传到自定义页面，需要先配置白名单。 #

操作步骤 #

1. 配置自定义参数白名单 #

首先要把AppName加入B2C的允许透传参数列表：

• 如果你用的是用户流：进入B2C租户→对应登录用户流→页面布局→自定义查询参数，添加AppName保存即可。
• 如果你用的是自定义策略(IEF)：在对应依赖方(RelyingParty)文件的ContentDefinitionParameters节点下添加配置：

<ContentDefinitionParameters>
  <Parameter Name="AppName" />
</ContentDefinitionParameters>

2. 修正自定义页面代码 #

首先确认你的自定义HTML页面中保留了B2C要求的{Tags}占位符，该占位符会被B2C注入内置脚本，必须保留且所有自定义脚本要放在该占位符的后方。
然后使用如下JS代码获取参数并渲染：

// 等待页面完全加载、B2C内置脚本执行完成后再执行自定义逻辑
window.addEventListener('load', function() {
  // 从B2C上下文对象读取参数，兼容性更强
  let appName = ''
  if (window.SPE?.ui) {
    appName = window.SPE.ui.getQueryParameter('AppName')
  }
  // 兜底直接读当前页面URL参数
  if (!appName) {
    const urlParams = new URLSearchParams(window.location.search)
    appName = urlParams.get('AppName')
  }
  // 渲染到页面对应位置，可替换为你自己的DOM节点ID
  if (appName && document.getElementById('appNameDisplay')) {
    document.getElementById('appNameDisplay').textContent = appName
  }
})

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