Mettre à jour mon code d’application pour utiliser le Kit de développement logiciel (SDK) JavaScript Microsoft Graph

Le Kit de développement logiciel (SDK) JavaScript Microsoft Graph est fourni avec des fonctionnalités qui simplifient votre code et vous permettent de vous concentrer sur la création de votre application.

L’utilisation du Kit de développement logiciel (SDK) facilite les opérations suivantes :

• Gérer les erreurs d’API pour les cas où les choses ne fonctionnent pas comme prévu, par exemple lorsque les services régulent lorsque la charge est importante.
• Effectuer des opérations d’API complexes telles que les requêtes par lots
• Gérer les réponses binaires, telles que l’obtention de la photo d’un utilisateur

Migrer de l'utilisation de fetch vers le Kit de développement logiciel (SDK) JavaScript Graph

Si vous utilisez l’API fetch pour appeler des API dans votre application JavaScript, vous pouvez avoir du code similaire à ce qui suit :

const msalClient = new msal.PublicClientApplication({
  auth: {
    clientId: appId
  }
});

function getAccessToken(msalClient) {
  const accounts = msalClient.getAllAccounts();

  if (accounts.length > 0) {
    const accessTokenRequest = {
      scopes: [
        'https://graph.microsoft.com/User.Read'
      ],
      account: accounts[0]
    };

    return msalClient.acquireTokenSilent(accessTokenRequest)
      .then(response => response.accessToken)
      .catch(error => {
        console.log(error);
        console.log("silent token acquisition fails. acquiring token using redirect");
        if (error instanceof msal.InteractionRequiredAuthError) {
          return msalClient.acquireTokenRedirect(accessTokenRequest);
        }
      });
  }
  else {
    return Promise.reject('Sign in');
  }
}

msalClient
  .loginPopup()
  .then(response => getAccessToken(msalClient))
  .then(accessToken => fetch('https://graph.microsoft.com/v1.0/me', {
    method: 'GET',
    headers: {
      authorization: `Bearer ${accessToken}`
    }
  }))
  .then(response => response.json())
  .then(json => {
    // do something here
  });

Pour utiliser le Kit de développement logiciel (SDK) JavaScript Graph, vous devez remplacer le code par :

const msalClient = new msal.PublicClientApplication({
  auth: {
    clientId: appId
  }
});

function getGraphClient(account) {
  const authProvider = new MSGraphAuthCodeMSALBrowserAuthProvider.AuthCodeMSALBrowserAuthenticationProvider(msalClient, {
    account,
    scopes: [
      'https://graph.microsoft.com/User.Read'
    ],
    interactionType: msal.InteractionType.Popup,
  });

  return MicrosoftGraph.Client.initWithMiddleware({ authProvider });
}

msalClient
  .loginPopup()
  .then(response => {
    const accounts = msalClient.getAllAccounts();

    if (accounts.length > 0) {
      const graphClient = getGraphClient(accounts[0]);
      return graphClient.api('/me').get();
    }
    else {
      return Promise.reject('Sign in');
    }
  })
  .then(json => {
    // do something here
  });

Gérer les erreurs d’API

L’une des erreurs d’API les plus courantes que rencontrent les applications utilisant Microsoft Graph à grande échelle est la limitation de débit. Elle se produit lorsque le serveur est sous une charge importante. La limitation diminue la charge sur le serveur pour maintenir le service opérationnel.

Étant donné que la restriction se produit rarement sur les tenants des développeurs, les développeurs ont tendance à appeler l’API sans gérer correctement les erreurs :

fetch('https://graph.microsoft.com/v1.0/me', {
    method: 'GET',
    headers: {
      authorization: `Bearer ${accessToken}`
    }
  })
  .then(response => response.json())
  .then(json => {
    // do something here
  });

La façon appropriée de gérer les erreurs de limitation avec l’API de récupération (fetch) consiste à étendre l’appel pour surveiller les erreurs de limitation 429 et à attendre avant d’appeler à nouveau l’API pendant le nombre de secondes désignées dans l’en-tête de réponse retry-after. Le code mis à jour se présente comme suit :

function sleep(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

async function fetchAndRetryIfNecessary(callAPIFn) {
  const response = await callAPIFn();

  if (response.status === 429) {
    const retryAfter = response.headers.get('retry-after');
    await sleep(retryAfter * 1000);
    return fetchAndRetryIfNecessary(callAPIFn);
  }

  return response;
}

const response = await fetchAndRetryIfNecessary(async () => (
  await fetch('https://graph.microsoft.com/v1.0/me', {
    method: 'GET',
    headers: {
      authorization: `Bearer ${accessToken}`
    }
  })
));
const json = await response.json();
// do something here

Pour gérer la limitation et d’autres erreurs plus simplement, utilisez le SDK JavaScript Graph, qui gère les erreurs pour vous.

const json = await graphClient.api('/me').get();
// do something here