Aracılığıyla paylaş

Uygulama kodumu Microsoft Graph JavaScript SDK'sını kullanacak şekilde güncelleştirme

Bir bakışta
Hedef: Graph JS SDK'sına geçiş
Süre: 30 dakika
Eklentiler: Hiçbiri
Önkoşullar:Geliştirme Ara Sunucusunu Ayarlama

Microsoft Graph JavaScript SDK'sı kodunuzu basitleştiren ve uygulamanızı oluşturmaya odaklanmanızı sağlayan özelliklerle birlikte gelir.

SDK'nın kullanılması aşağıdakileri gerçekleştirmenizi kolaylaştırır:

  • Servislerin yoğun yük altında kısıtlandığı durumlar gibi beklenmedik hata oluşumunda, API hatalarını yönetme.
  • Toplu istekler gibi karmaşık API işlemleri gerçekleştirme
  • Kullanıcının fotoğrafını alma gibi ikili yanıtları işleme

Fetch yönteminden Graph JavaScript SDK'sına geçiş

JavaScript uygulamanızda API'leri çağırmak için getirme API'sini kullanırsanız aşağıdakine benzer bir kodunuz olabilir:

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'sını kullanmak için kodu şu şekilde değiştirmeniz gerekir:

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 hatalarını işleme

Microsoft Graph'i kullanan uygulamaların büyük ölçekte kullanıldığında karşılaştığı en yaygın API hatalarından biri kısıtlamadır. Sunucu ağır yük altında olduğunda oluşur. Kısıtlama, hizmeti çalışır tutmak için sunucudaki yükü azaltır.

Geliştirici kiracılarında kısıtlama nadiren meydana geldiğinden, geliştiriciler genellikle hataları düzgün bir şekilde ele almadan API'yi çağırır.

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

Fetch API ile kısıtlama hatalarını işlemenin doğru yolu, çağrıyı 429 kısıtlama hatasına dikkat edecek şekilde genişletmek ve API'yi yeniden çağırmadan önce retry-after yanıt üst bilgisinde belirtilen saniye kadar beklemek olacaktır. Güncelleştirilmiş kod aşağıdaki gibi görünür:

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

Azaltma ve diğer hataları işlemenin daha kolay bir yolu, sizin için hataları işleyen Graph JavaScript SDK'sını kullanmaktır.

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

Ayrıca bakınız

  • Last updated on