如何在Azure AD B2C中仅显示国家电话代码而非名称加代码？

内置用户流没有直接设置项修改国家代码的显示格式，需要通过自定义策略或前端自定义渲染来实现，具体方案如下：

方案一：修改自定义策略中的国家代码列表 #

1. 打开你的Azure AD B2C自定义策略文件，找到<ClaimsSchema>节点下定义countryCode的<ClaimType>部分。
2. 修改<Restriction>内的<Enumeration>项，将Text字段从原有的“国家名称+电话代码”格式替换为仅电话代码（如(+1)）。
3. 示例代码片段：

<ClaimType Id="countryCode">
  <DisplayName>Country Code</DisplayName>
  <DataType>string</DataType>
  <UserInputType>DropdownSingleSelect</UserInputType>
  <Restriction>
    <Enumeration Text="(+1)" Value="US" />
    <Enumeration Text="(+44)" Value="GB" />
    <Enumeration Text="(+86)" Value="CN" />
    <!-- 按需添加/修改其他国家代码项 -->
  </Restriction>
</ClaimType>

4. 保存修改后的策略文件，上传到Azure AD B2C门户替换原有策略即可生效。

方案二：通过自定义UI页面的JS修改显示 #

如果已配置自定义页面模板，可通过前端脚本批量修改下拉框选项的显示文本：

1. 在自定义页面的HTML中添加以下JavaScript代码，确保在页面加载完成后执行：

document.addEventListener('DOMContentLoaded', () => {
  const countrySelect = document.querySelector('select[name="countryCode"]');
  if (!countrySelect) return;
  
  Array.from(countrySelect.options).forEach(opt => {
    const code = opt.text.match(/\(\+\d+\)/);
    if (code) opt.text = code[0];
  });
});

2. 这段脚本会自动提取每个选项中的电话代码部分，替换原有的显示文本。

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