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 quando le cose non funzionano come previsto, ad esempio quando i servizi riducono le prestazioni sotto 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 dalla funzione fetch all'SDK JavaScript di Graph.

Se si usa l'API di recupero per chiamare le API nell'app JavaScript, è possibile che il codice sia 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 utilizzano Microsoft Graph riscontrano quando sono in uso su larga scala è la limitazione del ritmo. Si verifica quando il server è sottoposto a un carico elevato. La limitazione riduce il carico sul server per garantire la continuità del servizio.

Poiché la limitazione si verifica raramente nei tenant degli sviluppatori, spesso gli sviluppatori utilizzano 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 per controllare gli errori di limitazione 429 e attendere prima di chiamare nuovamente l'API per il numero di secondi designati nell'intestazione della risposta retry-after. 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 il Graph JavaScript SDK, che gestisce automaticamente gli errori.

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