Inicio de sesión único con MASL.js

El inicio de sesión único (SSO) proporciona una experiencia más fluida al reducir el número de veces que se solicita credenciales a un usuario. Los usuarios escriben sus credenciales una vez y otras aplicaciones del mismo dispositivo pueden reutilizar la sesión establecida sin preguntar más.

Microsoft Entra ID habilita el inicio de sesión único estableciendo una cookie de sesión cuando un usuario se autentica por primera vez. MSAL.js también almacena en caché los tokens de identificador y los tokens de acceso del usuario en el almacenamiento del explorador por dominio de aplicación. Los dos mecanismos, la cookie de sesión de Microsoft Entra y la caché de la Biblioteca de autenticación de Microsoft (MSAL), son independientes entre sí, pero funcionan conjuntamente para proporcionar el comportamiento de inicio de sesión único.

Inicio de sesión único entre pestañas del explorador para la misma aplicación

Cuando un usuario tiene una aplicación abierta en varias pestañas e inicia sesión en una de ellas, puede iniciar sesión en la misma aplicación abierta en otras pestañas sin que se le solicite. Para ello, debe establecer cacheLocation en el objeto de configuración de MSAL.js como localStorage, tal y como se muestra en el ejemplo siguiente:

const config = {
  auth: {
    clientId: "1111-2222-3333-4444-55555555",
  },
  cache: {
    cacheLocation: "localStorage",
  },
};

const msalInstance = new msal.PublicClientApplication(config);

En este caso, las instancias de aplicación de diferentes pestañas del explorador usan la misma caché de MSAL, compartiendo así el estado de autenticación entre ellas. También puede usar eventos MSAL para actualizar instancias de aplicación cuando un usuario inicia sesión desde otra pestaña o ventana del explorador. Para obtener más información, consulte: Sincronización del estado de inicio de sesión entre pestañas y ventanas

Inicio de sesión único entre diferentes aplicaciones

Cuando un usuario se autentica, se establece una cookie de sesión en el dominio Microsoft Entra en el explorador. MSAL.js se basa en esta cookie de sesión para proporcionar SSO para el usuario entre diferentes aplicaciones. En concreto, MSAL.js ofrece el ssoSilent método para iniciar sesión al usuario y obtener tokens sin interacción. Sin embargo, si el usuario tiene varias cuentas de usuario en una sesión con Microsoft Entra ID, se le pedirá que elija una cuenta con la que iniciar sesión. Así pues, hay dos formas de implementar SSO mediante el método ssoSilent.

Con indicación del usuario

Para mejorar el rendimiento y asegurarse de que el servidor de autorización buscará la sesión de cuenta correcta, puede pasar una de las siguientes opciones en el objeto de solicitud del ssoSilent método para obtener el token de forma silenciosa.

Se recomienda usar la login_hintnotificación de token de identificador opcional proporcionada a ssoSilent como loginHint ya que es la sugerencia de cuenta más confiable de solicitudes silenciosas e interactivas.

Uso de una sugerencia de inicio de sesión

La notificación opcional login_hint proporciona a Microsoft Entra ID una indicación sobre la cuenta de usuario que está intentando iniciar sesión. Para omitir el cuadro de selección de cuenta que suele mostrarse durante las solicitudes interactivas de autenticación, proporcione loginHint, como se muestra:

const silentRequest = {
    scopes: ["User.Read", "Mail.Read"],
    loginHint: "user@contoso.com"
};

try {
    const loginResponse = await msalInstance.ssoSilent(silentRequest);
} catch (err) {
    if (err instanceof InteractionRequiredAuthError) {
        const loginResponse = await msalInstance.loginPopup(silentRequest).catch(error => {
            // handle error
        });
    } else {
        // handle error
    }
}

En este ejemplo, loginHint contiene el correo electrónico o el UPN del usuario, que se usa como sugerencia durante las solicitudes de token interactivas. La sugerencia se puede pasar entre aplicaciones para facilitar el inicio de sesión único silencioso, donde la aplicación A puede iniciar la sesión de un usuario, leer loginHint y, luego, enviar la notificación y el contexto del inquilino actual a la aplicación B. Microsoft Entra ID intentará rellenar previamente el formulario de inicio de sesión u omitir el mensaje de selección de cuenta y continuará directamente con el proceso de autenticación del usuario especificado.

Si la información del login_hint claim no coincide con ningún usuario existente, se redirige al usuario para que siga el flujo estándar de inicio de sesión, incluida la selección de cuenta.

Uso de un identificador de sesión

Para usar un ID de sesión, añade sid como declaración opcional a los tokens de ID de tu aplicación. La notificación sid permite a una aplicación identificar la sesión de Microsoft Entra de un usuario con independencia del nombre de la cuenta o del nombre de usuario. Para obtener información sobre cómo agregar notificaciones opcionales como sid, consulte Proporcionar notificaciones opcionales a la aplicación. Use el identificador de sesión (SID) en las solicitudes de autenticación silenciosas que realice con ssoSilent en MSAL.js.

