Compartir a través de

Actualización del código de la aplicación para usar el SDK de JavaScript de Microsoft Graph

De un vistazo
Objetivo: Migración al SDK de Graph JS
Tiempo: 30 minutos
Complementos: Ninguno
Requisitos previos:Configuración del proxy de desarrollo

El SDK de JavaScript de Microsoft Graph incluye características que simplifican el código y le permiten centrarse en la creación de la aplicación.

El uso del SDK facilita lo siguiente:

  • Gestione los errores de API para cuando los sistemas no funcionen según lo esperado, como cuando los servicios son limitados bajo alta carga.
  • Realización de operaciones complejas de API como solicitudes por lotes
  • Controlar respuestas binarias, como obtener la foto de un usuario

Migración de fetch al SDK de JavaScript de Graph

Si usa la API fetch para llamar a las API de la aplicación de JavaScript, es posible que tenga código similar al siguiente:

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

Para usar el SDK de JavaScript de Graph, cambiaría el código a:

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

Control de errores de API

Uno de los errores más comunes de la API que experimentan las aplicaciones que utilizan Microsoft Graph cuando se usan a gran escala es la restricción. Se produce cuando el servidor está bajo carga pesada. La limitación reduce la carga en el servidor para mantener el servicio al día.

Dado que la restricción rara vez se produce en los entornos de los desarrolladores, estos a menudo llaman a la API sin manejar correctamente los errores:

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

La manera adecuada de gestionar los errores de limitación con la API de fetch sería ampliar la llamada para detectar los errores de limitación 429 y esperar antes de llamar a la API de nuevo por el número de segundos indicado en el encabezado de respuesta retry-after. El código actualizado tendría el siguiente aspecto:

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

Una manera más fácil de gestionar el estrangulamiento y otros errores es usar el SDK de JavaScript de Graph, que maneja los errores por ti.

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

Consulte también

  • Last updated on