Experiencia de registro o inicio de sesión integrada

Esta característica está disponible solo para directivas personalizadas. Para conocer los pasos de configuración, seleccione Directiva personalizada en el selector anterior.

Para una experiencia de registro o inicio de sesión más sencilla, puede evitar redirigir a los usuarios a una página de registro o de inicio de sesión independiente, o bien generar una ventana emergente. Mediante el uso del elemento HTML de marco insertado <iframe>, puede insertar la interfaz de usuario de inicio de sesión de Azure AD B2C directamente en la aplicación web.

Inicio de sesión integrado en la aplicación web

El elemento <iframe> iframe se usa para incrustar un documento en una página web HTML5. Puede usar el elemento iframe para insertar la interfaz de usuario de inicio de sesión de Azure AD B2C directamente en la aplicación web, como se muestra en el ejemplo siguiente:

Al usar iframe, tenga en cuenta lo siguiente:

• El registro o inicio de sesión incrustado solo admite cuentas locales. La mayoría de los proveedores de identidades sociales (por ejemplo, Google y Facebook) impiden que sus páginas de inicio de sesión se representen en marcos insertados.
• Algunos exploradores, como Safari o Chrome en modo incógnito, ven las cookies de sesión de Azure AD B2C dentro de un iframe como cookies de terceros. Estos navegadores pueden bloquear o borrar estas cookies, lo que puede dar lugar a una experiencia de usuario menos óptima. Para evitar este problema, asegúrese de que el nombre de dominio de la aplicación y el dominio de Azure AD B2C tienen el mismo origen. Para usar el mismo origen, habilite los dominios personalizados para el inquilino de Azure AD B2C y, a continuación, configure la aplicación web con el mismo origen. Por ejemplo, una aplicación hospedada en "https://app.contoso.com" tiene el mismo origen que Azure AD B2C que se ejecuta en "https://login.contoso.com".

Prerrequisitos

• Complete los pasos descritos en Introducción a las directivas personalizadas en Active Directory B2C.
• Habilite dominios personalizados para las directivas.

Configuración de la directiva

Para permitir que la interfaz de usuario de Azure AD B2C se inserte en un iframe, se debe incluir una directiva Content-Security-Policy de seguridad de contenido y opciones X-Frame-Options de marco en los encabezados de respuesta HTTP de Azure AD B2C. Estos encabezados permiten que la interfaz de usuario de Azure AD B2C se ejecute en el nombre de dominio de la aplicación.

Agregue un elemento JourneyFraming dentro del elemento RelyingParty . El elemento UserJourneyBehaviors debe seguir defaultUserJourney. El elemento UserJourneyBehaviors debe tener este aspecto:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

El atributo Sources contiene el URI de la aplicación web. Agregue un espacio entre los URI. Cada URI debe cumplir los siguientes requisitos:

• La aplicación debe confiar y poseer el URI.
• El URI debe usar el esquema https.
• Se debe especificar el URI completo de la aplicación web. No se admiten los caracteres comodín.
• El elemento JourneyFraming solo permite que las direcciones URL del sitio con un dominio de nivel superior (TLD) de dos a siete caracteres se alineen con los TLD reconocidos habitualmente.

Además, se recomienda impedir que su propio nombre de dominio se inserte en un iframe estableciendo los Content-Security-Policy encabezados y X-Frame-Options respectivamente en las páginas de la aplicación. Esta técnica mitiga los problemas de seguridad relacionados con los exploradores más antiguos relacionados con la inserción anidada de iframes.

Ajustar la interfaz de usuario de la política

Con la personalización de la interfaz de usuario de Azure AD B2C, tiene casi control total sobre el contenido HTML y CSS que presenta a los usuarios. Siga los pasos para personalizar una página HTML mediante definiciones de contenido. Para ajustar la interfaz de usuario de Azure AD B2C al tamaño de iframe, proporcione una página HTML limpia sin un fondo y espacios adicionales.

El siguiente código CSS oculta los elementos HTML de Azure AD B2C y ajusta el tamaño del panel para rellenar el iframe.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

En algunos casos, es posible que quiera informar a la aplicación sobre la página de Azure AD B2C que está visible actualmente. Por ejemplo, cuando un usuario selecciona la opción de registro, puede que quiera que la aplicación responda ocultando los vínculos para iniciar sesión con una cuenta social o ajustando el tamaño de iframe.

Para informar a su aplicación sobre la página actual de Azure AD B2C, habilite su directiva de JavaScript y luego use HTML5 para enviar mensajes. El código JavaScript siguiente envía un mensaje de publicación a la aplicación con signUp:

window.parent.postMessage("signUp", '*');

Configuración de una aplicación web

Cuando un usuario selecciona el botón de inicio de sesión, la aplicación web genera una solicitud de autorización que lleva al usuario a la experiencia de inicio de sesión de Azure AD B2C. Una vez completado el inicio de sesión, Azure AD B2C devuelve un token de identificador o código de autorización al URI de redireccionamiento configurado dentro de la aplicación.

Para admitir el inicio de sesión insertado, el atributo iframe src apunta al controlador de inicio de sesión, como /account/SignUpSignIn, que genera la solicitud de autorización y redirige al usuario a la directiva de Azure AD B2C.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

Una vez que la aplicación recibe y valida el token de identificador, completa el flujo de autorización y reconoce y confía en el usuario. Dado que el flujo de autorización se produce dentro del iframe, debe volver a cargar la página principal. Después de volver a cargar la página, el botón de inicio de sesión cambia a "cerrar sesión" y el nombre de usuario se presenta en la interfaz de usuario.

En el ejemplo siguiente se muestra cómo el URI de redirección de inicio de sesión puede actualizar la página principal:

window.top.location.reload();

Agregar inicio de sesión con cuentas sociales a una aplicación web

Los proveedores de identidades sociales impiden que sus páginas de inicio de sesión se muestren en marcos en línea. Puede usar una directiva independiente para las cuentas sociales o puede usar una sola directiva para el inicio de sesión y el registro con cuentas locales y sociales. A continuación, puede usar el domain_hint parámetro de cadena de consulta. El parámetro de sugerencia de dominio lleva al usuario directamente a la página de inicio de sesión del proveedor de identidades sociales.

En la aplicación, agregue el inicio de sesión con botones de cuenta social. Cuando un usuario hace clic en uno de los botones de la cuenta social, el control debe cambiar el nombre de la directiva o establecer el parámetro de sugerencia de dominio.

El URI de redirección puede ser el mismo URI de redirección que usa el iframe. Puede omitir la recarga de página.

Configuración de una aplicación de página única

Para una aplicación de página única, también necesita una segunda página HTML de "inicio de sesión" que se cargue en el iframe. Esta página de inicio de sesión hospeda el código de la biblioteca de autenticación que genera el código de autorización y devuelve el token.

Cuando la aplicación de una sola página necesita el token de acceso, use código JavaScript para obtener el token de acceso del iframe y el objeto que lo contiene.

El código siguiente es un ejemplo que se ejecuta en la página principal y llama al código JavaScript de un iframe:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

Pasos siguientes

Consulte los artículos relacionados siguientes:

• Personalización de la interfaz de usuario
• Referencia del elemento RelyingParty
• Habilite la directiva para JavaScript
• Ejemplos de código