表示コントロール

表示コントロールは、特別な機能を備え、Azure Active Directory B2C (Azure AD B2C) バックエンド サービスと作用するユーザー インターフェイス要素です。 これにより、ユーザーがバックエンドで検証技術プロファイルを呼び出すページで操作を実行できるようになります。 ページに表示コントロールが表示され、セルフアサート技術プロファイルによって参照されます。

前提条件

セルフアサート技術プロファイルの Metadata セクションで参照された ContentDefinition の DataUri をページ コントラクトのバージョン 2.1.9 以上に設定する必要があります。 次に例を示します。

<ContentDefinition Id="api.selfasserted">
  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:2.1.9</DataUri>
  ...

表示コントロールの定義

DisplayControl 要素には、次の属性が含まれています。

検証コントロール

検証表示コントロールでは、要求 (電子メール アドレスや電話番号など) をユーザーに送信された確認コードを使用して検証します。 次の図は、プライマリとセカンダリの電子メール アドレスを検証する 2 つの表示コントロールを含むセルフアサート サインアップ ページを示しています。

TOTP コントロール

TOTP 表示コントロールは、Microsoft Authenticator アプリを使用した TOTP 多要素認証を提供する一連の表示コントロールです。 次の図には、3 つの表示コントロールを含む TOTP 登録ページが示されています。

QrCodeControl

DisplayControl 要素には、次の要素が含まれています。

入力クレーム

表示コントロールでは、InputClaims 要素を使用して、ユーザーから収集するクレームの値をページ上に事前入力できます。 この表示コントロールを参照するセルフアサート技術プロファイルでは、どのような InputClaimsTransformations でも定義することができます。

次の例では、既に存在するアドレスを使用して検証するメール アドレスを事前に入力します。

<DisplayControl Id="emailControl" UserInterfaceControlType="VerificationControl">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="emailAddress" />
  </InputClaims>
  ...

クレーム表示

各種類の表示コントロールには、クレーム表示、クレーム出力、および実行されるアクションの異なるセットが必要です。

セルフアサート技術プロファイルで定義されているクレーム表示と同様に、このクレーム表示では、表示コントロール内でユーザーから収集されるクレームを表します。 参照される ClaimType 要素では、UserInputType 要素として、TextBox または DropdownSingleSelect など Azure AD B2C がサポートするユーザー入力タイプを指定する必要があります。 Action にクレーム表示の値が必要な場合は、Required 属性を true に設定して、ユーザーが特定のクレーム表示の値を指定しなければならないようにします。

特定の種類の表示コントロールには、特定のクレーム表示が必要です。 たとえば、種類が VerificationControl の表示コントロールには、VerificationCode が必要です。 属性 ControlClaimType を使用して、その必須のクレームに対して指定される DisplayClaim を指定します。 次に例を示します。

<DisplayClaim ClaimTypeReferenceId="otpCode" ControlClaimType="VerificationCode" Required="true" />

出力クレーム

表示コントロールのクレーム出力は、次のオーケストレーション ステップには送信されません。 これらは、現在の表示コントロール セッションに対してのみ一時的に保存されます。 これらの一時的なクレームは、同じ表示コントロールの異なるアクション間で共有できます。

クレーム出力を次のオーケストレーション ステップにバブルアップするには、この表示コントロールを参照する実際のセルフアサート技術プロファイルの OutputClaims を使用します。

表示コントロールのアクション

表示コントロールのアクションは、ユーザーがクライアント側 (ブラウザー) で特定のアクションを実行したときに Azure AD B2C バックエンドで発生するプロシージャです。 たとえば、ユーザーがページのボタンを選択したときに実行する検証です。

アクションは、検証技術プロファイルの一覧を定義します。 これらは、表示コントロールのクレーム表示の一部またはすべてを検証するために使用されます。 検証技術プロファイルは、ユーザー入力を検証し、ユーザーにエラーを返す場合があります。 セルフアサート技術プロファイルで検証技術プロファイルに使用される方法と同様に、ContinueOnError、ContinueOnSuccess、および Preconditions 表示コントロールのアクションで使用することができます。

アクション

Actions 要素には、次の要素が含まれています。

アクション

Action 要素には、次の属性が含まれています。

Action 要素には、次の要素が含まれています。

ValidationClaimsExchange

ValidationClaimsExchange 要素には、次の要素が含まれています。

ValidationClaimsExchangeTechnicalProfile 要素には、次の属性が含まれています。

ValidationClaimsExchangeTechnicalProfile 要素には、次の要素が含まれています。

Precondition 要素には、次の属性が含まれています。

Precondition 要素には、次の要素が含まれています。

次の例では、Microsoft Entra ID SSPR 技術プロファイルを使用して電子メール アドレスを送信および検証します。

<DisplayControl Id="emailVerificationControl" UserInterfaceControlType="VerificationControl">
  <InputClaims></InputClaims>
  <DisplayClaims>
    <DisplayClaim ClaimTypeReferenceId="email" Required="true" />
    <DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
  </DisplayClaims>
  <OutputClaims></OutputClaims>
  <Actions>
    <Action Id="SendCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AadSspr-SendCode" />
      </ValidationClaimsExchange>
    </Action>
    <Action Id="VerifyCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AadSspr-VerifyCode" />
      </ValidationClaimsExchange>
    </Action>
  </Actions>
</DisplayControl>

次の例では、ユーザーが選択した前提条件付きの mfaType 要求に基づいてメールまたは SMS でコードを送信します。

<Action Id="SendCode">
  <ValidationClaimsExchange>
    <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AzureMfa-SendSms">
      <Preconditions>
        <Precondition Type="ClaimEquals" ExecuteActionsIf="true">
          <Value>mfaType</Value>
          <Value>email</Value>
          <Action>SkipThisValidationTechnicalProfile</Action>
        </Precondition>
      </Preconditions>
    </ValidationClaimsExchangeTechnicalProfile>
    <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AadSspr-SendEmail">
      <Preconditions>
        <Precondition Type="ClaimEquals" ExecuteActionsIf="true">
          <Value>mfaType</Value>
          <Value>phone</Value>
          <Action>SkipThisValidationTechnicalProfile</Action>
        </Precondition>
      </Preconditions>
    </ValidationClaimsExchangeTechnicalProfile>
  </ValidationClaimsExchange>
</Action>

表示コントロールの参照

表示コントロールは、セルフアサート技術プロファイルのクレーム表示で参照されます。

次に例を示します。

<TechnicalProfile Id="SelfAsserted-ProfileUpdate">
  ...
  <DisplayClaims>
    <DisplayClaim DisplayControlReferenceId="emailVerificationControl" />
    <DisplayClaim DisplayControlReferenceId="PhoneVerificationControl" />
    <DisplayClaim ClaimTypeReferenceId="displayName" Required="true" />
    <DisplayClaim ClaimTypeReferenceId="givenName" Required="true" />
    <DisplayClaim ClaimTypeReferenceId="surName" Required="true" />

次のステップ

表示コントロールの使用例については、次を参照してください。

• Mailjet を使用するカスタム メール確認
• SendGrid を使用するカスタム メール確認