Mettre à jour le code de mon 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) vous permet d’effectuer plus facilement les opérations suivantes :

• Gérer les erreurs d’API lorsque les choses ne fonctionnent pas comme prévu, par exemple quand les services sont limités sous une charge importante
• Effectuer des opérations d’API complexes telles que des requêtes par lots
• Gérer les réponses binaires, telles que l’obtention de la photo d’un utilisateur

Migrer de la récupération 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 un 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 modifier le code comme suit :

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 rencontrées par les applications utilisant Microsoft Graph lorsqu’elles sont utilisées à grande échelle est la limitation. Elle se produit lorsque le serveur est soumis à une charge importante. La limitation réduit la charge sur le serveur pour maintenir le service en place.

Étant donné que la limitation se produit rarement sur les locataires de développeur, les développeurs appellent souvent 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 bonne façon de gérer les erreurs de limitation avec l’API fetch consiste à étendre l’appel à watch pour les erreurs de limitation 429 et à attendre avant d’appeler à nouveau l’API pour le nombre de secondes désigné dans l’en-tête retry-after de réponse. 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

Un moyen plus simple de gérer la limitation et d’autres erreurs consiste à utiliser le Kit de développement logiciel (SDK) JavaScript Graph, qui gère les erreurs à votre place.

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