Compartir a través de

Configuración de opciones de autenticación en una aplicación de página única mediante Azure AD B2C

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.

En este artículo se describe cómo personalizar y mejorar la experiencia de autenticación de Azure Active Directory B2C (Azure AD B2C) para la aplicación de página única (SPA).

Antes de empezar, familiarícese con el siguiente artículo: Configuración de la autenticación en una aplicación web de ejemplo.

Uso de un dominio personalizado

Mediante el uso de un dominio personalizado, puede personalizar completamente la dirección URL de autenticación. Desde la perspectiva del usuario, los usuarios permanecen en el dominio durante el proceso de autenticación, en lugar de redirigirse al nombre de dominio de Azure AD B2C b2clogin.com.

También puede reemplazar el nombre del inquilino de B2C (contoso.onmicrosoft.com) en la dirección URL de la solicitud de autenticación por el GUID del id. de inquilino para quitar todas las referencias a "b2c" en la dirección URL. Por ejemplo, puede cambiar https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ a https://account.contosobank.co.uk/<tenant ID GUID>/.

Para usar un dominio personalizado y el identificador de inquilino en la dirección URL de autenticación, siga las instrucciones de Habilitar dominios personalizados. Busque el objeto de configuración de la Biblioteca de autenticación de Microsoft (MSAL) y cambie las autoridades y las autenticaciones conocidas para usar el nombre de dominio personalizado y el identificador de inquilino.

El código JavaScript siguiente muestra el objeto de configuración de MSAL antes del cambio:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

El código JavaScript siguiente muestra el objeto de configuración de MSAL después del cambio:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.___domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.___domain.com"],
      ...
    },
  ...
}

Rellenar previamente el nombre de usuario

Durante un proceso de inicio de sesión del usuario, la aplicación podría dirigirse a un usuario específico. Cuando una aplicación tiene como destino un usuario, puede especificar en la solicitud de autorización el login_hint parámetro de consulta con el nombre de inicio de sesión del usuario. Azure AD B2C rellena automáticamente el nombre de inicio de sesión y el usuario debe proporcionar solo la contraseña.

Para rellenar previamente el nombre de inicio de sesión, haga lo siguiente:

  1. Si usa una directiva personalizada, agregue la notificación de entrada necesaria, como se describe en Configuración del inicio de sesión directo.

  2. Cree un objeto para almacenar el login_hint y pase este objeto al método loginPopup() de MSAL .

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Preseleccionar un proveedor de identidades

Si configuró el recorrido de inicio de sesión de la aplicación para incluir cuentas sociales, como Facebook, LinkedIn o Google, puede especificar el domain_hint parámetro . Este parámetro de consulta proporciona una sugerencia a Azure AD B2C sobre el proveedor de identidades sociales que se debe usar para el inicio de sesión. Por ejemplo, si la aplicación especifica domain_hint=facebook.com, el flujo de inicio de sesión va directamente a la página de inicio de sesión de Facebook.

Para redirigir a los usuarios a un proveedor de identidades externo, haga lo siguiente:

  1. Compruebe el nombre de dominio del proveedor de identidades externo. Para obtener más información, consulte Redireccionamiento del inicio de sesión a un proveedor de redes sociales.

  2. Cree un objeto para almacenar extraQueryParameters y pase este objeto al método loginPopup() de MSAL .

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

Especificar el idioma de la interfaz de usuario

La personalización de idioma en Azure AD B2C permite al flujo de usuario adaptarse a diversas lenguas para satisfacer las necesidades de los clientes. Para obtener más información, consulte Personalización de idioma.

Para establecer el idioma preferido, haga lo siguiente:

  1. Configurar la personalización del idioma.

  2. Cree un objeto para almacenar extraQueryParameters y pase este objeto al método loginPopup() de MSAL .

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

Pasar un parámetro de cadena de consulta personalizado

Con las directivas personalizadas, puede pasar un parámetro de cadena de consulta personalizado. Un buen ejemplo de caso de uso es cuando desea cambiar dinámicamente el contenido de la página.

Para pasar un parámetro de cadena de consulta personalizado, haga lo siguiente:

  1. Configure el elemento ContentDefinitionParameters .

  2. Cree un objeto para almacenar extraQueryParameters y pase este objeto al método loginPopup() de MSAL .

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

Paso de una sugerencia de token de identificador

Una aplicación de terceros de confianza puede enviar un JSON Web Token (JWT) entrante como parte de la solicitud de autorización de OAuth2. El token de entrada es una sugerencia sobre el usuario o la solicitud de autorización. Azure AD B2C valida el token y luego extrae la reclamación.

Para incluir una sugerencia de token de identificador en la solicitud de autenticación, haga lo siguiente:

  1. En la directiva personalizada, defina un perfil técnico de sugerencia para el token de identificador.

  2. Cree un objeto para almacenar extraQueryParameters y pase este objeto al método loginPopup() de MSAL .

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Protección de la redirección de cierre de sesión

Después del cierre de sesión, el usuario se redirige al URI especificado en el post_logout_redirect_uri parámetro , independientemente de las direcciones URL de respuesta especificadas para la aplicación. Sin embargo, si se pasa un valor válido id_token_hint y se activa el token requerir id. en las solicitudes de cierre de sesión , Azure AD B2C comprueba que el valor de post_logout_redirect_uri coincide con uno de los URI de redireccionamiento configurados de la aplicación antes de realizar el redireccionamiento. Si no se configuró ninguna dirección URL de respuesta coincidente para la aplicación, se muestra un mensaje de error y no se redirige al usuario.

Para admitir un URI de redirección de cierre de sesión seguro, siga estos pasos:

  1. Cree una variable accesible globalmente para almacenar .id_token

    let id_token = "";

  2. En la función MSALhandleResponse, analice el id_token objeto authenticationResult del objeto en la id_token variable .

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. En la signOut función , agregue el id_token_hint parámetro al objeto logoutRequest .

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

En el ejemplo anterior, el post_logout_redirect_uri pasado a la solicitud de cierre de sesión tendrá el formato : https://your-app.com/. Esta dirección URL debe agregarse a la dirección URL de respuesta del registro de aplicaciones.

Habilitación del cierre de sesión único

El cierre de sesión único en Azure AD B2C usa el cierre de sesión del canal front-channel de OpenId Connect para realizar solicitudes de cierre de sesión a todas las aplicaciones en las que el usuario ha iniciado sesión a través de Azure AD B2C.

Estas solicitudes de cierre de sesión se realizan desde la página de cierre de sesión de Azure AD B2C, en un Iframe oculto. Los Iframes realizan solicitudes HTTP a todos los puntos de conexión de cierre de sesión del canal front-channel registrados para las aplicaciones que Azure AD B2C ha registrado como iniciado sesión.

El punto de conexión de cierre de sesión de cada aplicación debe llamar al método MSAL logout(). También debe configurar explícitamente MSAL para que se ejecute dentro de un Iframe en este escenario estableciendo allowRedirectInIframetrueen .

El ejemplo de código siguiente establece en allowRedirectInIframetrue:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Pasos siguientes

Obtenga más información sobre las opciones de configuración deMSAL.js.