Mijn toepassingscode bijwerken om Microsoft Graph JavaScript SDK te gebruiken

De Microsoft Graph JavaScript SDK wordt geleverd met functies waarmee u uw code vereenvoudigt en u zich kunt richten op het bouwen van uw app.

Met behulp van de SDK kunt u het volgende eenvoudiger doen:

• API-fouten verwerken wanneer dingen niet werken zoals verwacht, zoals wanneer services worden beperkt onder zware belasting
• Complexe API-bewerkingen uitvoeren, zoals batchaanvragen
• Binaire antwoorden verwerken, zoals het verkrijgen van de foto van een gebruiker

Migreren van ophalen naar de Graph JavaScript SDK

Als u de API ophalen gebruikt om API's aan te roepen in uw JavaScript-app, hebt u mogelijk code die er ongeveer als volgt uitziet:

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

Als u de Graph JavaScript SDK wilt gebruiken, wijzigt u de code 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
  });

API-fouten verwerken

Een van de meest voorkomende API-fouten die toepassingen die microsoft Graph gebruiken wanneer ze op schaal worden gebruikt, is beperking. Dit gebeurt wanneer de server zwaar wordt belast. Beperking vermindert de belasting op de server om de service up te houden.

Aangezien beperking zelden voorkomt bij ontwikkelaarstenants, roepen ontwikkelaars de API vaak aan zonder fouten correct af te handelen:

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

De juiste manier om beperkingsfouten met het ophalen van de API af te handelen, is door de aanroep uit te breiden naar watch voor 429-beperkingsfouten en te wachten voordat u de API opnieuw aanroept voor het aantal seconden dat is opgegeven in de retry-after antwoordheader. Bijgewerkte code ziet er als volgt uit:

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

Een eenvoudigere manier om beperking en andere fouten af te handelen, is door de Graph JavaScript SDK te gebruiken, waarmee fouten voor u worden afgehandeld.

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