Mijn toepassingscode bijwerken voor het gebruik van Microsoft Graph JavaScript SDK

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

Door de SDK te gebruiken, kunt u het volgende eenvoudiger doen:

• API-fouten afhandelen voor situaties waarin dingen niet werken zoals verwacht, zoals wanneer diensten 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 fetch-API 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 gebruikmaken van Microsoft Graph ondervinden wanneer ze op grote schaal worden gebruikt, is drosseling. Dit gebeurt wanneer de server zwaar wordt belast. Throttling vermindert de belasting op de server om de service draaiende te houden.

Omdat vertraging zelden optreedt voor ontwikkelaarstenants, roepen ontwikkelaars vaak de API 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 fetch-API af te handelen, is door de aanroep uit te breiden om te letten op 429 beperkingsfouten en te wachten voordat de API opnieuw wordt aangeroepen 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, die fouten voor u afhandelt.

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