Cierre de sesión de usuarios

Antes de empezar aquí, asegúrese de comprender cómo iniciar sesión, adquirir tokens y administrar las duraciones de los tokens.

Cerrar sesión

El proceso de cierre de sesión de MSAL realiza dos pasos.

1. Borre la memoria caché de MSAL.
2. Borre la sesión en el servidor de identidades.

El PublicClientApplication objeto expone dos API que realizan estas acciones.

msalInstance.logoutRedirect();
msalInstance.logoutPopup();

Estas API borrarán la caché de tokens de los datos de usuario y sesión y, a continuación, navegarán por la ventana del explorador o la ventana emergente a la página de cierre de sesión del servidor. A continuación, el servidor le pedirá al usuario que seleccione la cuenta de la que desea cerrar la sesión y redireccione de nuevo a su postLogoutRedirectUri siempre y cuando se cumplan las condiciones siguientes:

1. El URI se registra como una dirección URL de respuesta en el registro de la aplicación.
2. El URI se proporciona como postLogoutRedirectUri en la configuración PublicClientApplication o en la solicitud de cierre de sesión.
3. El usuario tiene una sesión activa con el proveedor de identidades.
4. (Escenarios de MSA) Se configura una URL de cierre de sesión de canal frontal en el registro de la aplicación.

Si no se cumple alguna de las condiciones anteriores, la página (o la ventana emergente) permanecerá en la página de cierre de sesión del proveedor de identidades.

IMPORTANTE: Si esta navegación de cierre de sesión se interrumpe de cualquier manera, es posible que se borre la memoria caché de MSAL, pero la sesión puede conservarse en el servidor. Asegúrese de que la navegación se completa por completo antes de volver a la aplicación.

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.con/{your_tenant_id}',
        redirectUri: 'https://contoso.com',
        postLogoutRedirectUri: 'https://contoso.com/homepage'
    }
};

Solicitar objetos

Las opciones de configuración se pueden proporcionar a cada una de las API de cierre de sesión para personalizar el comportamiento:

• solicitud de logoutRedirect
• solicitud de logoutPopup

logoutRedirect

El uso logoutRedirect borrará la caché local de tokens de usuario y, a continuación, redirigirá la ventana a la página de cierre de sesión del servidor. No se espera que la promesa devuelta por logoutRedirect se resuelva, pero puede esperarla si necesita impedir que se ejecute otro código antes de que se inicie el redireccionamiento.

Opciones de configuración se pueden proporcionar para personalizar el comportamiento:

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutRedirect({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut"
});

Omitir el cierre de sesión del servidor

Si desea que su aplicación solo realice el cierre de sesión local, puede proporcionar una función de devolución de llamada al parámetro onRedirectNavigate en la petición y hacer que dicha función devuelva false.

msalInstance.logoutRedirect({
    onRedirectNavigate: (url) => {
        // Return false if you would like to stop navigation after local logout
        return false;
    }
});

logoutPopup

La API logoutPopup abrirá la página de cierre de sesión del servidor en una ventana emergente, lo que permitirá que la aplicación mantenga su estado actual. Debido a esto, hay algunas consideraciones adicionales, además de logoutRedirect, al optar por usar ventanas emergentes para cerrar la sesión:

• Se espera que la promesa devuelta por logoutPopup se resuelva después de que se cierre el elemento emergente.
• postLogoutRedirectUri es necesario para que MSAL pueda cerrar el elemento emergente cuando se complete el cierre de sesión.
• postLogoutRedirectUri se abrirá en la ventana emergente, no en el marco principal. Si necesita que la aplicación de nivel superior se redirija después de cerrar sesión, puede usar el mainWindowRedirectUri parámetro en la solicitud de cierre de sesión.

Se pueden proporcionar opciones de configuración para personalizar el comportamiento.

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutPopup({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut",
    mainWindowRedirectUri: "https://contoso.com/homePage",
    popupWindowAttributes: {
        popupSize: {
            height: 100,
            width: 100
        },
        popupPosition: {
            top: 100,
            left: 100
        }
    }
});

Cierre de sesión sin confirmación

Si la aplicación cliente tiene habilitada la reclamación opcional login_hint para tokens de identificador (ID), puede aprovechar la reclamación login_hint del token de ID para realizar un cierre de sesión "silencioso" o sin solicitud al usar logoutRedirect o logoutPopup. Hay dos maneras de lograr un cierre de sesión sin mensajes:

Opción 1: Dejar que MSAL analice automáticamente login_hint a partir de las declaraciones del token de ID de la cuenta

