如何在不注入Azure B2C生成的表单控件的前提下自定义Azure B2C HTML页面及可行方案咨询

你的理解基本正确——Azure B2C默认的自定义模板机制确实依赖<div id="api"></div>来渲染框架生成的表单控件，声明数据也是通过这个容器注入到页面中的。不过你提到的几个期望，其实有部分可以实现，还有额外的可行方案，下面给你详细拆解：

已验证可行的方案 #

1. 隐藏声明字段（你提到的“最坏情况”其实很实用） #

你可以在自定义策略里将scopes_to_approve声明配置为UserInputType="Hidden"，这样它会被渲染到<div id="api"></div>里的隐藏input字段中，不会显示任何表单控件。之后你可以用简单的JS代码获取值：

const scopes = document.querySelector('input[name="scopes_to_approve"]').value;
// 如果是stringcollection类型，需要拆分处理
const scopeList = scopes.split(',');

这种方式不需要额外的复杂配置，就能拿到声明数据，同时避免显示多余的控件。

2. 将声明注入页面元数据（无需依赖api容器） #

你可以通过自定义策略的本地化资源配置，把声明值注入到页面的meta标签里，完全绕开<div id="api"></div>：

• 首先在自定义策略的<LocalizedResources>里添加一个自定义字符串，引用你的声明：

  <LocalizedString ElementType="ClaimType" ElementId="scopes_to_approve" StringId="DisplayName">{-Claim:scopes_to_approve}</LocalizedString>
  

• 然后在你的自定义HTML模板里添加对应的meta标签：

  <meta name="scopes_to_approve" content="{LocalizedString:scopes_to_approve}" />
  

• 最后用JS读取：

  const scopes = document.querySelector('meta[name="scopes_to_approve"]').content;
  

这种方式完全脱离了框架生成的表单控件，符合你“无需注入Azure B2C表单控件即可使用声明”的期望。

3. 提前格式化权限内容（类似服务器预渲染的替代方案） #

Azure B2C本身不支持服务器端直接渲染HTML模板，但你可以通过自定义REST API集成来预处理声明：

1. 在User Journey中添加一个REST API调用步骤，传入scopes_to_approve声明。
2. 你的API根据声明值生成格式化好的HTML片段（比如APP xxx想要：读取您的身份信息 管理您的xxx数据这种样式），并返回一个新的声明（比如formatted_permissions）。
3. 在自定义HTML模板里直接渲染这个声明：

   <div class="permission-container">{-Claim:formatted_permissions}</div>
   

这种方式相当于提前完成了内容的格式化，页面渲染时直接展示即可，完全不需要客户端DOM操作。

总结 #

你的初始理解里的核心点是对的，但除了DOM操作和隐藏字段，还有元数据注入和REST API预处理这两个更优雅的方案可以选择，能更好地满足你的自定义需求。

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