services.AddMicrosoftWebAppAuthentication(Configuration);\nservices.AddControllersWithViews(options =>\n{\n\u00a0\u00a0 var policy = new AuthorizationPolicyBuilder()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0.RequireAuthenticatedUser()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .Build();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 options.Filters.Add(new AuthorizeFilter(policy));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}).AddMicrosoftIdentityUI();<\/pre>\nFinally we need to ensure that our app can use the right v2 endpoints for signin and signout. Open the LoginDisplay.razor and update the code as per below:<\/p>\n
<AuthorizeView>\n\u00a0\u00a0\u00a0 <Authorized>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Hello, @context.User.Identity.Name!\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"MicrosoftIdentity\/Account\/SignOut\">Log out<\/a>\n\u00a0\u00a0\u00a0 <\/Authorized>\n\u00a0\u00a0\u00a0 <NotAuthorized>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"MicrosoftIdentity\/Account\/SignIn\">Log in<\/a>\n\u00a0\u00a0\u00a0 <\/NotAuthorized>\n<\/AuthorizeView><\/pre>\nYou will notice that there are no dedicated pages for sign-in and sign out. Instead, they are built into the Microsoft.Identity.Web dll. So as long as we update the Area to be \u201cMicrosoftIdentity\u201d, no other change is needed.<\/p>\n
When we launch the app from Visual Studio again, we get to experience the new login capabilities available in v2 such as passwordless and multi-factor authentication. What\u2019s great is that these features are designed to work without any code changes; as long as an Azure AD admin has configured these settings, all users can benefit from strong security.<\/p>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/8.png\")
<\/p>\n
As you can see, with a couple of lines of code, we were able to leverage the Microsoft.Identity.Web library to authenticate against Azure AD.<\/p>\n
Retrieving data from Microsoft Graph<\/h3>\n
Microsoft Graph offers a wide range of APIs to allow you to build rich and immersive apps with the data your users own. In the steps below, we are going to pull user\u2019s emails and display them within the app. To achieve this, we first need to extend the app registration permissions in Azure AD to add access to the email data and then we need to add some code in our Blazor app to retrieve and display this data in one of our pages.<\/p>\n
To the Azure AD portal! <\/strong><\/p>\nFind the app registration and go to API Permissions. Select Add New Permission and then select Graph API. From there, we want to select Delegated Permissions and select the \u201cMail.Read\u201d permission.<\/p>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/9.gif\")
<\/p>\n
We also need to create a User Secret since our app will need a way to validate the token and retrieve the data without any user interaction. Within the same app registration, open the Certificates & Secrets tab and create a new secret that never expires as it\u2019s shown below:<\/p>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/10.gif\")
<\/p>\n
Make sure to copy the password as you can\u2019t access it again once you navigate away from this tab\/page. However, you can always recreate it as needed \u2013 it\u2019s easy and free \ud83d\ude0a<\/p>\n
Back to our Blazor app, in Visual Studio, we first need to add the client secret in appsettings.json. Inside the AzureAD config section, we must add the following line:<\/p>\n
\u201cClientSecret\u201d: \u201c<your secret>\u201d<\/pre>\nIn the startup.cs class, we need to update our code to ensure that it fetches the appropriate token with the right permissions and stored it in a cache so that we can use it later in the app when we make the call to Microsoft Graph. We will also add HttpClient to our services pipeline to allow us to efficiently make HTTP calls to Microsoft Graph later:<\/p>\n
services.AddMicrosoftWebAppAuthentication(Configuration)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .AddMicrosoftWebAppCallsWebApi(Configuration, new string[] { \"User.Read\", \"Mail.Read\" })\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .AddInMemoryTokenCaches();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 services.AddHttpClient();<\/pre>\nNext, we need to update the code in the FetchData.razor page to retrieve our email data instead of the default (random) weather details. The following code contains all we need to retrieve and populate the page with our email data.<\/p>\n
@page \"\/fetchdata\"\n\n@inject IHttpClientFactory HttpClientFactory\n@inject Microsoft.Identity.Web.ITokenAcquisition TokenAcquisitionService\n\n<h1>Weather forecast<\/h1>\n\n<p>This component demonstrates fetching data from a service.<\/p>\n\n@if (messages == null)\n{\n\u00a0\u00a0\u00a0 <p><em>Loading...<\/em><\/p>\n}\nelse\n{\n\u00a0\u00a0\u00a0 <h1>Hello @userDisplayName !!!!<\/h1>\n\n\u00a0\u00a0\u00a0 <table class=\"table\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Subject<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Sender<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Received Time<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tbody>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 @foreach (var mail in messages)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>@mail.Subject<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>@mail.Sender<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td>@mail.ReceivedTime<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tbody>\n\u00a0\u00a0\u00a0 <\/table>\n}\n@code {\n\n\u00a0\u00a0\u00a0 private string userDisplayName;\n\u00a0\u00a0\u00a0 private List<MailMessage> messages = new List<MailMessage>();\n\n\u00a0\u00a0\u00a0 private HttpClient _httpClient;\n\n\u00a0\u00a0\u00a0 protected override async Task OnInitializedAsync()\n\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _httpClient = HttpClientFactory.CreateClient();\n\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ get a token\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var token = await TokenAcquisitionService.GetAccessTokenForUserAsync(new string[] { \"User.Read\", \"Mail.Read\" });\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ make API call\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue(\"Bearer\", token);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var dataRequest = await _httpClient.GetAsync(\"https:\/\/graph.microsoft.com\/beta\/me\");\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (dataRequest.IsSuccessStatusCode)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var userData = System.Text.Json.JsonDocument.Parse(await dataRequest.Content.ReadAsStreamAsync());\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 userDisplayName = userData.RootElement.GetProperty(\"displayName\").GetString();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var mailRequest = await _httpClient.GetAsync(\"https:\/\/graph.microsoft.com\/beta\/me\/messages?$select=subject,receivedDateTime,sender&$top=10\");\n\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (mailRequest.IsSuccessStatusCode)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var mailData = System.Text.Json.JsonDocument.Parse(await mailRequest.Content.ReadAsStreamAsync());\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var messagesArray = mailData.RootElement.GetProperty(\"value\").EnumerateArray();\n\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 foreach (var m in messagesArray)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var message = new MailMessage();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 message.Subject = m.GetProperty(\"subject\").GetString();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 message.Sender = m.GetProperty(\"sender\").GetProperty(\"emailAddress\").GetProperty(\"address\").GetString();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 message.ReceivedTime = m.GetProperty(\"receivedDateTime\").GetDateTime();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 messages.Add(message);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\u00a0\u00a0\u00a0 }\n\n\n\u00a0\u00a0\u00a0 public class MailMessage\n\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 public string Subject;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 public string Sender;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 public DateTime ReceivedTime;\n\u00a0\u00a0\u00a0 }\n}<\/pre>\nLet\u2019s launch our app and ensure that we are logged out first as the current token won\u2019t have the right permissions and we\u2019ve changed quite a few things in our code. You\u2019ll notice that the next time we log in, we are prompted for the newly added permissions which means that everything is working as expected. Now, beyond basic user profile data, the app is requesting access to our email data.<\/p>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/11.png\")
<\/p>\n
After granting consent we can navigate to the \u201cFetch Data\u201d page to read some emails!<\/p>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/12-1024x520.png\")
<\/p>\n
If you followed the steps correctly, you should now be able to see your email data as per the image above.<\/p>\n
Summary<\/h3>\n
The new Microsoft.Identity.Web does a great job in simplifying authentication and token management and you should start using it today. Before wrapping up, a couple of things worth highlighting:<\/p>\n
\n- Unlike normal web apps that can support dynamic\/incremental consent, in Blazor you need to request all the scopes necessary for your application up front. Failing to do so will cause an error as the TokenAcquisition method will be unable to validate the token against the new permissions. This is part of the Blazor mechanics so something that keen in mind when creating your apps.<\/li>\n
- Instead of hand rolling your Microsoft Graph HTTP requests, you should leverage the Microsoft Graph SDK which simplifies the interaction with Microsoft Graph and provides all the data objects you\u2019ll need to serialize and deserialize from. However, in this instance we went with option 1 because we only make one call to Microsoft Graph.<\/li>\n<\/ol>\n
Finally, you can find the full source code and a working example of this Blazor application on GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"This step by step guide will help you build a Blazor web app with Azure Active Directory authentication and Microsoft Graph.<\/p>\n","protected":false},"author":69081,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,5],"tags":[22],"class_list":["post-5116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-identity-platform","tag-azure-ad"],"acf":[],"blog_post_summary":"
This step by step guide will help you build a Blazor web app with Azure Active Directory authentication and Microsoft Graph.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69081"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=5116"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=5116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=5116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=5116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/1.gif\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/2.png\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/3-1024x706.png\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/4.png\")
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/5-1024x208.png\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/6-1024x169.png\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/07\/7-1024x170.png\")
<\/p>\n