Ejercicio: Mostrar archivos de usuario

10 minutos

En este ejercicio, ampliará la aplicación para mostrar una lista de archivos en la carpeta raíz del usuario en OneDrive para la Empresa.

Obtener la lista de archivos

Para empezar, agregue la llamada de Microsoft Graph a la aplicación.

Abra Startup.cs en el editor y dedique un momento a explorar el middleware de Microsoft Identity, Microsoft Graph y ASP.NET Core definido en ConfigureServices().
Busque el siguiente código en el método ConfigureServices(). Este código habilita la inserción de dependencias para objetos personalizados denominados GraphProfileClient y GraphFilesClient. Los objetos se limitan a la solicitud HTTP, lo que significa que se crearán una vez por solicitud al servidor.
```
services.AddScoped<GraphProfileClient>();
services.AddScoped<GraphFilesClient>();
```
Abra Graph/GraphCalendarClient.cs y dedique un momento a explorar el código existente. Tenga en cuenta las siguientes características:
- En la clase se incluyen dos campos readonly denominados _logger y _graphServiceClient. Los objetos insertados en el constructor se asignarán a estos campos.
- La clase contiene los métodos GetFiles(), DownloadFile(), UploadFile() y UploadLargeFile().
Quite el código existente en el constructor.

Modifique el constructor para insertar ILogger<GraphFilesClient> y GraphServiceClient, y asigne los valores de parámetro a los campos asociados:

public GraphFilesClient(
  ILogger<GraphFilesClient> logger,
  GraphServiceClient graphServiceClient)
{
  _logger = logger;
  _graphServiceClient = graphServiceClient;
}

Busque el método GetFiles(). En el bloque try, reemplace el código existente por el código siguiente para usar _graphServiceClient para recuperar los archivos de la cuenta del usuario.

return await _graphServiceClient.Me.Drive.Root.Children
            .Request()
            .Select(file => new
            {
                file.Id,
                file.Name,
                file.Folder,
                file.Package
            })
            .GetAsync();

Busque el método DownloadFile() y reemplace el código existente en el bloque try con el código siguiente para recuperar un archivo en función de su identificador.
```
return await _graphServiceClient
    .Me.Drive.Items[fileId].Content
    .Request()
    .GetAsync();
```
Guarde el archivo GraphFilesClient.cs antes de continuar.
Abra Pages/Files.cshtml.cs y dedique un momento a explorar el código existente. Tenga en cuenta las siguientes características:
- La clase FilesModel contiene varios campos y propiedades, como _logger, _graphFilesClient, UploadedFile y Files.
- Se inserta GraphFilesClient en el constructor y se asigna al campo _graphFilesClient.
- Se definen los métodos OnGetAsync(), OnPostAsync() y OnGetDownloadFile().
Busque el método OnGetAsync() y reemplace el código existente por el código siguiente:
```
Files = await _graphFilesClient.GetFiles();
```
Este código usa la instancia GraphFilesClient para recuperar los archivos de usuario y asignarlos a la propiedad Files.
Busque el método OnGetDownloadFile() y reemplace el código existente en el método por el siguiente:
```
var stream = await _graphFilesClient.DownloadFile(id);
return File(stream, MediaTypeNames.Application.Octet, name);
```
Este código realiza las siguientes tareas:
- Llama al método _graphFilesClient.DownloadFile, que acepta el identificador de archivo como parámetro.
- Una vez que se devuelve la secuencia de archivos, OnGetDownloadFile() devuelve un nuevo objeto File de la página de Razor. Este paso permite descargar el archivo en el explorador del usuario.
Guarde el archivo Files.cshtml.cs antes de continuar.

Mostrar y descargar archivos en la aplicación

El siguiente paso consiste en mostrar los archivos del usuario en una página web y permitir que se descarguen.

Abra el archivo Files.cshtml en el editor.
Dedique un momento a examinar el código HTML y Razor y observe que controla las siguientes tareas:
- Garantiza que el usuario está autenticado.
- Comprueba la propiedad Model.Files para ver si hay eventos que recorrer en iteración y mostrar en la página.
Busque el comentario @* Add foreach here *@ en el archivo y reemplácelo por el código siguiente:
```
@foreach(var file in Model.Files)
{
```
Busque el comentario @* Add foreach closing bracket here *@ y reemplácelo por un corchete de cierre para la instrucción foreach agregada en el paso anterior.
Agregue el código siguiente en el bucle foreach:
```
if (file.Folder == null && file.Package == null) {
    <li>
        <a asp-page-handler="DownloadFile"
            asp-route-name="@file.Name"
            asp-route-id="@file.Id">@file.Name</a>
    </li>
}
```
Este código realiza las siguientes tareas:
- Comprueba que el objeto de archivo no sea una carpeta o un paquete.
- Usa la sintaxis de Razor para crear un hipervínculo. Cuando el usuario selecciona el vínculo, el nombre de archivo y el identificador de archivo se pasarán al método DownloadFile de FilesModel que modificó anteriormente.
Guarde el archivo Files.cshtml antes de continuar.

Ejecutar la aplicación

Antes de ejecutar la aplicación, asegúrese de que la cuenta usada para iniciar sesión tenga algunos archivos en OneDrive. Llegó el momento de ejecutar la aplicación y probarla.

Realice el siguiente paso en función del editor de código:
- Visual Studio
  
  Pulse F5 para compilar y ejecutar el proyecto.
- Visual Studio Code u otro editor de código
  
  Abra una ventana de terminal en la carpeta Begin y ejecute el siguiente comando:
```
dotnet run
```
Abra un explorador y visite https://localhost:5001.
Inicie sesión con el inquilino para desarrolladores de Microsoft 365 que usó anteriormente al registrar la aplicación Microsoft Entra.
Seleccione el vínculo Archivos en el encabezado para ver los archivos de OneDrive del usuario.

Nota:

Si no ve ningún archivo, asegúrese de que el usuario tenga archivos en OneDrive.
Seleccione un archivo de la lista para descargarlo en su equipo.
Cierre el explorador y presione CTRL+C en la ventana del terminal para detener el servidor antes de continuar.

Nota:

Si ha abierto el proyecto en Visual Studio, puede cerrar el explorador o seleccionar Mayús+F5 en Visual Studio para detener el servidor. Cierre la ventana del terminal de Visual Studio creada si sigue abierta.

Ha demostrado correctamente cómo acceder a los archivos de un usuario que ha iniciado sesión, mostrarlos y descargarlos mediante Microsoft Graph y ASP.NET Core.

Continuar

Ejercicio: Mostrar archivos de usuario

Obtener la lista de archivos

Mostrar y descargar archivos en la aplicación

Ejecutar la aplicación

Comentarios