Microsoft Graph JavaScript SDK を使用するようにアプリケーション コードを更新する

Microsoft Graph JavaScript SDK には、コードを簡略化し、アプリの構築に専念できる機能が付属しています。

SDK を使用すると、次の作業が簡単になります。

• サービスの負荷が高い場合など、予期したとおりに動作しない場合の API エラーを処理する
• バッチ要求などの複雑な API 操作を実行する
• ユーザーの写真の取得など、バイナリ応答を処理する

フェッチから Graph JavaScript SDK への移行

fetch 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 エラーの 1 つは、調整です。 サーバーの負荷が高い場合に発生します。 調整すると、サービスを維持するためにサーバーの負荷が減少します。

開発者テナントで調整が行われることはほとんどないため、多くの場合、開発者はエラーを適切に処理せずに 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 で調整エラーを処理する適切な方法は、呼び出しを拡張して 429 個の調整エラーをwatchし、応答ヘッダーで指定された秒数だけ 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