Exercise - Show a user's emails - Training

10 minutes

Let’s use all the concepts discussed up to this point and make changes to the sample app to access their email.

Load emails from Microsoft Graph

Start by adding a call to Microsoft Graph to load the current user’s last 10 emails.

Open Startup.cs in your editor and take a moment to explore the Microsoft Identity, Microsoft Graph, and ASP.NET Core middleware that is defined in ConfigureServices.
Locate the following code in the ConfigureServices() method.
```
services.AddScoped<GraphProfileClient>();
services.AddScoped<GraphEmailClient>();
```
This code enables dependency injection for custom objects named GraphProfileClient and GraphEmailClient. The objects are scoped to the HTTP request, which means they'll be created once per request to the server.
Open Graph/GraphEmailClient.cs and take a moment to explore the existing code. Note the following features:
- Two readonly fields named _logger and _graphServiceClient are included in the class. Objects injected into the constructor will be assigned to these fields.
- The class contains GetUserMessages, GetUserMessagesPage, and GetNextLink methods.
Remove the existing code in the constructor.

Modify the constructor to inject ILogger<GraphEmailClient> and GraphServiceClient and assign the parameter values to the associated fields:

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

Locate the GetUserMessages() method and replace the existing code with the following try/catch code blocks:

try
{

}
catch (Exception ex)
{
  _logger.LogError($"Error calling Graph /me/messages: { ex.Message}");
  throw;
}

Within the try block, add the following code to use _graphServiceClient to retrieve 10 email messages from the user’s account. The code will order the results by the receivedDatetime property and only select the Subject, BodyPreview, and ReceivedDateTime properties.

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;

Save the GraphEmailClient.cs file before continuing.
Open Pages/Email.cshtml.cs and take a moment to explore the existing code. Note the following features:
- The EmailModel class contains several fields and properties such as _graphEmailClient, NextLink, and Messages.
- GraphCalendarClient is injected into the constructor and assigned to the _graphEmailClient field.
Locate the OnGetAsync method and replace the existing code with the following code:
```
Messages = await _graphEmailClient.GetUserMessages();
```
This code uses the GraphEmailClient object to retrieve 10 email messages and assigns them to the Messages property.
Save the Email.cshtml.cs file before continuing.

Display emails in the app

The next step is to show the emails in the webpage.

Open the Email.cshtml file in your editor.
Take a moment to look through the HTML and Razor code and notice that it handles the following tasks:
- Ensures that the user is authenticated.
- Checks the Model.Messages property to see if there are any email messages to iterate through and display in the page.
Locate the @* Add foreach here *@ comment in the file and replace it with the following code:
```
@foreach(var message in Model.Messages)
{
```
Locate the @* Add foreach closing bracket here *@ comment and replace it with a closing bracket for the foreach statement added in the previous step.
Locate the @* Add message subject here *@ comment and replace it with the following code to write out each message's subject:
```
@message.Subject
```
Locate the @* Add message received date/time here *@ comment and replace it with the following code to write out the event’s start date and time:
```
@message.ReceivedDateTime.GetValueOrDefault().UtcDateTime
```
Finally, locate the @* Add message body preview here *@ comment and replace it with the following code to write out a preview of the body of the message:
```
@message.BodyPreview
```
Save the Email.cshtml file before continuing.

Run your app

Before running the application, ensure that the account used to sign in has some emails in it. It's time to run your application and try it out!

Perform the following step based on your code editor:
- Visual Studio
  
  Press F5 to build and run the project.
- Visual Studio Code or another code editor
  
  Open a terminal window in the Begin folder and run the following command:
```
dotnet run
```
Open a browser and visit https://localhost:5001.
Sign in using the Microsoft 365 developer tenant that you used earlier when registering the Microsoft Entra Application.
Select the Email link in the header to view the user’s email messages.
Once the page loads, a GET request is made to the Microsoft Graph /me/messages endpoint and the access token is passed in the Authorization Header. The call to /me/messages will then retrieve the data securely from the service and display it in the page.

Note

If you’re not seeing any email messages, please ensure that there are emails in the inbox of the account that you use to sign in to the app.
Close your browser and press CTRL+C in the terminal window to stop the server before continuing.

Note

If you’ve opened the project in Visual Studio, you can close the browser or select Shift+F5 in Visual Studio to stop the server. Close the terminal window Visual Studio created if it's still open.

You've successfully demonstrated how to access and display Microsoft 365 email messages for a signed in user using Microsoft Graph and ASP.NET Core!

Continue

Exercise - Show a user's emails

Load emails from Microsoft Graph

Display emails in the app

Run your app

Feedback