La primera y la opción más sencilla es proporcionar el objeto de cuenta para el que desea finalizar la sesión en la API de cierre de sesión. MSAL comprobará si la declaración login_hint está disponible en el token de ID de la cuenta y lo agregará automáticamente a la solicitud de cierre de sesión como logout_hint para omitir el prompt del selector de cuentas.

const currentAccount = msalInstance.getAccount({ homeAccountId });
// The account's ID Token must contain the login_hint optional claim to avoid the account picker
await msalInstance.logoutRedirect({ account: currentAccount});

Opción 2: Establecer manualmente la opción logoutHint en la solicitud de cierre de sesión

Como alternativa, si prefiere establecer manualmente el logoutHint, puede extraer la declaración login_hint en su aplicación y establecerla como el logoutHint en la solicitud de cierre de sesión:

const currentAccount = msalInstance.getAccount({ homeAccountId });

// Extract login hint to use as logout hint
const logoutHint = currentAccount.idTokenClaims.login_hint;
await msalInstance.logoutPopup({ logoutHint: logoutHint });

Nota: En función de la API que elija (redireccionamiento o ventana emergente), la aplicación seguirá redireccionar o abrir un elemento emergente para finalizar la sesión del servidor. La diferencia es que el usuario no verá ni tendrá que interactuar con el símbolo del selector de cuentas del servidor.

Cierre de sesión por front-channel

Microsoft Entra ID y Azure AD B2C admiten la característica de cierre de sesión del canal front-channel de OAuth, que permite el cierre de sesión único en todas las aplicaciones cuando un usuario inicia el cierre de sesión. Para aprovechar esta característica con MSAL.js, realice los pasos siguientes:

1. En la aplicación, cree una página de cierre de sesión dedicada. Esta página no debe realizar ninguna otra función, como adquirir tokens en la carga de página (consulte a continuación para obtener más información). Tenga en cuenta que esta página se cargará en un iFrame oculto y, para los usuarios de Microsoft Entra ID y MSA, incluirá los parámetros de consulta iss y sid.
2. En el centro de administración Microsoft Entra, vaya a la página Autenticación de su aplicación y registre la página del paso uno en URL de cierre de sesión de canal frontal. Tenga en cuenta que esta página debe cargarse a través de https.

Requisitos para la página de cierre de sesión del canal frontal

La página que se usa para el cierre de sesión del canal front-channel debe compilarse de la siguiente manera:

1. En la carga de páginas, invoque automáticamente la API de MSAL logoutRedirect .
2. En la configuración PublicClientApplication, establezca system.allowRedirectInIframe en true.
3. Al invocar logout, se recomienda evitar la redirección en el iframe a la página de cierre de sesión (consulte más arriba).

Ejemplo:

const msal = new PublicClientApplication({
    auth: {
        clientId: "my-client-id"
    },
    system: {
        allowRedirectInIframe: true
    }
})

// Automatically on page load
msal.logoutRedirect({
    onRedirectNavigate: () => {
        // Return false to stop navigation after local logout
        return false;
    }
});

Ahora, cuando un usuario cierra sesión de otra aplicación, la dirección URL de cierre de sesión del canal front-channel de la aplicación se cargará en un iframe oculto y MSAL.js borrará su caché para completar el cierre de sesión único.

Ejemplos de cierre de sesión mediante front-channel

En los ejemplos siguientes se muestra cómo implementar el cierre de sesión del canal front-channel mediante MSAL.js:

• MSAL Angular v2: ejemplo de Angular 11
• MSAL React: ejemplo de React Router

Events

Si distintas partes de tu aplicación necesitan reaccionar al cierre de sesión sin acceso directo a la promesa devuelta por logoutRedirect o logoutPopup, puedes usar la API de eventos.

Se emitirán eventos cuando el cierre de sesión se complete correctamente o falle, y cuando se abra la ventana emergente al usar logoutPopup.

Notas importantes

• Si no se pasa ninguna cuenta a la API de cierre de sesión o ningún objeto EndSessionRequest, se cerrará la sesión de todas las cuentas.
• Si se pasa una cuenta a la API de cierre de sesión, MSAL solo borrará los tokens relacionados con esa cuenta.
• El cierre de sesión de servidor es una característica útil y, como tal, se realiza con el mejor esfuerzo. Las API de cierre de sesión se resolverán correctamente siempre que la caché de aplicaciones local se haya borrado correctamente, independientemente de si el cierre de sesión del servidor se ha realizado correctamente.

Pasos siguientes

Profundice en temas más avanzados, como:

• Almacenamiento en caché
• Opciones de configuración avanzada