验证显示控件Verification display control

使用验证显示控件验证声明(例如电子邮件地址或电话号码),并向用户发送验证码。Use a verification display control to verify a claim, for example an email address or phone number, with a verification code sent to the user.

VerificationControl 操作VerificationControl actions

验证显示控件包含两个步骤(操作):The verification display control consists of two steps (actions):

  1. 从用户那里请求要将验证码发送到的目标,例如电子邮件地址或电话号码。Request a destination from the user, such as an email address or phone number, to which the verification code should be sent. 当用户选择“发送代码” 按钮时,将执行验证显示控件的 SendCode 操作When the user selects the Send Code button, the SendCode Action of the verification display control is executed. SendCode 操作生成一个代码,构造要发送的内容并将其发送给用户。The SendCode Action generates a code, constructs the content to be sent, and sends it to the user. 地址值可以预填充,并充当第二重身份验证。The value of the address can be pre-populated and serve as a second-factor authentication.

    发送代码操作的示例页

  2. 发送代码后,用户将读取消息,将验证码输入到显示控件提供的控件中,并选择“验证代码” 。After the code has been sent, the user reads the message, enters the verification code into the control provided by the display control, and selects Verify Code. 通过选择“验证代码” ,将执行 VerifyCode 操作来验证与该地址关联的代码。By selecting Verify Code, the VerifyCode Action is executed to verify the code associated with the address. 如果用户选择了“发送新代码” ,则会再次执行第一个操作。If the user selects Send New Code, the first action is executed again.

    验证代码操作的示例页

备注

此功能目前以公共预览版提供。This feature is in public preview.

VerificationControl 必需的元素VerificationControl required elements

VerificationControl 必须包含以下元素:The VerificationControl must contain following elements:

  • DisplayControl 的类型为 VerificationControlThe type of the DisplayControl is VerificationControl.
  • DisplayClaims
    • 发送到 - 一个或多个声明,指定要将验证码发送到何处。Send to - One or more claims specifying where to send the verification code to. 例如,“电子邮件” 或“国家/地区代码” 和“电话号码” 。For example, email or country code and phone number.
    • 验证码 - 发送代码后用户提供的验证码声明。Verification code - The verification code claim that user provides after the code has been sent. 此声明必须设置为必需的,并且 ControlClaimType 必须设置为 VerificationCodeThis claim must be set as required, and the ControlClaimType must be set to VerificationCode.
  • 用户完成验证过程后要返回给自断言页面的输出声明(可选)。Output claim (optional) to be returned to the self-asserted page after the user completes verification process. 例如,“电子邮件” 或“国家/地区代码” 和“电话号码” 。For example, email or country code and phone number. 自断言技术配置文件使用声明来持久保存数据,或者将输出声明传播到下一个业务流程步骤。The self-asserted technical profile uses the claims to persist the data or bubble up the output claims to the next orchestration step.
  • 具有以下名称的两个 ActionTwo Actions with following names:
    • SendCode - 向用户发送代码。SendCode - Sends a code to the user. 此操作通常包含两个验证技术配置文件,用于生成代码并发送代码。This action usually contains two validation technical profile, to generate a code and to send it.
    • VerifyCode - 对代码进行验证。VerifyCode - Verifies the code. 此操作通常包含单个验证技术配置文件。This action usually contains a single validation technical profile.

在下面的示例中,页面上将显示一个 email 文本框。In the example below, an email textbox is displayed on the page. 当用户输入其电子邮件地址并选择 SendCode 时,将在 Azure AD B2C 后端触发 SendCode 操作。When the user enters their email address and selects SendCode, the SendCode action is triggered in the Azure AD B2C back end.

然后,用户输入 verificationCode 并选择 VerifyCode,以在后端触发 VerifyCode 操作。Then, the user enters the verificationCode and selects VerifyCode to trigger the VerifyCode action in the back end. 如果所有验证都通过,则 VerificationControl 将被视为已完成,用户可以继续执行下一步。If all validations pass, the VerificationControl is considered complete and the user can continue to the next step.

<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>