Habilitación de versiones de diseño de página y JavaScript en Azure Active Directory B2C

2025-05-06

Importante

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

Antes de empezar, use el selector Elegir un tipo de directiva en la parte superior de esta página para elegir el tipo de directiva que está configurando. Azure Active Directory B2C ofrece dos métodos para definir cómo interactúan los usuarios con las aplicaciones: a través de flujos de usuario predefinidos o mediante directivas personalizadas totalmente configurables. Los pasos necesarios en este artículo son diferentes para cada método.

Con las plantillas HTML de Azure Active Directory B2C (Azure AD B2C), puede crear experiencias de identidad de los usuarios. Las plantillas HTML solo pueden contener determinadas etiquetas y atributos HTML. Se permiten etiquetas HTML básicas, como <b>, <i>, <u>, <h1> y <hr> . Las etiquetas más avanzadas, como <el script>, y <el iframe> se quitan por motivos de seguridad, pero la <script> etiqueta debe agregarse en la <head> etiqueta. Desde el diseño de página selfasserted versión 2.1.21 / unifiedssp versión 2.1.10 / multifactor versión 1.2.10 y posteriores, B2C no admite la adición de scripts en la etiqueta <body> (ya que esto puede suponer un riesgo para el ataque de scripting entre sitios). La migración de scripts existentes de <body> a <head> puede requerir reescribir scripts existentes utilizando observadores de mutación para que funcionen correctamente.

La etiqueta <script> debe agregarse en la etiqueta <head> de dos maneras.

Al agregar el defer atributo , que especifica que el script se descarga en paralelo para analizar la página, el script se ejecuta después de que la página haya terminado de analizar:
```
 <script src="my-script.js" defer></script>
```
Agregar async atributo que especifica que el script se descarga en paralelo para analizar la página y, a continuación, el script se ejecuta tan pronto como esté disponible (antes de que finalice el análisis):
```
 <script src="my-script.js" async></script>	
```

Para habilitar JavaScript y los atributos y etiquetas HTML avanzadas:

Seleccionar un diseño de página
Habilitarlo en el flujo de usuario mediante Azure Portal
Usa b2clogin.com en tus solicitudes

Seleccionar un diseño de página
Añade un elemento a tu directiva personalizada
Usa b2clogin.com en tus solicitudes

Prerrequisitos

Cree un flujo de usuario para que los usuarios se registren e inicien sesión en la aplicación.
Registre una aplicación web.

Siga los pasos de Introducción a las directivas personalizadas en Active Directory B2C. En este tutorial se explica cómo actualizar archivos de directiva personalizados para usar la configuración del inquilino de Azure AD B2C.
Registre una aplicación web.

Comenzar a configurar una versión de diseño de página

Si tiene previsto habilitar el código del lado cliente de JavaScript, los elementos en los que basa javaScript deben ser inmutables. Si no son inmutables, los cambios podrían provocar un comportamiento inesperado en las páginas de usuario. Para evitar estos problemas, aplique el uso de un diseño de página y especifique una versión de diseño de página para asegurarse de que las definiciones de contenido en las que ha basado javaScript en son inmutables. Incluso si no tiene previsto habilitar JavaScript, puede especificar una versión de diseño de página para las páginas.

Para especificar una versión de diseño de página para las páginas de flujo de usuario:

En el inquilino de Azure AD B2C, seleccione Flujos de usuario.
Haga clic en la directiva (por ejemplo, "B2C_1_SignupSignin") para abrirla.
Seleccione Diseños de página. Elija un nombre de diseño y, a continuación, elija la versión de diseño de página.

Para obtener información sobre las distintas versiones de diseño de página, consulte el registro de cambios de la versión de diseño de página.

Configuración del diseño de página en el portal en la que se muestra la lista desplegable de la versión de diseño de página

Para especificar una versión de diseño de página para las páginas de directivas personalizadas:

Seleccione un diseño de página para los elementos de la interfaz de usuario de la aplicación.
Defina una versión de diseño de página con la versión contract de página para todas las definiciones de contenido de la directiva personalizada. El formato del valor debe contener la palabra contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:version.

En el ejemplo siguiente se muestran los identificadores de definición de contenido y el elemento DataUri correspondiente con el contrato de página:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Habilitación de JavaScript

En las propiedades del flujo de usuario, puede habilitar JavaScript. Al habilitar JavaScript también se aplica el uso de un diseño de página. A continuación, puede establecer la versión de diseño de página para el flujo de usuario, tal como se describe en la sección siguiente.

Página de propiedades del flujo de usuario con la opción Habilitar JavaScript resaltada

Para habilitar la ejecución del script, agregue el elemento ScriptExecution al elemento RelyingParty .

