如何调整ADB2C自定义策略中字段标签的显示位置？

当然可以，要实现字段标签显示在输入框上方或自定义界面布局，核心是借助ADB2C的自定义UI模板替换默认界面，具体操作步骤如下：

• 开启自定义UI功能
  先在ADB2C租户管理门户中，找到「用户流和自定义策略」下的自定义UI设置并启用，同时确保你的自定义HTML文件托管在ADB2C允许的域名中（比如Azure存储静态网站）。

• 修改UI布局结构
  复制ADB2C提供的默认UI模板，调整字段标签与输入框的DOM结构。比如将默认的横向排列改为纵向结构，让标签显示在输入框上方：

  <div class="form-group">
    <label for="signInName">{{localizedStrings["signInName.DisplayName"]}}</label>
    <input type="text" id="signInName" name="signInName" class="form-control" />
  </div>
  

  其中{{localizedStrings["signInName.DisplayName"]}}会自动调用你在自定义策略中配置的本地化显示名称变量。

• 添加CSS样式控制
  在模板的<style>标签中补充布局样式，确保标签和输入框的排版符合需求：

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  

• 关联自定义策略
  在自定义策略文件的<ContentDefinition>节点中，将默认的LoadUri替换为你的自定义UI模板URL：

  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>https://your-host-domain/custom-ui.html</LoadUri>
    <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.0</DataUri>
    <Metadata>
      <Item Key="DisplayName">Signin and Signup</Item>
    </Metadata>
  </ContentDefinition>
  

完成以上操作后，就能完全控制字段标签的位置和整体界面布局，同时保留你之前配置的本地化显示名称功能。

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