Compartir a través de


Aplicación de página única: Adquisición de un token para llamar a una API

El patrón para la adquisición de tokens de API con MSAL.js consiste en intentar realizar primero una solicitud de token silenciosa utilizando el método acquireTokenSilent. Cuando se llama a este método, la biblioteca comprueba primero la caché en el almacenamiento del explorador para ver si existe un token de acceso no expirado y lo devuelve. Si no se encuentra ningún token de acceso o el token de acceso encontrado ha expirado, intenta usar su token de actualización para obtener un token de acceso nuevo. Si la duración de 24 horas del token de actualización también ha expirado, MSAL.js abrirá un iframe oculto para solicitar de forma silenciosa un nuevo código de autorización aprovechando la sesión activa existente con Microsoft Entra ID (si existe). Este código se intercambiará por un nuevo conjunto de tokens (tokens de acceso y de actualización). Para más información sobre los valores de inicio de sesión único y duración del token en Microsoft Entra ID consulte la vigencia de los tokens. Para más información sobre la directiva de búsqueda de caché de MSAL.js, consulte: Adquisición de un token de acceso.

Las solicitudes de token silenciosas a Microsoft Entra ID pueden producir un error por motivos como un cambio de contraseña o actualizaciones en las directivas de acceso condicional. Con más frecuencia, los errores se deben al vencimiento de la duración de 24 horas del token de actualización y a que el explorador bloquea las cookies de terceros, lo que impide el uso de iframes ocultos para seguir autenticando al usuario. En estos casos, tiene que invocar uno de los métodos interactivos para adquirir tokens (lo que puede pedirse al usuario):

Decisión entre una experiencia de ventana emergente o redirección

La elección de una u otra experiencia depende del flujo de la aplicación:

  • Si no quiere que los usuarios salgan de la página principal de la aplicación durante la autenticación, se recomienda el método de ventana emergente. Dado que la redirección de la autenticación tiene lugar en una ventana emergente, se conserva el estado de la aplicación principal.

  • Si los usuarios tienen restricciones del explorador o directivas donde las ventanas emergentes están deshabilitadas, puede usar el método de redirección. Use el método de redirección con Internet Explorer, ya que hay problemas conocidos con las ventanas emergentes en este explorador.

Al crear la solicitud de token de acceso, puede establecer los ámbitos de API que quiere que incluya el token de acceso. Puede que no se concedan todos los ámbitos solicitados en el token de acceso. Depende del consentimiento del usuario.

Adquisición de un token con una ventana emergente

En el código siguiente se combina el patrón descrito anteriormente con los métodos de una experiencia de ventana emergente:

// MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
const account = publicClientApplication.getAllAccounts()[0];

const accessTokenRequest = {
  scopes: ["user.read"],
  account: account,
};

publicClientApplication
  .acquireTokenSilent(accessTokenRequest)
  .then(function (accessTokenResponse) {
    // Acquire token silent success
    let accessToken = accessTokenResponse.accessToken;
    // Call your API with token
    callApi(accessToken);
  })
  .catch(function (error) {
    //Acquire token silent failure, and send an interactive request
    if (error instanceof InteractionRequiredAuthError) {
      publicClientApplication
        .acquireTokenPopup(accessTokenRequest)
        .then(function (accessTokenResponse) {
          // Acquire token interactive success
          let accessToken = accessTokenResponse.accessToken;
          // Call your API with token
          callApi(accessToken);
        })
        .catch(function (error) {
          // Acquire token interactive failure
          console.log(error);
        });
    }
    console.log(error);
  });

Adquisición de un token con una redirección

El siguiente patrón es como se describió anteriormente, pero se muestra con un método de redirección para adquirir tokens de manera interactiva. Tendrá que llamar a handleRedirectPromise y esperar cuando se cargue la página.

const redirectResponse = await publicClientApplication.handleRedirectPromise();
if (redirectResponse !== null) {
  // Acquire token silent success
  let accessToken = redirectResponse.accessToken;
  // Call your API with token
  callApi(accessToken);
} else {
  // MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
  const account = publicClientApplication.getAllAccounts()[0];

  const accessTokenRequest = {
    scopes: ["user.read"],
    account: account,
  };

  publicClientApplication
    .acquireTokenSilent(accessTokenRequest)
    .then(function (accessTokenResponse) {
      // Acquire token silent success
      // Call API with token
      let accessToken = accessTokenResponse.accessToken;
      // Call your API with token
      callApi(accessToken);
    })
    .catch(function (error) {
      //Acquire token silent failure, and send an interactive request
      console.log(error);
      if (error instanceof InteractionRequiredAuthError) {
        publicClientApplication.acquireTokenRedirect(accessTokenRequest);
      }
    });
}

Pasos siguientes

Avance al siguiente artículo de este escenario, Llamada a una API web.