验证显示控件

使用验证显示控件验证声明(例如电子邮件地址或电话号码),并向用户发送验证码。

VerificationControl 操作

验证显示控件包含两个步骤(操作):

  1. 从用户那里请求要将验证码发送到的目标,例如电子邮件地址或电话号码。 当用户选择“发送代码”按钮时,将执行验证显示控件的 SendCode 操作SendCode 操作生成一个代码,构造要发送的内容并将其发送给用户。 地址值可以预填充,并充当第二重身份验证。

    Example page for send code action

  2. 发送代码后,用户将读取消息,将验证码输入到显示控件提供的控件中,并选择“验证代码”。 通过选择“验证代码”,将执行 VerifyCode 操作来验证与该地址关联的代码。 如果用户选择了“发送新代码”,则会再次执行第一个操作。

    Example page for verify code action

VerificationControl 必需的元素

VerificationControl 必须包含以下元素:

  • DisplayControl 的类型为 VerificationControl
  • DisplayClaims
    • 发送到 - 一个或多个声明,指定要将验证码发送到何处。 例如,“电子邮件”或“国家/地区代码”和“电话号码”
    • 验证码 - 发送代码后用户提供的验证码声明。 此声明必须设置为必需的,并且 ControlClaimType 必须设置为 VerificationCode
  • 用户完成验证过程后要返回给自断言页面的输出声明(可选)。 例如,“电子邮件”或“国家/地区代码”和“电话号码”。 自断言技术配置文件使用声明来持久保存数据,或者将输出声明传播到下一个业务流程步骤。
  • 具有以下名称的两个 Action
    • SendCode - 向用户发送代码。 此操作通常包含两个验证技术配置文件,用于生成代码并发送代码。
    • VerifyCode - 对代码进行验证。 此操作通常包含单个验证技术配置文件。

在下面的示例中,页面上将显示一个 email 文本框。 当用户输入其电子邮件地址并选择 SendCode 时,将在 Azure AD B2C 后端触发 SendCode 操作。

然后,用户输入 verificationCode 并选择 VerifyCode,以在后端触发 VerifyCode 操作。 如果所有验证都通过,则 VerificationControl 将被视为已完成,用户可以继续执行下一步。

<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="GenerateOtp" />
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SendGrid" />
      </ValidationClaimsExchange>
    </Action>
    <Action Id="VerifyCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="VerifyOtp" />
      </ValidationClaimsExchange>
    </Action>
  </Actions>
</DisplayControl>