Aggiornare il codice dell'applicazione per usare Microsoft Graph JavaScript SDK

Microsoft Graph JavaScript SDK include funzionalità che semplificano il codice e consentono di concentrarsi sulla creazione dell'app.

L'uso dell'SDK semplifica le attività seguenti:

  • Gestire gli errori dell'API per quando gli elementi non funzionano come previsto, ad esempio quando i servizi limitano il carico elevato
  • Eseguire operazioni API complesse come le richieste batch
  • Gestire le risposte binarie, ad esempio ottenere la foto di un utente

Eseguire la migrazione dal recupero a Graph JavaScript SDK

Se si usa l'API di recupero per chiamare le API nell'app JavaScript, potrebbe essere presente codice simile al seguente:

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

Per usare Graph JavaScript SDK, è necessario modificare il codice in:

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

Gestire gli errori dell'API

Uno degli errori api più comuni che le applicazioni che usano Microsoft Graph si verificano quando vengono usate su larga scala sono limitate. Si verifica quando il server è sottoposto a carico elevato. La limitazione riduce il carico sul server per mantenere il servizio in esecuzione.

Poiché la limitazione si verifica raramente nei tenant degli sviluppatori, spesso gli sviluppatori chiamano l'API senza gestire correttamente gli errori:

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

Il modo corretto per gestire gli errori di limitazione con l'API di recupero consiste nell'estendere la chiamata a watch per gli errori di limitazione 429 e attendere prima di chiamare nuovamente l'API per il numero di secondi designati nell'intestazione della retry-after risposta. Il codice aggiornato sarà simile al seguente:

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 modo più semplice per gestire la limitazione delle richieste e altri errori consiste nell'usare Graph JavaScript SDK, che gestisce automaticamente gli errori.

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