You are reading an article that is part of the article series. This is part 2 and in this article we are going to walk you through how to implement Microsoft Entra ID authentication in Blazor Server Web App in .NET 8
You are reading an article that is part of the article series. This is part 2 and in this article we are going to walk you through how to implement Microsoft Entra ID authentication in Blazor Server Web App in .NET 8
I have published a blog previously about how to implement Azure AD Authentication in .NET 5 a couple of years back which became very popular and it's helping many developers. Now that we are again on the similar topic, Azure Active Directory is now Microsoft Entra ID, but it was just a rebranding and nothing much has changed in terms of how you configure things there.
The other major change regarding integrating Microsoft Entra ID Authentication in your .net applications is the Microsoft Identity Platform. The Identity Platform supports developers by providing SDK that has implementation of so many modern application development scenarios and implement cloud authentication using it.
So, I'm going to use Microsoft Identity Platform to integrate Entra ID authentication. Let's get started with it.
Before you start to follow steps given in this article, you will need an Azure Account, and Visual Studio 2012 with .NET 8.0 development environment set up and working.
Create ASP.NET Core Blazor Server Web Application
In the Additional information window, select .NET 8.0 (Long Term Support) in the Framework drop-down if not already selected and click the Create button.
Sign in to the Azure portal using an account with administrator permission. Once login, click on Azure Active Directory as shown in below image.
From the left navigation, select App Registrations.
And then click on New registration from the toolbar in the top. That will open a dialog “Register and app”.
In the Name input field, enter the name that you want to use for the app. This name will be shown in the login page when user will be redirected to Azure Active Directory for Login.
In the supported account types, select first option. This will allow users from your own organization to login using this application.
For now, leave Redirect URI to blank and click on Register.
After the app is created, open the app by clicking on its name and copy ClientID and TenantID and keep it with you.
Next, click on API Permissions. Click on Add a permission from the toolbar, then click on Microsoft graph, and then delegated permissions. That will show you list of permission to select. select and add profile and opendid permissions from the list.
Next, click on Authentication from the left navigation and in the platforms section, add Web if it does not exist. In the web section, go to Redirect URL and click on Add URI in the bottom. Enter {your-app-url}/signin-oidc. For example, enter https://localhost:44332/signin-oidc if your local project is running on port 44332.
Let's now switch to Visual Studio where we have our BlazorAppPart2, and open nuget package management console. You can go to Tools Menu > Nuget Package Manager > Nuget Package Manager Console to open it in visual studio.
We will install two libraries from Microsoft Identity Platform Nuget Packages:
Once this step is completed, you can simply copy paste line 8 and line 10-19 from the below program.cs and paste it in your program.cs
Next, we want to add login and logout links. Open /components/Layout/MainLayout.razor and add following lines after line 11:
Now we will need to modify appsettings.json to include the AzureAd section configuraton so that Microsoft Identity Platform can copy the settings from there.
That's it, now you are ready to run the application. Add following section to the appsettings.json and adjust the values of tenantId, AppId
404 page when clicking on the Login link
The section that you need to inject some C# code into the program.cs, line 38 also needs to be added "app.MapControllers()"; otherwise, users will receive a 404 page when clicking on the Login link.
Auth error
When registering the app in Azure, in the Authentication page, ID Token needs to be ticked as well "ID tokens (used for implicit and hybrid flows)"; otherwise, it comes back with auth error.
Sign out stuck in loop
For Sign Out to work, the following line also needs to be added to program.cs: builder.Services.AddRazorPages(); If not, the sign out will stuck in a loop.
Note: Thanks to Mohsen Farahi for contributing to this.
AADSTS50011: The redirect URI specified in the specified in the request does not match the redirect URIs configured for the application.
Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError
to learn more about how to fix this.
Note:Thanks to Rick Lau for contributing this.
I just show you how to implement Microsoft Entra ID Authentication in Blazor Server Web App in .NET 8. We will be modifying this code again in part 6 when we will implement authorization in the project.
Ready to unlock the full potential of Blazor for your product development? Facile Technolab, top Blazor Development Company in India providing Blazor development services can help you bring your vision of product mvp to reality.
Prashant Lakhlani Solution Architect Thursday, January 11, 2024
Subscribe to Facile Technolab's monthly newsletter to receive updates on our latest news, offers, promotions, resources, source code, jobs and other exciting updates.
