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

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

El uso del SDK facilita lo siguiente:

• Controle los errores de API para cuando las cosas no funcionen según lo previsto, como cuando los servicios se limitan bajo una carga pesada.
• Realización de operaciones de API complejas como solicitudes por lotes
• Control de respuestas binarias, como la obtención de la foto de un usuario

Migración de la captura al SDK de JavaScript de Graph

Si usa la API fetch para llamar a las API de la aplicación 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 de API más comunes que las aplicaciones que usan la experiencia de Microsoft Graph cuando se usan a escala es la limitación. Se produce cuando el servidor está bajo una carga pesada. La limitación reduce la carga en el servidor para mantener el servicio al día.

Dado que la limitación rara vez se produce en los inquilinos de desarrollador, a menudo los desarrolladores llaman a la API sin controlar 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 controlar los errores de limitación con la API de captura sería extender la llamada a watch para errores de limitación 429 y esperar antes de llamar a la API de nuevo durante el número de segundos designados en el retry-after encabezado de respuesta. 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 controlar la limitación y otros errores es usar el SDK de JavaScript de Graph, que controla los errores por usted.

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