如何在Azure AD B2C自定义策略中验证邮箱前禁用密码输入框？

核心思路 #

通过自定义UI页面结合JavaScript逻辑，初始状态下禁用密码相关输入组件，当邮箱验证码验证成功后，动态启用这些组件；同时配合自定义策略的用户旅程配置，确保邮箱验证流程的执行顺序和事件触发逻辑正确。

实现步骤 #

1. 配置自定义UI页面 #

在自定义策略的ContentDefinition节点中，指定注册流程使用自定义HTML页面：

<ContentDefinition Id="api.signup">
  <LoadUri>https://你的自定义UI托管地址/signup.html</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5</DataUri>
  <Metadata>
    <Item Key="DisplayName">注册页面</Item>
  </Metadata>
</ContentDefinition>

2. 编写自定义HTML及JavaScript逻辑 #

在自定义HTML页面中，初始设置密码输入框为禁用状态，然后监听B2C的邮箱验证成功事件，触发组件启用：

<!DOCTYPE html>
<html>
<head>
  <title>用户注册</title>
  <script src="https://azureadb2c.azureedge.net/library/b2cief.js"></script>
  <style>
    .disabled-field {
      background-color: #f0f0f0;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div id="api"></div>

  <script>
    // 页面加载完成后禁用密码相关字段
    document.addEventListener('DOMContentLoaded', function() {
      const passwordFields = document.querySelectorAll('[name="newPassword"], [name="reenterPassword"]');
      passwordFields.forEach(field => {
        field.disabled = true;
        field.classList.add('disabled-field');
      });
    });

    // 监听邮箱验证成功的消息事件
    window.addEventListener('message', function(event) {
      if (event.data && event.data.type === 'Verified.Email') {
        const passwordFields = document.querySelectorAll('[name="newPassword"], [name="reenterPassword"]');
        passwordFields.forEach(field => {
          field.disabled = false;
          field.classList.remove('disabled-field');
        });
      }
    });
  </script>
</body>
</html>

3. 调整自定义策略的用户旅程与技术配置 #

确保用户旅程中邮箱验证步骤优先执行，且技术配置文件启用邮箱验证逻辑：

<!-- 用户旅程中的注册步骤 -->
<OrchestrationStep Order="1" Type="ClaimsExchange">
  <ClaimsExchanges>
    <ClaimsExchange Id="SignUpWithLogonEmailExchange" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail" />
  </ClaimsExchanges>
</OrchestrationStep>

<!-- 邮箱注册的技术配置文件 -->
<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
  <DisplayName>邮箱注册</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.signup</Item>
    <Item Key="language.button_continue">创建账户</Item>
  </Metadata>
  <CryptographicKeys>
    <Key Id="issuer_secret" StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
  </CryptographicKeys>
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="email" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="objectId" />
    <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" />
    <OutputClaim ClaimTypeReferenceId="newPassword" />
    <OutputClaim ClaimTypeReferenceId="reenterPassword" />
    <OutputClaim ClaimTypeReferenceId="displayName" />
  </OutputClaims>
  <ValidationTechnicalProfiles>
    <ValidationTechnicalProfile ReferenceId="AAD-UserWriteUsingLogonEmail" />
  </ValidationTechnicalProfiles>
</TechnicalProfile>

补充说明 #

• 上述JavaScript中监听的Verified.Email是Azure AD B2C在邮箱验证成功后发送的标准消息类型，确保事件触发的准确性。
• 需将自定义UI页面的域名添加到Azure AD B2C的CORS允许列表中，避免跨域问题导致逻辑失效。
• 可通过CSS自定义禁用状态的输入框样式，提升用户体验。

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