Azure AD B2C自定义策略：如何使strongAuthenticationPhoneNumber可编辑并预填mobile值？

问题根源 #

当api.phonefactor检测到strongAuthenticationPhoneNumber已有预填充值时，会默认跳过号码输入环节，直接进入验证步骤，因此自动移除了phoneEntry元素，这是该技术配置文件的默认行为。

解决方案步骤 #

1. 调整自定义策略，强制显示号码输入界面 #

修改调用api.phonefactor的技术配置文件，添加元数据强制允许用户查看和修改号码：

<TechnicalProfile Id="PhoneFactor-Input">
  <DisplayName>PhoneFactor</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.PhoneFactorProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <Metadata>
    <!-- 添加元数据强制显示号码输入界面 -->
    <Item Key="AllowNumberChange">true</Item>
    <Item Key="ForceDisplayPhoneNumber">true</Item>
    <!-- 保留原有元数据 -->
  </Metadata>
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="mobile" PartnerClaimType="strongAuthenticationPhoneNumber" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="strongAuthenticationPhoneNumber" />
    <OutputClaim ClaimTypeReferenceId="phoneVerificationCode" />
  </OutputClaims>
  <UseTechnicalProfileForSessionManagement ReferenceId="SM-MFA" />
</TechnicalProfile>

2. 用SelfAsserted页面实现灵活控制（可选） #

如果上述元数据调整无效，可通过自定义SelfAsserted技术配置文件展示phoneEntry界面，预填号码后再提交到api.phonefactor验证：

<!-- 自定义手机号输入页面 -->
<TechnicalProfile Id="SelfAsserted-PhoneEntry">
  <DisplayName>Phone Entry</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <Metadata>
    <Item Key="ContentDefinitionReferenceId">api.selfasserted</Item>
    <Item Key="UserMessageIfClaimsTransformationInvalidPhoneNumber">Invalid phone number</Item>
  </Metadata>
  <InputClaims>
    <!-- 预填mobile声明的值到输入框 -->
    <InputClaim ClaimTypeReferenceId="mobile" PartnerClaimType="phoneNumber" DefaultValue="{Claim:mobile}" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="phoneNumber" Required="true" />
  </OutputClaims>
  <ValidationTechnicalProfiles>
    <!-- 验证手机号格式 -->
    <ValidationTechnicalProfile ReferenceId="PhoneNumberValidation" />
    <!-- 调用phonefactor验证 -->
    <ValidationTechnicalProfile ReferenceId="PhoneFactor-Verify">
      <InputClaimsTransformations>
        <InputClaimsTransformation ReferenceId="CopyPhoneNumberToStrongAuth" />
      </InputClaimsTransformations>
    </ValidationTechnicalProfile>
  </ValidationTechnicalProfiles>
</TechnicalProfile>

<!-- 声明转换：将输入的手机号复制到strongAuthenticationPhoneNumber -->
<ClaimsTransformation Id="CopyPhoneNumberToStrongAuth" TransformationMethod="CopyClaim">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="phoneNumber" TransformationClaimType="inputClaim" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="strongAuthenticationPhoneNumber" TransformationClaimType="outputClaim" />
  </OutputClaims>
</ClaimsTransformation>

<!-- 手机号格式验证 -->
<TechnicalProfile Id="PhoneNumberValidation">
  <DisplayName>Phone Number Validation</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.ClaimsTransformationProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="phoneNumber" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="phoneNumber" />
  </OutputClaims>
  <OutputClaimsTransformations>
    <OutputClaimsTransformation ReferenceId="NormalizePhoneNumber" />
  </OutputClaimsTransformations>
</TechnicalProfile>

3. 前端JS处理预填与区号匹配 #

在自定义HTML模板中添加JS，将mobile值拆分区号和号码，填充到对应控件：

window.addEventListener('load', function() {
  const mobileValue = window.SECRET.clientInputClaims.mobile;
  if (!mobileValue) return;

  // 示例：根据号码格式拆分区号和号码（需根据实际场景调整逻辑）
  const [countryCode, phoneNumber] = mobileValue.startsWith('+') 
    ? [mobileValue.slice(0, 3), mobileValue.slice(3)] 
    : ['+86', mobileValue];

  // 填充区号选择器
  const countrySelect = document.querySelector('#countryCode');
  if (countrySelect) countrySelect.value = countryCode;

  // 填充号码输入框
  const phoneInput = document.querySelector('#phoneNumber');
  if (phoneInput) phoneInput.value = phoneNumber;
});

关键注意事项 #

• 确保mobile声明为带完整区号的格式（如+86138xxxxxxx），否则预填和验证会出错。
• 测试前清除B2C会话，避免缓存导致页面显示异常。
• 自定义HTML模板的控件ID需与策略中ClaimType的UserInputType配置匹配。

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