Aktualisieren des Anwendungscodes für die Verwendung des Microsoft Graph JavaScript SDK

Das Microsoft Graph JavaScript SDK enthält Features, mit denen Sie Ihren Code vereinfachen und sich auf die Erstellung Ihrer App konzentrieren können.

Die Verwendung des SDK vereinfacht Folgendes:

• Behandeln von API-Fehlern, wenn dinge nicht wie erwartet funktionieren, z. B. wenn Dienste unter hoher Last drosseln
• Ausführen komplexer API-Vorgänge wie Batchanforderungen
• Behandeln von binären Antworten, z. B. das Abrufen des Fotos eines Benutzers

Migrieren vom Abruf zum Graph JavaScript SDK

Wenn Sie die Abruf-API verwenden, um APIs in Ihrer JavaScript-App aufzurufen, verfügen Sie möglicherweise über Code wie den folgenden:

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

Um das Graph JavaScript SDK zu verwenden, ändern Sie den 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
  });

Behandeln von API-Fehlern

Einer der häufigsten API-Fehler für Anwendungen, die Microsoft Graph verwenden, wenn sie im großen Stil verwendet werden, ist die Drosselung. Dies tritt auf, wenn der Server stark beansprucht wird. Durch die Einschränkung wird die Last des Servers verringert, um den Dienst aufrecht zu erhalten.

Da die Drosselung bei Entwicklermandanten selten auftritt, rufen Entwickler häufig die API auf, ohne Fehler ordnungsgemäß zu behandeln:

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

Die richtige Möglichkeit, Drosselungsfehler mit der Abruf-API zu behandeln, besteht darin, den Aufruf auf watch für 429 Drosselungsfehler auszudehnen und zu warten, bevor Sie die API erneut aufrufen, um die im retry-after Antwortheader angegebene Anzahl von Sekunden zu erhalten. Aktualisierter Code würde wie folgt aussehen:

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

Eine einfachere Möglichkeit, Drosselung und andere Fehler zu behandeln, ist die Verwendung des Graph JavaScript SDK, das Fehler für Sie verarbeitet.

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