표시 컨트롤

  • 아티클

참고 항목

Azure Active Directory B2C에서 사용자 지정 정책은 주로 복잡한 시나리오를 해결하기 위해 설계되었습니다. 대부분의 시나리오에서 기본 제공 사용자 흐름을 사용하는 것이 좋습니다. 아직 수행하지 않았다면 Active Directory B2C에서 사용자 지정 정책 시작하기에서 사용자 지정 정책 스타터 팩에 대해 알아봅니다.

표시 컨트롤은 특수 기능이 있고 Azure AD B2C(Azure Active Directory B2C) 백 엔드 서비스와 상호 작용하는 사용자 인터페이스 요소입니다. 이를 통해 사용자는 백 엔드에서 유효성 검사 기술 프로필을 호출하는 페이지에서 작업을 수행할 수 있습니다. 디스플레이 컨트롤은 페이지에 표시되며 자체 어설션된 기술 프로필에서 참조됩니다.

필수 조건

자체 어설션된 기술 프로필의 메타데이터 섹션에서 참조된 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 요소에는 다음 특성이 포함됩니다.

Attribute Required 설명
Id 예 표시 컨트롤에 사용되는 식별자입니다. 참조할 수 있습니다.
UserInterfaceControlType 예 표시 컨트롤의 형식입니다. 현재 지원되는 것은 VerificationControl, TOTP 컨트롤 및 CAPTCHA 컨트롤입니다.

확인 컨트롤

확인 표시 컨트롤은 사용자에게 전송된 확인 코드를 사용하여 이메일 주소나 전화번호와 같은 클레임을 확인합니다. 다음 이미지는 기본 및 보조 전자 메일 주소의 유효성을 검사하는 두 개의 표시 컨트롤이 있는 자체 어설션된 등록 페이지를 보여 줍니다.

Screenshot showing email verification display control

TOTP 컨트롤

TOTP 표시 컨트롤은 Microsoft Authenticator 앱으로 TOTP 다단계 인증을 제공하는 표시 컨트롤 세트입니다. 다음 이미지는 세 가지 표시 컨트롤이 있는 TOTP 등록 페이지를 보여 줍니다.

Screenshot showing TOTP display controls

QrCodeControl

DisplayControl 요소에는 다음 요소가 포함됩니다.

요소 발생 설명
InputClaims 0:1 InputClaims 는 사용자로부터 수집할 클레임의 값을 미리 채워주는 데 사용됩니다. 자세한 내용은 InputClaims 요소를 참조하세요.
DisplayClaims 0:1 DisplayClaims 는 사용자로부터 수집할 클레임을 나타내는 데 사용됩니다. 자세한 내용은 DisplayClaim 요소를 참조하세요.
OutputClaims 0:1 OutputClaims 는 이 DisplayControl에 대해 일시적으로 저장될 클레임을 나타내는 데 사용됩니다. 자세한 내용은 OutputClaims 요소를 참조하세요.
Actions 0:1 Actions는 프런트 엔드에서 발생하는 사용자 작업에 대해 호출할 유효성 검사 기술 프로필을 나열하는 데 사용됩니다.

입력 클레임

표시 컨트롤에서 InputClaims 요소를 사용하여 페이지의 사용자로부터 수집할 클레임 값을 미리 채울 수 있습니다. 이 표시 컨트롤을 참조하는 자체 어설션된 기술 프로필에 InputClaimsTransformations를 정의할 수 있습니다.

다음 예제에서는 이미 있는 주소로 확인할 전자 메일 주소를 미리 채우도록 합니다.

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

표시 클레임

각 유형의 표시 컨트롤을 수행하려면 다른 표시 클레임, 출력 클레임 및 작업 집합이 필요합니다.

자체 어설션된 기술 프로필에 정의된 표시 클레임과 마찬가지로 표시 클레임은 표시 컨트롤 내의 사용자로부터 수집할 클레임을 나타냅니다. 참조되는 ClaimType 요소는 Azure AD B2C에서 지원하는 사용자 입력 형식에 대한 UserInputType 요소(예: TextBox 또는 DropdownSingleSelect.)를 지정해야 합니다. Action에서 표시 클레임 값이 필요한 경우 필수 특성을 설정하여 true 사용자가 해당 특정 표시 클레임에 대한 값을 제공하도록 합니다.

특정 유형의 표시 컨트롤에는 특정 표시 클레임이 필요합니다. 예를 들어 VerificationControl 형식의 표시 컨트롤에는 VerificationCode가 필요합니다. ControlClaimType 특성을 사용하여 필요한 클레임에 대해 지정된 DisplayClaim을 지정합니다. 예시:

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

출력 클레임

