Inicialización de aplicaciones cliente con MSAL.js

En este artículo se describe la inicialización de la Biblioteca de autenticación de Microsoft para JavaScript (MSAL.js) con una instancia de una aplicación de agente de usuario.

La aplicación de agente de usuario es una forma de aplicación cliente pública en la que el código cliente se ejecuta en un agente de usuario, como un explorador web. Los clientes de este tipo no almacenan secretos, porque el contexto del explorador es de acceso público.

Para obtener más información sobre los tipos de aplicaciones cliente y las opciones de configuración de las aplicaciones, consulte Aplicaciones cliente públicas y confidenciales en MSAL.

Requisitos previos

Antes de inicializar una aplicación, primero tendrá que registrarla en el Centro de administración de Microsoft Entra, estableciendo una relación de confianza entre la aplicación y la Plataforma de identidad de Microsoft.

Después de registrar la aplicación, necesitará la totalidad o parte de los valores siguientes que se pueden encontrar en el Centro de administración de Microsoft Entra.

Value	Obligatorio	Descripción
Id. de aplicación (cliente)	Obligatorio	GUID que identifica de forma única la aplicación en la Plataforma de identidad de Microsoft.
Autoridad	Opcional	La URL del proveedor de identidades (la instancia) y la audiencia de inicio de sesión para la aplicación. La instancia y la audiencia de inicio de sesión, cuando se concatenan, constituyen la autoridad.
Id. de directorio (inquilino)	Opcional	Especifique el identificador de directorio (inquilino) si va a compilar una aplicación de línea de negocio exclusivamente para su organización, en ocasiones denominada aplicación de un único inquilino.
URI de redireccionamiento	Opcional	Si va a compilar una aplicación web, redirectUri especifica a dónde debe devolver el proveedor de identidades (la Plataforma de identidad de Microsoft) los tokens de seguridad que ha emitido.

Inicialización de aplicaciones MSAL.js 2.x

Para inicializar el contexto de autenticación de MSAL.js, cree una instancia de PublicClientApplication con un objeto Configuration. La propiedad de configuración mínima necesaria es el clientID de la aplicación, que se muestra como el Id. de aplicación (cliente) en la página Información general del registro de la aplicación en el Centro de administración de Microsoft Entra.

Este es un ejemplo de objeto Configuration y creación de instancias de PublicClientApplication:

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
    knownAuthorities: [],
    redirectUri: "https://localhost:{port}/redirect",
    postLogoutRedirectUri: "https://localhost:{port}/redirect",
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    // Handle redirect response
  })
  .catch((error) => {
    // Handle redirect error
  });

handleRedirectPromise

Invoque handleRedirectPromise cuando la aplicación usa los flujos de redireccionamiento. Al usar los flujos de redireccionamiento, se debe ejecutar handleRedirectPromise en la carga de cada página.

Tres resultados son posibles a partir de la promesa:

• Se invoca a .then y tokenResponse es verdadero: La aplicación vuelve de una operación de redireccionamiento que se ha completado correctamente.
• Se invoca a .then y tokenResponse es falso (null): La aplicación no vuelve de una operación de redireccionamiento.
• Se invoca a .catch: La aplicación vuelve de una operación de redireccionamiento y hubo un error.

Inicialización de aplicaciones MSAL.js 1.x

Para inicializar el contexto de autenticación de MSAL 1.x, cree una instancia de UserAgentApplication con un objeto Configuration. La propiedad de configuración mínima necesaria es el clientID de la aplicación, que se muestra como el Id. de aplicación (cliente) en la página Información general del registro de la aplicación en Azure Portal.

Para los métodos de autenticación con flujos de redireccionamiento (loginRedirect y acquireTokenRedirect), en MSAL.js 1.2.x o en versiones anteriores, tendrá que registrar de forma explícita una devolución de llamada para los casos correctos o con error mediante el método handleRedirectCallback(). El registro explícito de la devolución de llamada es necesario en MSAL.js 1.2.x y versiones anteriores, ya que los flujos de redireccionamiento no devuelven promesas, como sí lo hacen los métodos con una experiencia emergente. El registro de la devolución de llamada es opcional en MSAL.js versión 1.3.x y versiones posteriores.

// Configuration object constructed
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
  },
};

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
  // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

Instancia y configuración únicas

Tanto MSAL.js 1.x como 2.x están diseñados para tener una sola instancia y configuración de UserAgentApplication o PublicClientApplication, respectivamente, para representar un único contexto de autenticación.

No se recomienda el uso de varias instancias de UserAgentApplication o PublicClientApplication, ya que pueden generar entradas de caché y comportamientos en conflicto en el explorador.

Pasos siguientes

El ejemplo de código de MSAL.js 2.x en GitHub muestra la creación de instancias de PublicClientApplication con un objeto Configuration: