Azure AD B2C 自定义策略验证代码并继续执行同一操作答案

【问题标题】：Azure AD B2C Custom Policy Verify Code & Continue in same ActionAzure AD B2C 自定义策略验证代码并继续执行同一操作
【发布时间】：2023-01-20 17:50:56
【问题描述】：

我有一个现有的用户流程，它按预期工作，带有验证码并继续按钮操作。当前的问题是，如果启用了 MFA，用户必须单击太多操作按钮才能登录。因此，预期的用户流程应该跳过或绕过继续步骤，其中验证操作按钮将处理 otp 验证以及单击继续用户流程。我正在尝试结合步骤来验证代码并在一个操作中继续按钮。感谢任何形式的帮助，并提前致谢。附上图片也可以更好地理解。下面是我的代码

    <DisplayControls>
      <DisplayControl Id="emailVerificationControl" UserInterfaceControlType="VerificationControl">
        <DisplayClaims>
          <DisplayClaim ClaimTypeReferenceId="email" Required="true" />
          <DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
        </DisplayClaims>
        <OutputClaims>
          <OutputClaim ClaimTypeReferenceId="email" />
        </OutputClaims>
        <Actions>
          <Action Id="SendCode">
            <ValidationClaimsExchange>
              <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SelfAsserted-GenerateOtp" />
              <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SendGridSendOtp" />
            </ValidationClaimsExchange>
          </Action>
          <Action Id="VerifyCode">
            <ValidationClaimsExchange>
              <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SelfAsserted-VerifyOtp" />
            </ValidationClaimsExchange>
          </Action>
        </Actions>
      </DisplayControl>
<ClaimsProvider>
      <DisplayName>SelfAsserted-VerifyOtp</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="SelfAsserted-VerifyOtp">
          <DisplayName>Verify one time password</DisplayName>
          <Protocol
            Name="Proprietary"
            Handler="Web.TPEngine.Providers.OneTimePasswordProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
          />
          <Metadata>
            <Item Key="Operation">VerifyCode</Item>
          </Metadata>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="identifier" />
            <InputClaim ClaimTypeReferenceId="verificationCode" PartnerClaimType="otpToVerify" />
          </InputClaims>
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>

    <ClaimsProvider>
      <DisplayName>SelfAsserted-GenerateOtp</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="SelfAsserted-GenerateOtp">
          <DisplayName>Generate one time password</DisplayName>
          <Protocol
            Name="Proprietary"
            Handler="Web.TPEngine.Providers.OneTimePasswordProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
          />
          <Metadata>
            <Item Key="Operation">GenerateCode</Item>
            <Item Key="CodeExpirationInSeconds">1200</Item>
            <Item Key="CodeLength">6</Item>
            <Item Key="CharacterSet">0-9</Item>
            <Item Key="ReuseSameCode">true</Item>
            <Item Key="NumRetryAttempts">5</Item>
          </Metadata>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="identifier" />
          </InputClaims>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="otp" PartnerClaimType="otpGenerated" />
          </OutputClaims>
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>

Existing User Flow Expected User Flow

【问题讨论】：

标签： azure-active-directory azure-ad-b2c azure-ad-b2c-custom-policy

【解决方案1】：

您不能使用自定义策略将验证代码和继续按钮合并为一个按钮。为此，您需要与前端开发人员合作，使用自定义 HTML 页面通过 JavaScript/CSS 进行注册/登录。

您可以考虑使用 JavaScript MutationObserver 来检测“继续”按钮是否已启用，然后使用 javascript 自动执行点击

【讨论】：

【解决方案2】：

是的，你需要javascript。这就是你需要的：

https://github.com/stevenxzhou-zz/B2C-Samples/blob/master/Email-Verification-Automatic-Redirect.js

【讨论】：