Azure B2C自定义策略：为登录选项单选框添加密码输入框

1. 确认密码Claim类型配置 #

如果策略中未定义password Claim类型，先添加以下配置：

<ClaimType Id="password">
  <DisplayName>密码</DisplayName>
  <DataType>string</DataType>
  <UserInputType>Password</UserInputType>
  <AdminHelpText>请输入您的登录密码</AdminHelpText>
</ClaimType>

2. 修改自断言技术配置 #

更新SelfAsserted-Select-MFA-Method技术配置，添加密码输出Claim并配置显示条件：

<TechnicalProfile Id="SelfAsserted-Select-MFA-Method">
  <DisplayName>{Claim:signInName}</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.MFAselfasserted</Item>
    <!-- 配置密码字段仅在选择Email时显示 -->
    <Item Key="ClaimType.password.DisplayControlConditionalShow">extension_mfaByPhoneOrEmail eq "email"</Item>
  </Metadata>
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="signInName" PartnerClaimType="signInNames.emailAddress" Required="true"/>
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="extension_mfaByPhoneOrEmail" Required="true" />
    <!-- 添加密码输出Claim，默认非必填 -->
    <OutputClaim ClaimTypeReferenceId="password" Required="false" />
  </OutputClaims>
  <!-- 仅在选择Email时触发密码验证 -->
  <ValidationTechnicalProfiles>
    <ValidationTechnicalProfile ReferenceId="login-NonInteractive">
      <Preconditions>
        <Precondition Type="ClaimEquals" ExecuteActionsIf="false">
          <Value>extension_mfaByPhoneOrEmail</Value>
          <Value>email</Value>
          <Action>SkipThisValidationTechnicalProfile</Action>
        </Precondition>
      </Preconditions>
    </ValidationTechnicalProfile>
  </ValidationTechnicalProfiles>
</TechnicalProfile>

3. 增强页面动态交互（可选） #

如果需要更流畅的实时显示/隐藏效果，可在对应ContentDefinition中添加自定义脚本：

<ContentDefinition Id="api.MFAselfasserted">
  <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0</DataUri>
  <Metadata>
    <Item Key="DisplayName">自断言选择页面</Item>
    <Item Key="AllowInsecureScriptExecution">true</Item>
  </Metadata>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="zh-CN" LocalizedResourcesReferenceId="api.selfasserted.zh-CN" />
  </LocalizedResourcesReferences>
</ContentDefinition>

在页面脚本中添加监听逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const radioGroup = document.querySelectorAll('input[name="extension_mfaByPhoneOrEmail"]');
  const passwordSection = document.querySelector('div[data-claimtype="password"]');
  const passwordInput = document.querySelector('input[name="password"]');

  // 初始隐藏密码框
  if (passwordSection && document.querySelector('input[name="extension_mfaByPhoneOrEmail"][value="phone"]').checked) {
    passwordSection.style.display = 'none';
    passwordInput.removeAttribute('required');
  }

  // 监听单选框切换
  radioGroup.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.value === 'email') {
        passwordSection.style.display = 'block';
        passwordInput.setAttribute('required', 'required');
      } else {
        passwordSection.style.display = 'none';
        passwordInput.removeAttribute('required');
      }
    });
  });
});

4. 编排步骤分支处理 #

在后续编排步骤中，根据选择的验证方式分支流程：

<!-- 手机OTP验证步骤 -->
<OrchestrationStep Order="5" Type="ClaimsExchange">
  <Preconditions>
    <Precondition Type="ClaimEquals" ExecuteActionsIf="false">
      <Value>extension_mfaByPhoneOrEmail</Value>
      <Value>phone</Value>
      <Action>SkipThisOrchestrationStep</Action>
    </Precondition>
  </Preconditions>
  <ClaimsExchanges>
    <ClaimsExchange Id="PhoneFactor-Verify" TechnicalProfileReferenceId="PhoneFactor-InputOrVerify" />
  </ClaimsExchanges>
</OrchestrationStep>

<!-- 密码登录验证步骤 -->
<OrchestrationStep Order="6" Type="ClaimsExchange">
  <Preconditions>
    <Precondition Type="ClaimEquals" ExecuteActionsIf="false">
      <Value>extension_mfaByPhoneOrEmail</Value>
      <Value>email</Value>
      <Action>SkipThisOrchestrationStep</Action>
    </Precondition>
  </Preconditions>
  <ClaimsExchanges>
    <ClaimsExchange Id="LoginWithPassword" TechnicalProfileReferenceId="login-NonInteractive" />
  </ClaimsExchanges>
</OrchestrationStep>

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