Compartir a través de

Mostrar controles

Importante

A partir del 1 de mayo de 2025, Azure AD B2C ya no estará disponible para la compra por parte de nuevos clientes. Obtenga más información en nuestras preguntas más frecuentes.

Nota:

En Azure Active Directory B2C, las directivas personalizadas se han diseñado principalmente para abordar escenarios complejos. Para la mayoría de los escenarios, se recomienda usar flujos de usuario integrados. Si no lo ha hecho, obtenga información sobre el paquete de inicio de directivas personalizadas en Introducción a las directivas personalizadas en Active Directory B2C.

Un control de visualización es un elemento de interfaz de usuario que tiene una funcionalidad especial e interactúa con el servicio back-end de Azure Active Directory B2C (Azure AD B2C). Permite al usuario realizar acciones en la página que invocan un perfil técnico de validación en el back-end. Los controles de visualización se muestran en la página y se hace referencia a los controles técnicos autoafirmados.

Prerrequisitos

En la sección Metadatos de un perfil técnico autoafirmado, el ContentDefinition al que se hace referencia debe tener DataUri establecido en la versión 2.1.9 o posterior del contrato de página. Por ejemplo:

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

Definición de controles de visualización

El elemento DisplayControl contiene los atributos siguientes:

Atributo Obligatorio Descripción
Id Sí Identificador que se usa para el control de visualización. Se puede hacer referencia a ella.
UserInterfaceControlType Sí Tipo del control de visualización. Actualmente se admite VerificationControl, controles TOTP y controles CAPTCHA.

Control de verificación

El control de visualización de verificación comprueba las notificaciones, por ejemplo, una dirección de correo electrónico o un número de teléfono, con un código de verificación enviado al usuario. En la imagen siguiente se muestra una página de registro autoafirmada con dos controles para mostrar que validan una dirección de correo electrónico principal y secundaria.

Captura de pantalla que muestra el control de visualización de comprobación de correo electrónico

Controles TOTP

Los controles de visualización TOTP son un conjunto de controles de visualización que proporcionan autenticación multifactor TOTP con la aplicación Microsoft Authenticator. En la imagen siguiente se muestra una página de inscripción TOTP con los tres controles de visualización.

Captura de pantalla en la que se muestran los controles de visualización de TOTP

QrCodeControl

El elemento DisplayControl contiene los siguientes elementos:

Elemento Repeticiones Descripción
InputClaims 0:1 InputClaims se usa para rellenar previamente el valor de las notificaciones que se van a recopilar del usuario. Para obtener más información, vea Elemento InputClaims .
DisplayClaims 0:1 DisplayClaims se usa para representar las notificaciones que se van a recopilar del usuario. Para obtener más información, vea Elemento DisplayClaim .
OutputClaims 0:1 OutputClaims se usan para representar las notificaciones que se guardarán temporalmente para este DisplayControl. Para obtener más información, vea Elemento OutputClaims .
Actions 0:1 Las acciones se usan para enumerar los perfiles técnicos de validación para invocar acciones de usuario que se producen en el front-end.

Notificaciones de entrada

En un control de visualización, puede usar los elementos InputClaims para rellenar previamente el valor de las notificaciones que se van a recopilar del usuario en la página. Cualquier InputClaimsTransformations se puede definir en el perfil técnico autoafirmado, que hace referencia a este control de visualización.

En el ejemplo siguiente se rellena previamente la dirección de correo electrónico que se va a comprobar con la dirección ya presente.

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

Notificaciones de visualización

Cada tipo de control de visualización requiere que se realice un conjunto diferente de notificaciones de visualización, notificaciones de salida y acciones .

De forma similar a las notificaciones de visualización definidas en un perfil técnico autoafirmado, las notificaciones de visualización representan las notificaciones que se van a recopilar del usuario dentro del control de visualización. El elemento ClaimType al que se hace referencia debe especificar el elemento UserInputType para un tipo de entrada de usuario admitido por Azure AD B2C, como TextBox o DropdownSingleSelect. Si una acción requiere un valor de notificación para mostrar, establezca el atributo Required en true para forzar al usuario a proporcionar un valor para esa notificación de presentación específica.

Se requieren ciertas notificaciones de visualización para determinados tipos de control de pantalla. Por ejemplo, VerificationCode es necesario para el control de visualización de tipo VerificationControl. Use el atributo ControlClaimType para especificar qué DisplayClaim se designa para esa notificación necesaria. Por ejemplo:

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

Notificaciones de salida

Las notificaciones de salida de un control de visualización no se envían al siguiente paso de orquestación. Se guardan temporalmente solo para la sesión de control de pantalla actual. Estas notificaciones temporales se pueden compartir entre las diferentes acciones del mismo control de visualización.

