Inicialización de aplicaciones cliente con MSAL.js

2025-05-12

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.

Valor	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 tu 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 (tenant) si va a crear una aplicación empresarial exclusivamente para su organización, frecuentemente denominada aplicación de un único tenant.
URI de redirección	Opcional	Si estás creando una aplicación web, `redirectUri` especifica 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

Inicialice el contexto de autenticación de MSAL.js creando una instancia de un objeto [PublicClientApplication][msal-js-publicclientapplication] con un objeto [Configuration][msal-js-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 de configuración e instanciación de un 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][msal-js-handleredirectpromise] cuando la aplicación use flujos de redirección. 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 está regresando de una operación de redireccionamiento que fue exitosa.
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 de configuración. 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.

Para los métodos de autenticación con flujos de redirección (loginRedirect y acquireTokenRedirect) en MSAL.js 1.2.x o versiones anteriores, debe registrar explícitamente una devolución de llamada para que se realice correctamente o se produzca un error a través del 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 redirección no devuelven promesas como los métodos con una experiencia emergente. El registro del callback es opcional en MSAL.js versión 1.3.x y 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.

Paso siguiente

El ejemplo de código MSAL.js 2.x en GitHub muestra la creación de instancias de una [PublicClientApplication][/javascript/api/@azure/msal-browser/publicclientapplication] con un objeto de configuración

Compartir a través de