Part 2: 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

Articles in this series:

• Part 1: Getting started with Blazor Server Web App Development using .NET 8
• Part 2: How to implement Microsoft Entra ID Authentication in Blazor Server Web App in .NET 8
• Part 3: How to implement Multi Language UI in Blazor Server Web App in .NET 8
• Part 4: How to use Entity framework Core with MongoDb in .NET 8
• Part 5: How to show Dashboard with Radzen Bar and Pie Chart controls in in Blazor Server Web App
• Part 6: How to support Authorization in blazor server web app when using Microsoft Entra ID authentication
• Part 7: How to implement Radzen Grid Control with dynamic paging, filtering, shorting in in Blazor Server Web App
• Part 8: How to implement Data Entry form in blazor server web app
• Part 9: How to use SignalR to show real time updates in Blazor server web app

Introduction

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.

Prerequisites

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

• Start visual studio and select create new project.

• In the Create a new project window, type Blazor on the search box and hit Enter.
• Select the Blazor Web App template and select Next.

• In the Configure your new project window, enter BlazorAppPart2 as the project name and select Next.

• 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.

• Build and run the application once so that you have your application url that you can copy from the browser and save it for later.

Setting up your App in Azure AD

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.

Configuring ASP.NET Core Blazor Server App for Entra ID Authentication

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

Troubleshooting (Update1 - on 16-Jan-2024)

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.

Conclusion

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.