为Azure AD B2C自定义策略的自定义登录页添加验证码遇UI渲染问题

以下是实现该功能的最简配置步骤，针对临时验证码响应存储（无需持久化到用户目录）：

1. 定义验证码响应的ClaimType #

在TrustFrameworkExtensions.xml的ClaimsSchema中添加临时Claim，无需创建自定义用户属性：

<BuildingBlocks>
  <ClaimsSchema>
    <ClaimType Id="captchaResponse">
      <DisplayName>Captcha Response</DisplayName>
      <DataType>string</DataType>
      <!-- 前端自动填充用Hidden，用户手动输入用TextBox -->
      <UserInputType>Hidden</UserInputType>
    </ClaimType>
  </ClaimsSchema>
</BuildingBlocks>

2. 在登录TechnicalProfile中引入InputClaim #

找到本地登录对应的TechnicalProfile（如SelfAsserted-LocalAccountSignin-Email），添加该Claim作为输入项：

<TechnicalProfile Id="SelfAsserted-LocalAccountSignin-Email">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="captchaResponse" Required="true" />
  </InputClaims>
  <!-- 保留原有其他配置 -->
</TechnicalProfile>

3. 确认ContentDefinition兼容自定义UI #

确保使用支持自定义UI的ContentDefinition版本，示例：

<ContentDefinitions>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>https://你的自定义UI地址/login.html</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5</DataUri>
    <!-- 保留原有其他配置 -->
  </ContentDefinition>
</ContentDefinitions>

4. 自定义UI页面绑定Claim字段 #

在自定义登录HTML中添加对应输入框，确保data-name与Claim的Id完全匹配：

<!-- 前端JS自动填充验证码响应的隐藏输入框 -->
<input type="hidden" id="captchaResponse" name="captchaResponse" data-name="captchaResponse" />

<!-- 用户手动输入验证码的可见输入框 -->
<div class="form-group">
  <label for="captchaResponse">验证码</label>
  <input type="text" class="form-control" id="captchaResponse" name="captchaResponse" data-name="captchaResponse" required />
</div>

关键注意事项 #

• 无需将该Claim设置为OutputClaim或PersistentClaim，仅作为临时输入验证使用
• 保持CombinedSignInAndSignUp原有流程，不要改为ClaimsExchange，避免触发默认UI
• 之前添加的extension_captcha自定义用户属性可移除，临时验证无需关联目录属性

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