Azure AD B2C：如何在自定义模板中重新排序身份提供商(IDP)？

Azure AD B2C的内置Classic/AzureBlue模板会固定社交IDP的显示位置（Classic顶置，AzureBlue置底），直接修改策略内的IDP声明顺序不会生效，要实现自定义排序，只能通过自定义UI模板来控制，具体步骤如下：

1. 导出基础模板 #

从Azure门户导出当前使用的模板作为修改基础：

• 进入Azure AD B2C > 用户流 > 选择目标用户流 > 自定义UI > 下载模板
• 选择对应页面（比如登录页面）的模板文件，下载到本地。

2. 调整IDP渲染逻辑 #

打开下载的HTML模板，找到负责渲染身份提供商列表的代码块（通常在data-name="IdpSelection"的容器内），修改循环渲染的顺序：

• 默认模板会将社交IDP和本地账号分区渲染，你可以调整两者的渲染顺序，或者根据IDP的id/name属性自定义排序规则。
• 示例代码（将社交IDP放在本地账号之前）：

<div id="api" data-name="IdpSelection">
  <!-- 先渲染所有社交身份提供商 -->
  {% for idp in socialIdps %}
    <div class="form-group">
      <button type="submit" id="{{idp.id}}" name="idp" value="{{idp.id}}" class="btn btn-block btn-social {{idp.id}}">
        <span class="icon"></span> {{idp.name}}
      </button>
    </div>
  {% endfor %}

  <!-- 再渲染本地账号登录区域 -->
  {% if localAccountEnabled %}
    <div class="divider">
      <hr><span>或使用本地账号登录</span>
    </div>
    <!-- 本地账号表单代码 -->
    <div class="form-group">
      <input type="email" id="signInName" name="signInName" placeholder="邮箱地址" class="form-control" required autofocus>
    </div>
    <!-- 其他本地账号相关表单元素 -->
  {% endif %}
</div>

3. 上传并关联自定义模板 #

• 将修改后的模板文件上传到Azure存储账户（确保容器设置为公共访问），或者直接在门户的自定义UI设置中上传文件。
• 回到用户流的自定义UI配置页面，将对应页面的模板URL设置为你上传的自定义模板地址。
• 保存用户流后，测试登录页面，验证IDP顺序是否符合预期。

注意事项 #

• 确保模板中的Liquid语法与你的策略版本兼容，避免语法错误导致页面加载失败。
• 若使用自定义策略，需在对应的技术配置文件（如SelfAsserted-LocalAccountSignin-Email）中通过ContentDefinition引用自定义UI。
• 测试前清空浏览器缓存，避免加载旧模板内容。

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