표시 컨트롤의 출력 클레임은 다음 오케스트레이션 단계로 전송되지 않습니다. 현재 표시 컨트롤 세션에 대해서만 일시적으로 저장됩니다. 이러한 임시 클레임은 동일한 표시 컨트롤의 여러 작업 간에 공유할 수 있습니다.

출력 클레임을 다음 오케스트레이션 단계로 버블링하려면 이 표시 컨트롤을 참조하는 자체 어설션된 실제 기술 프로필의 OutputClaims를 사용합니다.

컨트롤 작업 표시

표시 컨트롤의 동작은 사용자가 클라이언트 쪽(브라우저)에서 특정 작업을 수행할 때 Azure AD B2C 백 엔드에서 발생하는 절차입니다. 예를 들어 사용자가 페이지에서 단추를 선택할 때 수행할 유효성 검사입니다.

작업은 유효성 검사 기술 프로필의 목록을 정의합니다. 표시 컨트롤의 일부 또는 전체가 유효한지 검사하는 데 사용됩니다. 유효성 검사 기술 프로필은 사용자 입력의 유효성을 검사하고 사용자에게 오류를 반환할 수 있습니다. 자체 어설션된 기술 프로필에서는 유효성 검사 기술 프로필에서 사용되는 것과 유사한 표시 컨트롤 작업에서 ContinueOnError, ContinueOnSuccess 및 Preconditions를 사용할 수 있습니다.

actions

Actions 요소에는 다음 요소가 포함됩니다.

요소 발생 설명
Action 1:n 실행할 작업 목록입니다.

작업

Action 요소에는 다음 특성이 포함됩니다.

Attribute Required 설명
Id 예 작업의 유형입니다. 가능한 값은 SendCode 또는 VerifyCode입니다. 값은 SendCode 사용자에게 코드를 보냅니다. 이 작업에는 코드를 생성하는 프로필과 전송하는 프로필의 두 가지 유효성 검사 기술 프로필이 포함될 수 있습니다. 값은 VerifyCode 사용자가 입력 텍스트 상자에 입력한 코드를 확인합니다.

Action 요소에는 다음 요소가 포함됩니다.

요소 발생 설명
ValidationClaimsExchange 1:1 참조 기술 프로필의 일부 또는 모든 표시 클레임의 유효성을 검사하는 데 사용되는 기술 프로필의 식별자입니다. 참조된 기술 프로필의 모든 입력 클레임은 참조 기술 프로필의 표시 클레임에 표시되어야 합니다.

ValidationClaimsExchange

ValidationClaimsExchange 요소에는 다음 요소가 포함됩니다.

요소 발생 설명
ValidationClaimsExchangeTechnicalProfile 1:n 참조 기술 프로필의 표시 클레임 중 일부 또는 전부의 유효성을 검사하는 데 사용할 기술 프로필입니다.

ValidationClaimsExchangeTechnicalProfile 요소에 포함되는 특성은 다음과 같습니다.

Attribute Required 설명
TechnicalProfileReferenceId 예 정책 또는 부모 정책에 이미 정의된 기술 프로필의 식별자입니다.

ValidationClaimsExchangeTechnicalProfile 요소에는 다음 요소가 포함됩니다.

요소 발생 설명
Preconditions 0:1 유효성 검사 기술 프로필을 실행하려면 충족해야 하는 사전 조건 목록입니다.

Precondition 요소에는 다음 특성이 포함됩니다.

Attribute Required 설명
Type 예 사전 조건에 대해 수행할 검사 또는 쿼리의 형식입니다. 가능한 값은 ClaimsExist 또는 ClaimEquals입니다. ClaimsExist 는 지정된 클레임이 사용자의 현재 클레임 집합에 있는 경우 작업을 수행하도록 지정합니다. ClaimEquals 지정된 클레임이 있고 해당 값이 지정된 값과 같으면 작업을 수행하도록 지정합니다.
ExecuteActionsIf 예 테스트가 true이거나 false인 경우 사전 조건의 작업을 수행해야 하는지 여부를 나타냅니다.

Precondition 요소에는 다음 요소가 포함됩니다.

요소 발생 설명
Value 1:n 검사에 사용되는 데이터입니다. 이 검사 형식이ClaimsExist면 이 필드는 쿼리할 ClaimTypeReferenceId를 지정합니다. 검사 형식이ClaimEquals면 이 필드는 쿼리할 ClaimTypeReferenceId를 지정합니다. 다른 값 요소에 검사 값을 지정합니다.
Action 1:1 오케스트레이션 단계 내에서 검사 전제 조건이 true인 경우 수행해야 하는 작업입니다. 작업의 값은 연결된 유효성 검사 기술 프로필을 실행해서는 안 되도록 지정하는 값으로 설정SkipThisValidationTechnicalProfile됩니다.

다음 예제에서는 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" />

다음 단계

디스플레이 컨트롤 사용 샘플은 다음을 참조하세요.