Mostrar archivos de usuario

Completado

Para que un usuario pueda descargar un archivo, es necesario mostrar una lista de los archivos disponibles. En este módulo de Learn, los archivos estarán en el directorio raíz OneDrive para la Empresa del usuario. Es posible que quiera quitar un archivo o dos para empezar. Para acceder a la instancia de OneDrive para la Empresa, busque https://www.office.com/, inicie sesión y seleccione el icono de OneDrive.

Captura de pantalla que muestra la lista de archivos.

Decidir qué permisos requiere la aplicación

Todos los datos expuestos por Microsoft Graph están protegidos. La aplicación debe tener los permisos adecuados concedidos para acceder a ella. El permiso necesario depende del tipo de información a la que la aplicación necesita acceder. Por ejemplo, para acceder al calendario del usuario, la aplicación debe tener el permiso Calendars.Read. Para leer los archivos de un usuario, la aplicación necesita el permiso de Files.Read. Más adelante, cuando llegue el momento de cargar archivos, la aplicación necesitará el permiso de Files.ReadWrite. La lista exacta de los permisos necesarios para cada operación está disponible en la referencia de api de Microsoft Graph.

Si la aplicación carga diferentes tipos de datos, los usuarios deben concederle varios permisos necesarios para acceder a esta información. En la aplicación, solicite solo los permisos que necesite. En este módulo, la aplicación solicita permiso para leer los archivos inicialmente y solo solicita permiso de lectura y escritura al intentar cargar un archivo. Este patrón se denomina consentimiento dinámicoy es la manera recomendada de solicitar permisos. Con el consentimiento dinámico, los usuarios controlan los datos que comparten con las aplicaciones que usan, lo que minimiza los riesgos de seguridad.

Obtener los permisos necesarios

La lista de permisos concedidos a la aplicación se integra directamente en el token de acceso. El estándar de OAuth los llama ámbitos. Cuando la aplicación usa la biblioteca de autenticación de Microsoft para obtener el token de acceso, debe incluir una lista de ámbitos en la solicitud para Azure Active Directory. Cada operación de Microsoft Graph tiene su propia lista de ámbitos organizados de menor a mayor privilegio. Cualquiera de ellos funcionará, por lo que debe elegir los ámbitos con menos privilegios que funcionarán en todas las operaciones que se usan en la aplicación.

La aplicación de ejemplo almacena la solicitud actual de la biblioteca de autenticación de Microsoft en una variable global denominada msalRequest. Inicialmente, contiene una matriz vacía de ámbitos.

const msalRequest = { scopes: [] };

Esta es la función auxiliar que usa la aplicación de ejemplo para agregar más ámbitos a la solicitud.

function ensureScope (scope) {
  if (!msalRequest.scopes.some((s) => s.toLowerCase() === scope.toLowerCase())) {
    msalRequest.scopes.push(scope);
  }
}

La idea es que la aplicación solicite permisos cuando los necesite. Por ejemplo, este es el código para descargar una lista de archivos de la carpeta raíz OneDrive para la Empresa de un usuario.

async function getFiles() {
  ensureScope('files.read');
  try {
    const response = await graphClient
      .api('/me/drive/root/children')
      .select('id,name,folder,package')
      .get();
    return response.value;
  } catch (error) {
    console.error(error);
  }
}

La llamada a ensureScope() garantiza que el permiso files.read se incluya en el token de acceso que se usará para llamar a Microsoft Graph.

El SDK de Microsoft Graph se encarga de llamar a la biblioteca de autenticación de Microsoft mediante el objeto msalRequest y lo hace para cada llamada Microsoft Graph. Aunque esta actividad puede parecer desperdiciada, no lo es. La biblioteca de autenticación de Microsoft reutiliza automáticamente el mismo token de acceso hasta que expire el antiguo o cambien los ámbitos de permiso. En la parte superior de graph.js, puede ver el código donde se configura esta instrucción.

const authProvider = {
  getAccessToken: async () => {
    return await getToken();
  }
};
const graphClient = MicrosoftGraph.Client.initWithMiddleware({ authProvider });

En primer lugar, el código declara un authProvider, que es un objeto JSON que contiene la función getAccessToken(). Esta función llama a getToken(), que es una función del archivo auth.js que llama a la biblioteca de autenticación de Microsoft. Puede comprobarlo si lo desea. El objeto authProvider se pasa al SDK de Microsoft, que llamará a getAccessToken() siempre que lo necesite, por lo que el código no tiene que hacerlo.

Recuperar los archivos del directorio raíz de OneDrive del usuario mediante Microsoft Graph

Para obtener esta lista de archivos, use el recurso /me/drive/root/children. Es más fácil obtener los archivos de la carpeta raíz del directorio raíz de OneDrive del usuario actual porque Microsoft Graph proporciona accesos directos como /me y /root. Por ejemplo, para enumerar los archivos de la carpeta Documentos de otro usuario, es necesario buscar el identificador de usuario del usuario y el identificador de elemento de su carpeta /Documents y, a continuación, tener acceso a /users/{user-id}/drive/items/{item-id}/children.

Sugerencia

Microsoft Graph proporciona acceso a los archivos de OneDrive, OneDrive para la Empresa y SharePoint Online. Microsoft Teams y otros servicios de Microsoft 365 almacenan archivos en OneDrive para la Empresa y SharePoint Online. Las operaciones de archivo son las mismas, pero los recursos (direcciones URL) son un poco diferentes para cada uno de estos servicios.

Esta solicitud GET se expresa en el SDK de Microsoft Graph de la siguiente manera:

const response = await graphClient
  .api('/me/drive/root/children')
  .get();

Puede hacer que la llamada sea más eficaz especificando las columnas de datos necesarias. Esta tarea se controla mediante el parámetro de cadena $select= query en REST (basado en el estándar OData). El SDK facilita el proceso al proporcionar una función select(). Observe que las funciones se pueden encadenar para facilitar la lectura de la solicitud.

const response = await graphClient
    .api('/me/drive/root/children')
    .select('id,name,folder,package')
    .get();

Pasos siguientes

Vamos a poner todo lo que ha aprendido a practicar y ampliar la aplicación para mostrar una lista de archivos en la carpeta raíz OneDrive para la Empresa del usuario.