Ejercicio: Mostrar los correos electrónicos de un usuario

Completado

Ahora vamos a usar todos los conceptos discutidos hasta ahora y a realizar cambios en la aplicación de ejemplo para acceder a su correo electrónico.

Cargar mensajes de correo electrónico de Microsoft Graph

Para empezar, agregue una llamada a Microsoft Graph para cargar los últimos 10 correos electrónicos del usuario actual.

  1. Abra Startup.cs en su editor y dedique un momento a explorar el middleware de Microsoft Identity, Microsoft Graph y ASP.NET Core que se ha definido en ConfigureServices.

  2. Busque el siguiente código en el método ConfigureServices().

    services.AddScoped<GraphProfileClient>();
    services.AddScoped<GraphEmailClient>();
    

    Este código habilita la inserción de dependencias para objetos personalizados denominados GraphProfileClient y GraphEmailClient. Los objetos se limitan a la solicitud HTTP, lo que significa que se crearán una vez por solicitud al servidor.

  3. Abra Graph/GraphEmailClient.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 GetUserMessages, GetUserMessagesPage y GetNextLink.
  4. Quite el código existente en el constructor.

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

    public GraphEmailClient(
      ILogger<GraphEmailClient> logger,
      GraphServiceClient graphServiceClient)
    {
        _logger = logger;
        _graphServiceClient = graphServiceClient;
    }
    
  6. Busque el método GetUserMessages() y reemplace el código existente por los siguientes bloques de código try/catch:

    try
    {
    
    }
    catch (Exception ex)
    {
      _logger.LogError($"Error calling Graph /me/messages: { ex.Message}");
      throw;
    }
    
  7. Dentro del bloque try, agregue el siguiente código para usar _graphServiceClient para recuperar 10 mensajes de correo electrónico de la cuenta del usuario. El código ordenará los resultados por la propiedad receivedDatetime y solo seleccionará las propiedades Subject, BodyPreview y ReceivedDateTime.

    var emails = await _graphServiceClient.Me.Messages
                .Request()
                .Select(msg => new
                {
                    msg.Subject,
                    msg.BodyPreview,
                    msg.ReceivedDateTime
                })
                .OrderBy("receivedDateTime desc")
                .Top(10)
                .GetAsync();
    return emails.CurrentPage;
    
  8. Guarde el archivo GraphEmailClient.cs antes de continuar.

  9. Abra Pages/Email.cshtml.cs y dedique un momento a explorar el código existente. Tenga en cuenta las siguientes características:

    • La clase EmailModel contiene varios campos y propiedades como _graphEmailClient, NextLink y Messages.
    • GraphCalendarClient se inserta en el constructor y se asigna al campo _graphEmailClient.
  10. Busque el método OnGetAsync y reemplace el código existente por el siguiente código:

    Messages = await _graphEmailClient.GetUserMessages();
    

    Este código usa el objeto GraphEmailClient para recuperar 10 mensajes de correo electrónico y los asigna a la propiedad Messages.

  11. Guarde el archivo Email.cshtml.cs antes de continuar.

Mostrar correos electrónicos en la aplicación

El siguiente paso es mostrar los correos electrónicos en la página web.

  1. Abra el archivo Email.cshtml en su editor.

  2. Dedique un momento a revisar el código HTML y Razor y observe que controla las siguientes tareas:

    • Garantiza que el usuario está autenticado.
    • Comprueba la propiedad Model.Messages para ver si hay mensajes de correo electrónico por los que iterar y mostrar en la página.
  3. Busque el comentario @* Add foreach here *@ en el archivo y reemplácelo por el siguiente código:

    @foreach(var message in Model.Messages)
    {
    
  4. 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.

  5. Busque el comentario @* Add message subject here *@ y reemplácelo por el siguiente código para escribir el asunto de cada mensaje:

    @message.Subject
    
  6. Busque el comentario @* Add message received date/time here *@ y reemplácelo por el siguiente código para escribir la fecha y hora de inicio del evento:

    @message.ReceivedDateTime.GetValueOrDefault().UtcDateTime
    
  7. Por último, busque el comentario @* Add message body preview here *@ y reemplácelo por el siguiente código para escribir una vista previa del cuerpo del mensaje:

    @message.BodyPreview
    
  8. Guarde el archivo Email.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 contiene algunos correos electrónicos. Es hora de ejecutar su aplicación y probarla.

  1. 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
      
  2. Abra un explorador y visite https://localhost:5001.

  3. Inicie sesión con el inquilino para desarrolladores de Microsoft 365 que usó anteriormente al registrar la aplicación Microsoft Entra.

  4. Seleccione el vínculo Correo electrónico en el encabezado para ver los mensajes de correo electrónico del usuario.

  5. Una vez que se carga la página, se realiza una solicitud GET al punto de conexión de Microsoft Graph /me/messages y el token de acceso se pasa en el encabezado de autorización. La llamada a /me/messages recuperará los datos de forma segura del servicio y los mostrará en la página.

    Página que muestra mensajes de correo electrónico recuperados de Microsoft Graph.

    Nota:

    Si no ve ningún mensaje de correo electrónico, asegúrese de que hay correos electrónicos en la bandeja de entrada de la cuenta que usa para iniciar sesión en la aplicación.

  6. 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 de terminal Visual Studio crea si sigue abierta.

Ha demostrado con éxito cómo acceder y mostrar los mensajes de correo electrónico de Microsoft 365 para un usuario registrado usando Microsoft Graph y ASP.NET Core.