検証表示コントロール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

検証表示コントロールは、次の 2 つの手順 (アクション) で構成されます。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. アドレスの値を事前に設定して、2 要素認証として使用できます。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 の型は VerificationControl です。The type of the DisplayControl is VerificationControl.
  • DisplayClaims
    • 送信先 - 確認コードの送信先を指定する 1 つまたは複数の要求。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. この要求には required を設定する必要があり、さらに ControlClaimTypeVerificationCode に設定する必要があります。This 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.
  • 次の名前の 2 つの Action:Two Actions with following names:
    • SendCode - ユーザーにコードを送信します。SendCode - Sends a code to the user. 通常、このアクションには、コードを生成して送信するための 2 つの検証技術プロファイルが含まれます。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 バックエンドでトリガーされます。When the user enters their email address and selects SendCode, the SendCode action is triggered in the Azure AD B2C back end.

その後、ユーザーが確認コードを入力し、 [コードの確認] を選択して、バックエンドで 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>