Para propagar las notificaciones de salida al siguiente paso de orquestación, use outputClaims del perfil técnico autoafirmado real, que hace referencia a este control de visualización.

Mostrar acciones de control

Las acciones de un control de visualización son procedimientos que se producen en el back-end de Azure AD B2C cuando un usuario realiza una determinada acción en el lado cliente (el explorador). Por ejemplo, las validaciones que se realizarán cuando el usuario selecciona un botón en la página.

Una acción define una lista de perfiles técnicos de validación. Se usan para validar algunas o todas las notificaciones de visualización del control de visualización. El perfil técnico de validación valida la entrada del usuario y puede devolver un error al usuario. Puede usar ContinueOnError, ContinueOnSuccess y Condiciones previas en la acción de control de visualización similar a la forma en que se usan en los perfiles técnicos de validación en un perfil técnico autoafirmado.

Acciones

El elemento Actions contiene el elemento siguiente:

Elemento Repeticiones Descripción
Action 1:n Lista de acciones que se van a ejecutar.

Acción

El elemento Action contiene el atributo siguiente:

Atributo Obligatorio Descripción
Id Sí Tipo de operación. Valores posibles: SendCode o VerifyCode. El SendCode valor envía un código al usuario. Esta acción puede contener dos perfiles técnicos de validación: uno para generar un código y otro para enviarlo. El VerifyCode valor comprueba el código que el usuario ha escrito en el cuadro de texto de entrada.

El elemento Action contiene el siguiente elemento:

Elemento Repeticiones Descripción
ValidationClaimsExchange 1:1 Identificadores de perfiles técnicos que se usan para validar algunas o todas las notificaciones de visualización del perfil técnico de referencia. Todas las notificaciones de entrada del perfil técnico al que se hace referencia deben aparecer en las notificaciones de presentación del perfil técnico de referencia.

ValidationClaimsExchange

El elemento ValidationClaimsExchange contiene el elemento siguiente:

Elemento Repeticiones Descripción
ValidationClaimsExchangeTechnicalProfile 1:n Perfil técnico que se va a usar para validar algunas o todas las notificaciones de visualización del perfil técnico de referencia.

El elemento ValidationClaimsExchangeTechnicalProfile contiene el atributo siguiente:

Atributo Obligatorio Descripción
TechnicalProfileReferenceId Sí Identificador de un perfil técnico ya definido en la directiva o directiva primaria.

El elemento ValidationClaimsExchangeTechnicalProfile contiene el elemento siguiente:

Elemento Repeticiones Descripción
Preconditions 0:1 Lista de condiciones previas que deben cumplirse para que se ejecute el perfil técnico de validación.

El elemento Precondition contiene los atributos siguientes:

Atributo Obligatorio Descripción
Type Sí Tipo de comprobación o consulta que se va a realizar para la condición previa. Valores posibles: ClaimsExist o ClaimEquals. ClaimsExist especifica que las acciones deben realizarse si las notificaciones especificadas existen en el conjunto de notificaciones actual del usuario. ClaimEquals especifica que las acciones deben realizarse si existe la notificación especificada y su valor es igual al valor especificado.
ExecuteActionsIf Sí Indica si las acciones de la condición previa deben realizarse si la prueba es true o false.

El elemento Condición previa contiene los siguientes elementos:

Elemento Repeticiones Descripción
Value 1:n Los datos que usa la comprobación. Si el tipo de esta comprobación es ClaimsExist, este campo especifica un ClaimTypeReferenceId para el que se va a consultar. Si el tipo de comprobación es ClaimEquals, este campo especifica un ClaimTypeReferenceId para el que se va a consultar. Especifique el valor que se va a comprobar en otro elemento de valor.
Action 1:1 La acción que se debe realizar si la comprobación de condición previa dentro de un paso de orquestación es verdadera. El valor de action se establece SkipThisValidationTechnicalProfileen , que especifica que no se debe ejecutar el perfil técnico de validación asociado.

En el ejemplo siguiente se envía y comprueba la dirección de correo electrónico mediante el perfil técnico de SSPR de Id. de Microsoft Entra.

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

En el ejemplo siguiente se envía un código por correo electrónico o SMS en función de la selección del usuario de la notificación mfaType con condiciones previas.

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

Hacer referencia a controles de visualización

Se hace referencia a los controles de visualización en las notificaciones de presentación del perfil técnico autoafirmado.

Por ejemplo:

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

Pasos siguientes

Para obtener ejemplos de uso del control de visualización, consulte:

  • Last updated on