Abra el archivo de directiva personalizado. Por ejemplo, SignUpOrSignin.xml.

Agregue el elemento ScriptExecution al elemento RelyingParty :

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>
  ...
</RelyingParty>

Guarde y cargue el archivo.

Directrices para usar JavaScript

Siga estas instrucciones al personalizar la interfaz de la aplicación mediante JavaScript:

No lo hagas:
- Enlazar un evento de clic con elementos HTML <a>.
- Tomar una dependencia del código Azure AD B2C o de los comentarios.
- cambie el orden o la jerarquía de los elementos HTML de Azure AD B2C. Use una directiva de Azure AD B2C para controlar el orden de los elementos de la interfaz de usuario.
Puede utilizar cualquier servicio RESTful teniendo en cuenta lo siguiente:
- Es posible que tenga que establecer el CORS del servicio RESTful para permitir llamadas HTTP del lado cliente.
- Asegúrese de que el servicio RESTful sea seguro y use solo el protocolo HTTPS.
- No use JavaScript directamente para llamar a los puntos de conexión de Azure AD B2C.
Puede insertar javaScript o puede vincular a archivos javaScript externos. Al usar un archivo JavaScript externo, asegúrese de usar la dirección URL absoluta y no una dirección URL relativa.
Marcos de JavaScript:
- Azure AD B2C usa una versión específica de jQuery. No incluya otra versión de jQuery. El uso de más de una versión en la misma página provoca problemas.
- No se admite el uso de RequireJS.
- La mayoría de los marcos de JavaScript no son compatibles con Azure AD B2C.
La configuración de Azure AD B2C se puede leer realizando llamadas a objetos como window.SETTINGS y window.CONTENT, como el idioma actual de la interfaz de usuario. No cambie el valor de estos objetos.
Para personalizar el mensaje de error de Azure AD B2C, use la localización en una directiva.
Si se puede lograr algo mediante una directiva, por lo general es la manera recomendada.
Se recomienda usar nuestros controles de interfaz de usuario existentes, como botones, en lugar de ocultarlos e implementar enlaces de clic en sus propios controles de interfaz de usuario. Este enfoque garantiza que la experiencia del usuario siga funcionando correctamente incluso cuando se publiquen nuevas actualizaciones de contrato de página.

Ejemplos de JavaScript

Mostrar u ocultar una contraseña

Una manera habitual de ayudar a los clientes con su éxito de registro es permitirles ver lo que han escrito como contraseña. Esta opción ayuda a los usuarios a registrarse al permitirles ver y realizar fácilmente correcciones en su contraseña si es necesario. Cualquier campo de tipo contraseña tiene una casilla con una etiqueta Mostrar contraseña . Esto permite al usuario ver la contraseña en texto sin formato. Incluya este fragmento de código en la plantilla de registro o de inicio de sesión para una página autoafirmada:

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

Agregar términos de uso

Incluya el código siguiente en la página donde desea incluir una casilla Términos de uso . Normalmente, esta casilla es necesaria en las páginas de registro de la cuenta local y de registro de cuentas sociales.

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="termsOfUse"]');
    if (!termsOfUseLabel) {
        return;
    }

    // get the label text
    var termsLabelText = termsOfUseLabel.innerHTML;

    // create a new <a> element with the same inner text
    var termsOfUseUrl = 'https://learn.microsoft.com/legal/termsofuse';
    var termsOfUseLink = document.createElement('a');
    termsOfUseLink.setAttribute('href', termsOfUseUrl);
    termsOfUseLink.setAttribute('target', '_blank');
    termsOfUseLink.appendChild(document.createTextNode(termsLabelText));

    // replace the label text with the new element
    termsOfUseLabel.replaceChild(termsOfUseLink, termsOfUseLabel.firstChild);
}

En el código, reemplace por termsOfUseUrl el vínculo al contrato de términos de uso. Para el directorio, cree un nuevo atributo de usuario denominado termsOfUse y, a continuación, incluya termsOfUse como atributo de usuario.

Como alternativa, puede agregar un vínculo en la parte inferior de las páginas autoafirmadas, sin usar JavaScript. Use la siguiente localización:

<LocalizedResources Id="api.localaccountsignup.en">
  <LocalizedStrings>
    <!-- The following elements will display a link at the bottom of the page. -->
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Terms of use</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">termsOfUseUrl</LocalizedString>
    </LocalizedStrings>
</LocalizedResources>

Reemplace termsOfUseUrl por el vínculo a la directiva de privacidad y los términos de uso de su organización.

Pasos siguientes

Obtenga más información sobre cómo personalizar la interfaz de usuario de la aplicación en Azure Active Directory B2C.

Compartir a través de