Freigeben über

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

Auf einen Blick
Ziel: Migrieren zum Graph JS SDK
Zeit: 30 Minuten
Plugins: Nichts
Voraussetzungen:Einrichten des Dev-Proxys

Das Microsoft Graph JavaScript SDK enthält Features, die Ihren Code vereinfachen und ihnen den Fokus auf das Erstellen Ihrer App ermöglichen.

Die Verwendung des SDK erleichtert Ihnen Folgendes:

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

Migrieren vom Abruf zum Graph JavaScript SDK

Wenn Sie die Fetch-API verwenden, um APIs in Ihrer JavaScript-App aufzurufen, haben Sie möglicherweise Code wie folgt:

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, die Anwendungen bei der Nutzung von Microsoft Graph im großen Maßstab erleben, ist die Drosselung. Er tritt auf, wenn der Server stark belastet wird. Die Drosselung verringert die Last auf dem Server, um den Dienst am Laufen zu halten.

Da die Drosselung selten auf Entwicklermandanten auftritt, rufen Entwickler häufig die API auf, ohne Fehler korrekt zu handhaben.

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 zum Umgang mit Drosselungsfehlern bei der Fetch-API besteht darin, den Aufruf zu erweitern, um auf 429-Drosselungsfehler zu achten und dann die in retry-after im Antwortheader angegebene Anzahl von Sekunden abzuwarten, bevor die API erneut aufgerufen wird. Der aktualisierte Code sieht wie folgt aus:

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 zum Behandeln von Drosselung und anderen Fehlern besteht darin, das Graph JavaScript SDK zu verwenden, das Fehler für Sie behandelt.

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

Siehe auch

  • Last updated on