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

Artículo
27/06/2024

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):

Ventana emergente, mediante acquireTokenPopup
Redirección, mediante acquireTokenRedirect

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:

JavaScript

// 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);
  });

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

JavaScript

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

userAgentApplication
  .acquireTokenSilent(accessTokenRequest)
  .then(function (accessTokenResponse) {
    // Acquire token silent success
    // Call API with token
    let accessToken = accessTokenResponse.accessToken;
  })
  .catch(function (error) {
    //Acquire token silent failure, and send an interactive request
    if (error.errorMessage.indexOf("interaction_required") !== -1) {
      userAgentApplication
        .acquireTokenPopup(accessTokenRequest)
        .then(function (accessTokenResponse) {
          // Acquire token interactive success
        })
        .catch(function (error) {
          // Acquire token interactive failure
          console.log(error);
        });
    }
    console.log(error);
  });

El contenedor MSAL Angular proporciona el interceptor HTTP, que adquiere de forma automática y silenciosa los tokens de acceso y los asocia a las solicitudes HTTP de las API.

Puede especificar los ámbitos de las API en la opción de configuración protectedResourceMap. MsalInterceptor solicitará los ámbitos especificados cuando adquiera automáticamente los tokens.

JavaScript

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalInterceptor, MsalModule } from "@azure/msal-angular";

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup,
        authRequest: {
          scopes: ["user.read"],
        },
      },
      {
        interactionType: InteractionType.Popup,
        protectedResourceMap: new Map([
          ["https://graph.microsoft.com/v1.0/me", ["user.read"]],
        ]),
      }
    ),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Para conocer el éxito o fracaso de la adquisición de tokens silenciosa, MSAL Angular proporciona eventos a los que puede suscribirse. También es importante recordar esta información si quiere cancelar la suscripción.

JavaScript

import { MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

import { filter, Subject, takeUntil } from 'rxjs';

// In app.component.ts
export class AppComponent implements OnInit {
  private readonly _destroying$ = new Subject<void>();

  constructor(private broadcastService: MsalBroadcastService) { }

  ngOnInit() {
    this.broadcastService.msalSubject$
    .pipe(
      filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS),
      takeUntil(this._destroying$)
    )
    .subscribe((result: EventMessage) => {
      // Do something with event payload here
    });
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

Como alternativa, también puede adquirir tokens de forma explícita mediante los métodos de adquisición de token, tal como se describe en la biblioteca principal MSAL.js.

El contenedor MSAL Angular proporciona el interceptor HTTP, que adquiere de forma automática y silenciosa los tokens de acceso y los asocia a las solicitudes HTTP de las API. Puede especificar los ámbitos de las API en la opción de configuración protectedResourceMap. MsalInterceptor solicitará los ámbitos especificados cuando adquiera automáticamente los tokens.

JavaScript

// app.module.ts
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    MsalModule.forRoot(
      {
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
      },
      {
        popUp: !isIE,
        consentScopes: ["user.read", "openid", "profile"],
        protectedResourceMap: [
          ["https://graph.microsoft.com/v1.0/me", ["user.read"]],
        ],
      }
    ),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Para conocer el éxito o fracaso de la adquisición de tokens silenciosa, MSAL Angular proporciona devoluciones de llamada a las que puede suscribirse. También es importante recordar esta información si quiere cancelar la suscripción.

JavaScript

// In app.component.ts
 ngOnInit() {
    this.subscription = this.broadcastService.subscribe("msal:acquireTokenFailure", (payload) => {
    });
}
ngOnDestroy() {
   this.broadcastService.getMSALSubject().next(1);
   if (this.subscription) {
     this.subscription.unsubscribe();
   }
 }

Como alternativa, también puede adquirir tokens de forma explícita mediante los métodos de adquisición de token, tal como se describe en la biblioteca principal MSAL.js.

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

JavaScript

import {
  InteractionRequiredAuthError,
  InteractionStatus,
} from "@azure/msal-browser";
import { AuthenticatedTemplate, useMsal } from "@azure/msal-react";

function ProtectedComponent() {
  const { instance, inProgress, accounts } = useMsal();
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    if (!apiData && inProgress === InteractionStatus.None) {
      const accessTokenRequest = {
        scopes: ["user.read"],
        account: accounts[0],
      };
      instance
        .acquireTokenSilent(accessTokenRequest)
        .then((accessTokenResponse) => {
          // Acquire token silent success
          let accessToken = accessTokenResponse.accessToken;
          // Call your API with token
          callApi(accessToken).then((response) => {
            setApiData(response);
          });
        })
        .catch((error) => {
          if (error instanceof InteractionRequiredAuthError) {
            instance
              .acquireTokenPopup(accessTokenRequest)
              .then(function (accessTokenResponse) {
                // Acquire token interactive success
                let accessToken = accessTokenResponse.accessToken;
                // Call your API with token
                callApi(accessToken).then((response) => {
                  setApiData(response);
                });
              })
              .catch(function (error) {
                // Acquire token interactive failure
                console.log(error);
              });
          }
          console.log(error);
        });
    }
  }, [instance, accounts, inProgress, apiData]);

  return <p>Return your protected content here: {apiData}</p>;
}

function App() {
  return (
    <AuthenticatedTemplate>
      <ProtectedComponent />
    </AuthenticatedTemplate>
  );
}

Como alternativa, si necesita adquirir un token fuera de un componente de React, puede llamar a acquireTokenSilent, pero no debe recurrir a la interacción si se produce un error. Todas las interacciones deben tener lugar bajo el componente MsalProvider en el árbol de componentes.

JavaScript

