Uppdatera min programkod för att använda Microsoft Graph JavaScript SDK

Microsoft Graph JavaScript SDK levereras med funktioner som förenklar din kod och låter dig fokusera på att skapa din app.

Om du använder SDK:t blir det enklare för dig att:

• Hantera API-fel när saker och ting inte fungerar som förväntat, till exempel när tjänster blir begränsade vid hög belastning.
• Utföra komplexa API-åtgärder som batchbegäranden
• Hantera binära svar, till exempel att hämta fotot av en användare

Migrera från hämtning till Graph JavaScript SDK

Om du använder hämtnings-API:et för att anropa API:er i din JavaScript-app kan du ha kod som liknar följande:

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

Om du vill använda Graph JavaScript SDK ändrar du koden till:

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

Hantera API-fel

Ett av de vanligaste API-felen som program som använder Microsoft Graph upplever när de används i stor skala är strypning. Det inträffar när servern är hårt belastad. Reglering minskar belastningen på servern för att upprätthålla tjänsten.

Eftersom strypning sällan sker på utvecklarklientorganisationer anropar utvecklare ofta API:et utan att hantera fel korrekt.

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

Det rätta sättet att hantera begränsningsfel med hämtnings-API:et är att utöka anropet för att se upp för 429 begränsningsfel och vänta innan du anropar API:et igen under det antal sekunder som anges i retry-after svarsrubriken. Den uppdaterade koden skulle se ut så här:

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

Ett enklare sätt att hantera begränsningar i dataströmning och andra fel är att använda Graph JavaScript SDK, som hanterar fel åt dig.

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