Partager via


Application monopage : Acquérir un jeton pour appeler une API

Le modèle permettant d'acquérir des jetons pour les API avec MSAL.js consiste d'abord à tenter une demande de jeton en mode silencieux à l'aide de la méthode acquireTokenSilent. Lorsque cette méthode est appelée, la bibliothèque vérifie d’abord le cache dans le stockage du navigateur pour voir s’il existe un jeton d’accès non expiré, et le retourne. Si aucun jeton d’accès n’est trouvé ou si le jeton d’accès trouvé a expiré, elle tente d’utiliser son jeton d’actualisation pour obtenir un nouveau jeton d’accès. Si la durée de vie de 24 heures du jeton d'actualisation a également expiré, MSAL.js ouvre une iframe masquée pour demander silencieusement un nouveau code d'autorisation en utilisant la session active existante avec l'ID Microsoft Entra (le cas échéant), qui sera ensuite échangé contre un nouvel ensemble. de jetons (jetons d’accès et de rafraîchissement). Pour plus d'informations sur les valeurs de session d'authentification unique (SSO) et de durée de vie des jetons dans Microsoft Entra ID, consultez Durées de vie des jetons. Pour plus d’informations sur la stratégie de recherche de cache MSAL.js, consultez : Acquisition d’un jeton d’accès.

Les demandes de jetons silencieux adressées à Microsoft Entra ID peuvent échouer pour des raisons telles qu'un changement de mot de passe ou des stratégies d'accès conditionnel mises à jour. Le plus souvent, les échecs sont dus à l'expiration de la durée de vie de 24 heures du jeton d'actualisation et au blocage des cookies de tiers par le navigateur, ce qui empêche l'utilisation des iframes masqués pour poursuivre l'authentification de l'utilisateur. Dans ces cas, vous devez appeler l'une des méthodes interactives (qui peut envoyer une invite à l'utilisateur) pour acquérir des jetons :

Choisir entre une expérience avec fenêtre contextuelle ou redirection

Le choix entre la fenêtre contextuelle et la redirection dépend du flux de votre application :

  • Si vous ne souhaitez pas que les utilisateurs quittent la page principale de votre application lors de l’authentification, nous vous recommandons d’utiliser la méthode avec fenêtre contextuelle. La redirection de l’authentification se produisant dans une fenêtre contextuelle, l’état de l’application principale est conservé.

  • Si les utilisateurs sont soumis à des contraintes imposées par le navigateur ou par des stratégies qui bloquent les fenêtres contextuelles, vous pouvez utiliser la méthode avec redirection. Utilisez la méthode avec redirection dans le navigateur Internet Explorer, car il existe des problèmes connus avec l’utilisation de fenêtres contextuelles dans Internet Explorer.

Vous pouvez définir les étendues d’API qui doivent être incluses dans le jeton d’accès lors de la création de la requête de jeton d’accès. Toutes les étendues demandées sont susceptibles de ne pas être toutes accordées dans le jeton d’accès. Cela dépend du consentement de l’utilisateur.

Acquérir un jeton avec une fenêtre contextuelle

Le code suivant combine le modèle décrit précédemment aux méthodes offrant une expérience de fenêtre contextuelle :

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

Acquérir un jeton avec une redirection

Le modèle suivant est tel qu’il a été décrit précédemment, mais il est présenté avec une méthode de redirection qui permet d’acquérir les jetons de manière interactive. Vous devez appeler et attendre handleRedirectPromise sur le chargement de la page.

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

Étapes suivantes

Passez à l’article suivant de ce scénario, Appeler une API web.