// 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,
};

// Use the same publicClientApplication instance provided to MsalProvider
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
    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.

JavaScript

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);
      }
    });
}

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. Como se mencionó anteriormente, tendrá que registrar la devolución de llamada de redirección.

JavaScript

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

userAgentApplication.handleRedirectCallback(authCallback);

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

userAgentApplication
  .acquireTokenSilent(accessTokenRequest)
  .then(function (accessTokenResponse) {
    // Acquire token silent success
    // Call API with token
    let accessToken = accessTokenResponse.accessToken;
  })
  .catch(function (error) {
    //Acquire token silent failure, and send an interactive request
    console.log(error);
    if (error.errorMessage.indexOf("interaction_required") !== -1) {
      userAgentApplication.acquireTokenRedirect(accessTokenRequest);
    }
  });

Solicitud de notificaciones opcionales

Puede usar notificaciones opcionales con los siguientes fines:

Incluir notificaciones adicionales en los tokens de la aplicación.
Cambiar el comportamiento de determinadas notificaciones que la Plataforma de identidad de Microsoft Entra ID devuelve en tokens.
Agregar notificaciones personalizadas para la aplicación y acceder a ellas.

Para solicitar notificaciones opcionales en IdToken, puede enviar un objeto de notificaciones en cadena al campo claimsRequest de la clase AuthenticationParameters.ts.

JavaScript

var claims = {
  optionalClaims: {
    idToken: [
      {
        name: "auth_time",
        essential: true,
      },
    ],
  },
};

var request = {
  scopes: ["user.read"],
  claimsRequest: JSON.stringify(claims),
};

myMSALObj.acquireTokenPopup(request);

Para más información, consulte Notificaciones opcionales.

Este código es el mismo que se describió anteriormente, salvo que se recomienda arrancar MsalRedirectComponent para controlar los redireccionamientos. También se pueden cambiar las configuraciones de MsalInterceptor para usar los redireccionamientos.

JavaScript

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import {
  MsalInterceptor,
  MsalModule,
  MsalRedirectComponent,
} from "@azure/msal-angular";

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: ["user.read"],
        },
      },
      {
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          ["https://graph.microsoft.com/v1.0/me", ["user.read"]],
        ]),
      }
    ),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

Si se produce un error en acquireTokenSilent, recurra a acquireTokenRedirect. Este método iniciará un redireccionamiento de marco completo y la respuesta se controlará al volver a la aplicación. Cuando este componente se representa después de volver del redireccionamiento, acquireTokenSilent ahora debe ejecutarse correctamente, ya que los tokens se extraen de la memoria caché.

JavaScript

import {
  InteractionRequiredAuthError,
  InteractionStatus,
} from "@azure/msal-browser";
import { AuthenticatedTemplate, useMsal } from "@azure/msal-react";

function ProtectedComponent() {
  const { instance, inProgress, accounts } = useMsal();
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const accessTokenRequest = {
      scopes: ["user.read"],
      account: accounts[0],
    };
    if (!apiData && inProgress === InteractionStatus.None) {
      instance
        .acquireTokenSilent(accessTokenRequest)
        .then((accessTokenResponse) => {
          // Acquire token silent success
          let accessToken = accessTokenResponse.accessToken;
          // Call your API with token
          callApi(accessToken).then((response) => {
            setApiData(response);
          });
        })
        .catch((error) => {
          if (error instanceof InteractionRequiredAuthError) {
            instance.acquireTokenRedirect(accessTokenRequest);
          }
          console.log(error);
        });
    }
  }, [instance, accounts, inProgress, apiData]);

  return <p>Return your protected content here: {apiData}</p>;
}

function App() {
  return (
    <AuthenticatedTemplate>
      <ProtectedComponent />
    </AuthenticatedTemplate>
  );
}

JavaScript

// 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,
};

// Use the same publicClientApplication instance provided to MsalProvider
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
    console.log(error);
  });

Pasos siguientes

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

Documentación

Inicio y cierre de sesión de una aplicación de página única - Microsoft identity platform

Aprenda a crear una aplicación de página única (inicio de sesión)
Compilación de una aplicación de una sola página que llama a una API web - Microsoft identity platform

Aprenda a compilar una aplicación de página única que llama a una API web.
Inicialización de aplicaciones cliente de MSAL.js - Microsoft identity platform

Obtenga información sobre la inicialización de aplicaciones cliente mediante la biblioteca de autenticación de Microsoft para JavaScript (MSAL.js).
Registro de aplicaciones de página única (SPA) - Microsoft identity platform

Aprenda a compilar una aplicación de página única (registro de la aplicación).
Inicio de sesión único (MSAL.js) - Microsoft identity platform

Obtenga información sobre la creación de experiencias de inicio de sesión único mediante la biblioteca de autenticación de Microsoft para JavaScript (MSAL.js).
Configuración de aplicación de página única - Microsoft identity platform

Aprenda a crear una aplicación de página única (configuración del código de la aplicación)
Adquisición y almacenamiento en caché de tokens con la biblioteca de autenticación de Microsoft (MSAL) - Microsoft identity platform

Más información sobre la adquisición y el almacenamiento en caché de tokens mediante MSAL.
Control de errores y excepciones en MSAL.js - Microsoft identity platform

Aprenda a controlar errores y excepciones, desafíos de las notificaciones del acceso condicional y reintentos en las aplicaciones de MSAL.js.

Compartir a través de

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

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

Adquisición de un token con una ventana emergente

Adquisición de un token con una redirección

Solicitud de notificaciones opcionales

Pasos siguientes

Comentarios

Recursos adicionales