Bagikan melalui

Memperbarui kode aplikasi saya untuk menggunakan Microsoft Graph JavaScript SDK

Sekilas
Tujuan: Migrasi ke Graph JS SDK
Waktu: 30 menit
Plugin: Tidak
Prasyarat:Menyiapkan Proksi Dev

Microsoft Graph JavaScript SDK dilengkapi dengan fitur yang menyederhanakan kode Anda dan memungkinkan Anda fokus untuk membangun aplikasi Anda.

Menggunakan SDK memudahkan Anda untuk:

  • Menangani kesalahan API saat sesuatu tidak berjalan sesuai harapan, seperti ketika layanan dibatasi karena beban yang berat
  • Melakukan operasi API kompleks seperti permintaan batch
  • Menangani respons biner, seperti mendapatkan foto pengguna

Bermigrasi dari fetch API ke Graph JavaScript SDK

Jika Anda menggunakan API pengambilan untuk memanggil API di aplikasi JavaScript, Anda mungkin memiliki kode yang mirip dengan yang berikut ini:

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

Untuk menggunakan Graph JavaScript SDK, Anda akan mengubah kode menjadi:

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

Menangani kesalahan API

Salah satu kesalahan API paling umum yang dialami aplikasi yang menggunakan Microsoft Graph saat digunakan dalam skala besar adalah pembatasan frekuensi. Ini terjadi, ketika server berada di bawah beban berat. Pembatasan mengurangi beban pada server agar layanan tetap beroperasi.

Karena pembatasan jarang terjadi pada penyewa pengembang, seringkali pengembang memanggil API tanpa menangani kesalahan dengan benar:

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

Cara yang tepat untuk menangani kesalahan pembatasan dengan fetch API adalah dengan menyesuaikan panggilan untuk memperhatikan kesalahan pembatasan 429 dan menunggu sebelum memanggil API lagi selama jumlah detik yang ditentukan dalam header respons retry-after. Kode yang diperbarui akan terlihat sebagai berikut:

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

Cara yang lebih mudah untuk menangani pengendalian laju, dan kesalahan lainnya, adalah dengan menggunakan Graph JavaScript SDK, yang dapat menangani kesalahan untuk Anda.

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

Lihat juga

  • Last updated on