const request = {
  scopes: ["user.read"],
  sid: sid,
};

 try {
    const loginResponse = await msalInstance.ssoSilent(request);
} catch (err) {
    if (err instanceof InteractionRequiredAuthError) {
        const loginResponse = await msalInstance.loginPopup(request).catch(error => {
            // handle error
        });
    } else {
        // handle error
    }
}

Uso de un objeto de cuenta

Si conoce la información de la cuenta de usuario, también puede recuperar la cuenta de usuario mediante los getAccountByUsername() métodos o getAccountByHomeId() :

const username = "test@contoso.com";
const myAccount  = msalInstance.getAccountByUsername(username);

const request = {
    scopes: ["User.Read"],
    account: myAccount
};

try {
    const loginResponse = await msalInstance.ssoSilent(request);
} catch (err) {
    if (err instanceof InteractionRequiredAuthError) {
        const loginResponse = await msalInstance.loginPopup(request).catch(error => {
            // handle error
        });
    } else {
        // handle error
    }
}

Sin sugerencia de usuario

Puede intentar usar el ssoSilent método sin pasar ningún account, sid o login_hint como se muestra en el código siguiente:

const request = {
    scopes: ["User.Read"]
};

try {
    const loginResponse = await msalInstance.ssoSilent(request);
} catch (err) {
    if (err instanceof InteractionRequiredAuthError) {
        const loginResponse = await msalInstance.loginPopup(request).catch(error => {
            // handle error
        });
    } else {
        // handle error
    }
}

Sin embargo, hay una probabilidad de errores de inicio de sesión silenciosos si la aplicación tiene varios usuarios en una sola sesión del explorador o si el usuario tiene varias cuentas para esa sesión de explorador único. Se puede mostrar el siguiente error si hay varias cuentas disponibles:

InteractionRequiredAuthError: interaction_required: AADSTS16000: Either multiple user identities are available for the current request or selected account is not supported for the scenario.

El error indica que el servidor no pudo determinar en qué cuenta iniciar sesión y requerirá uno de los parámetros del ejemplo anterior (account, login_hint, sid) o un inicio de sesión interactivo para elegir la cuenta.

Consideraciones al usar ssoSilent

URI de redirección (dirección URL de respuesta)

Para mejorar el rendimiento y ayudar a evitar problemas, configure redirectUri para que sea una página en blanco u otra página que no use MSAL.

  • Si la aplicación solo usa métodos emergentes y silenciosos, establezca redirectUri en el objeto de configuración PublicClientApplication.
  • Si la aplicación también usa métodos de redirección, establezca el valor de redirectUri para cada solicitud.

Cookies de terceros

ssoSilentintenta abrir un iframe oculto y reutilizar una sesión existente con Microsoft Entra ID. Esto no funcionará en exploradores que bloqueen cookies de terceros como Safari y provocarán un error de interacción:

InteractionRequiredAuthError: login_required: AADSTS50058: A silent sign-in request was sent but no user is signed in. The cookies used to represent the user's session were not sent in the request to Azure AD

Para resolver el error, el usuario debe crear una solicitud de autenticación interactiva mediante loginPopup() o loginRedirect(). En algunos casos, el valor del símbolo del sistema none se puede usar junto con un método de MSAL.js interactivo para lograr el inicio de sesión único. Consulte Solicitudes interactivas con prompt=none para obtener más información. Si ya tiene la información de inicio de sesión del usuario, puede pasar los parámetros opcionales loginHint o sid para iniciar sesión en una cuenta específica.

Negación del inicio de sesión único con el valor de símbolo del sistema login

Si prefiere que Microsoft Entra ID solicite al usuario que introduzca sus credenciales a pesar de que haya una sesión activa con el servidor de autorización, puede usar el parámetro de solicitud login en las solicitudes con MSAL.js. Consulte el comportamiento del parámetro prompt en MSAL.js para obtener más información.

Uso compartido del estado de autenticación entre ADAL.js y MSAL.js

MSAL.js aporta paridad de características con ADAL.js para escenarios de autenticación de Microsoft Entra. Para que la migración de ADAL.js a MSAL.js sea fácil y comparta el estado de autenticación entre aplicaciones, la biblioteca lee el token de identificador que representa la sesión del usuario en ADAL.js caché. Para aprovechar esto al migrar desde ADAL.js, deberá asegurarse de que las bibliotecas usan localStorage para almacenar en caché tokens. Establezca cacheLocation en localStorage en la configuración tanto de MSAL.js como de ADAL.js durante la inicialización, de la siguiente manera:


// In ADAL.js
window.config = {
  clientId: "1111-2222-3333-4444-55555555",
  cacheLocation: "localStorage",
};

var authContext = new AuthenticationContext(config);

// In latest MSAL.js version
const config = {
  auth: {
    clientId: "1111-2222-3333-4444-55555555",
  },
  cache: {
    cacheLocation: "localStorage",
  },
};

const msalInstance = new msal.PublicClientApplication(config);

Pasos siguientes

Para obtener más información sobre el inicio de sesión único, consulte:

  • Last updated on