Compartir a través de

Inicio de sesión único con MASL.js

  • Artículo

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

Microsoft Entra ID permite el inicio de sesión único mediante el establecimiento de 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 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 abierta la aplicación en varias pestañas e inicia sesión en una de ellas, puede iniciar sesión en la misma aplicación abierta en las demás pestañas sin que se le pida confirmación. Para ello, debe establecer cacheLocation en el objeto de configuración de MSAL.js en localStorage como se muestra en el siguiente ejemplo:

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

const msalInstance = new msal.PublicClientApplication(config);

En este caso, las instancias de la aplicación en distintas pestañas del explorador usan la misma caché que MSAL, por lo que se comparte el estado de autenticación entre ellas. También puede usar eventos MSAL para actualizar instancias de la aplicación cuando un usuario inicia sesión desde otra pestaña o ventana del explorador. Para más información, consulte la sección sobre la sincronización del estado con sesión iniciada 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 de Microsoft Entra del explorador. MSAL.js se basa en esta cookie de sesión para proporcionar un inicio de sesión único al usuario entre diferentes aplicaciones. En concreto, MSAL.js ofrece el método ssoSilent para iniciar la sesión del 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. Por tanto, hay dos maneras de lograr el inicio de sesión único con el método ssoSilent.

Con sugerencia de usuario

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

Se recomienda usar la login_hint notificació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 una sugerencia a Microsoft Entra ID sobre la cuenta de usuario que intenta iniciar sesión. Para omitir la solicitud de selección de cuenta que se muestra normalmente durante las solicitudes de autenticación interactivas, 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 de la notificación login_hint no coincide con ningún usuario existente, se le redirigirá para pasar por la experiencia de inicio de sesión estándar, incluida la selección de cuenta.

Uso de un id. de sesión

Para usar un id. de sesión, agregue sid como una notificación opcional a los tokens de id. de la aplicación. La notificación sid permite a la aplicación identificar la sesión de Microsoft Entra de un usuario independientemente del nombre de la cuenta o del nombre de usuario. Para aprender a agregar las notificaciones opcionales como sid, consulte Proporcionar notificaciones opcionales a la aplicación. Use el id. de sesión (SID) en las solicitudes de autenticación silenciosas que haga 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 métodos getAccountByUsername() 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 método ssoSilent sin pasar account, sid ni 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
    }
}

Pero 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 bien 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 ha podido determinar en qué cuenta iniciar sesión y necesitará uno de los parámetros del ejemplo anterior (account, login_hint, sid), o bien un inicio de sesión interactivo para elegir la cuenta.

Consideraciones al usar ssoSilent

URI de redirección (URL de respuesta)

Para mejorar el rendimiento y ayudar a evitar problemas, establezca redirectUri en 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 redireccionamiento, establezca el valor redirectUri en cada solicitud.

Cookies de terceros

ssoSilent intenta abrir un elemento iframe oculto y reutilizar una sesión existente con Microsoft Entra ID. Esto no funcionará en exploradores que bloquean las cookies de terceros, como Safari y provocará 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. Para más información, consulte Solicitudes interactivas con el valor de símbolo del sistema none. 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 pida al usuario que escriba sus credenciales, a pesar de que haya una sesión activa con el servidor de autorización, puede usar el parámetro de mensaje login en las solicitudes con MSAL.js. Para más información, consulte comportamiento de la solicitud de MSAL.js.

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

MSAL.js aporta paridad de características con ADAL.js en escenarios de autenticación de Microsoft Entra. Para facilitar la migración de ADAL.js a MSAL.js y compartir el estado de autenticación entre aplicaciones, la biblioteca lee el token de identificador que representa la sesión del usuario en la caché de ADAL.js. Para poder aprovecharlo al realizar la actualización desde ADAL.js, deberá asegurarse de que las bibliotecas usan localStorage para almacenar los tokens en caché. Al inicializar, establezca cacheLocation en localStorage en la configuración tanto de MSAL.js como de ADAL.js de la manera siguiente:


// 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 más información sobre SSO, vea lo siguiente: