更新應用程式程式代碼以使用 Microsoft Graph JavaScript SDK

Microsoft Graph JavaScript SDK 隨附可簡化程式代碼的功能，並讓您專注於建置應用程式。

使用 SDK 可讓您更輕鬆地：

• 處理無法如預期般運作的 API 錯誤，例如服務在負載過重時節流
• 執行複雜的 API 作業，例如批次要求
• 處理二進位回應，例如取得使用者的相片

從擷取遷移至 Graph JavaScript SDK

如果您使用擷取 API 來呼叫 JavaScript 應用程式中的 API，您可能會有類似下列的程式代碼：

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

若要使用 Graph JavaScript SDK，您將程式代碼變更為：

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 錯誤

在大規模使用時，使用 Microsoft Graph 的應用程式最常發生的 API 錯誤之一是節流。 發生於伺服器負載過重時。 節流會減少伺服器上的負載，以讓服務保持運作。

由於節流很少發生在開發人員租使用者上，因此開發人員通常會呼叫 API，而不會正確處理錯誤：

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

使用擷取 API 處理節流錯誤的適當方式，是將呼叫擴充至 watch 429 節流錯誤，並等候 API 再次呼叫響應標頭中指定的retry-after秒數。 更新的程式代碼如下所示：

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

處理節流和其他錯誤的較簡單方式是使用 Graph JavaScript SDK，為您處理錯誤。

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