Connect your Blazor Web App to Microsoft Entra ID (.NET 8)

Summary

In this tutorial, Anjuli demonstrates how to configure a .NET 8 Blazor Web App template to connect with Entra ID. She guides users through creating a new project, setting up authentication, and registering the app in the Microsoft Entra Admin Center. The video covers essential steps like installing the Microsoft Identity NuGet package, configuring the appsettings.json file, and handling authorization for specific components. Anjuli also discusses challenges, such as the lack of a built-in template for connecting to Entra ID and the nuances of WebAssembly behavior when authentication is added.

Takeaways

• 😀 The tutorial focuses on configuring a .NET 8 Blazor Web App to connect with Entra ID (formerly Azure Active Directory), excluding Blazor Server and Blazor WebAssembly since they already have built-in templates.
• 😀 The .NET 8 Blazor Web App template does not support the Microsoft Identity platform out of the box, which Microsoft plans to address in .NET 9. This limitation is a point of frustration for the presenter.
• 😀 To begin, the user must create a new Blazor Web App project and ensure that they select the .NET 8 framework. Authentication options like Microsoft Identity are not immediately available in the template.
• 😀 The project setup includes selecting Auto mode for the Interactive Render Mode and configuring each page's rendering mode individually.
• 😀 Visual Studio creates two projects: a client-side BlazorWebApp.Client project for WebAssembly components, and a server-side project for statically rendered components or ones that need a websocket connection.
• 😀 The Counter component in BlazorWebApp.Client uses interactive Auto mode, meaning WebAssembly components are dynamically loaded after the websocket connection is established.
• 😀 The authentication setup involves modifying Program.cs to include Microsoft Identity services, followed by installing the Microsoft.Identity.Web NuGet package and defining necessary settings in appsettings.json, such as Authority, Client_ID, and CallbackPath.
• 😀 The Entra ID registration process involves creating an app in the Microsoft Entra Admin Center, configuring a redirect URI, ensuring ID token support, and verifying User.Read permissions for logging in.
• 😀 To enable user login, the app must be registered with a user flow in Entra ID, and both the Client ID and Tenant name must be added to appsettings.json for proper configuration.
• 😀 The presenter demonstrates how to secure the entire app or specific components, like the Weather component, using authentication and authorization rules to ensure only logged-in users can access certain parts of the app.

Q & A

What is the main objective of this tutorial video?

The tutorial aims to guide viewers on how to configure the .NET 8 Blazor Web App template to connect with Entra ID for authentication and authorization.

Why doesn't the Blazor Web App template in Visual Studio offer the Microsoft Identity platform authentication by default?

The Microsoft Identity platform option is unavailable in the .NET 8 Blazor Web App template because, according to a GitHub feature request, Microsoft plans to move this feature to the .NET 9 release, which is why it is not included in the current version.

What is the difference between the BlazorWebApp.Client and BlazorWebApp.Server projects?

The BlazorWebApp.Client project contains components that are rendered in a WebAssembly (WASM) mode or an interactive auto mode, while the BlazorWebApp.Server project includes components that are either statically rendered or require an active WebSocket connection.

What does 'interactive Auto mode' refer to in the Blazor Web App template?

Interactive Auto mode refers to the default rendering mode where components are rendered interactively with WebSocket connections for dynamic behavior, and necessary files are downloaded in the background.

How do you add authentication to the Blazor Web App project?

To add authentication, you need to modify the Program.cs file in the server project by adding the appropriate authentication services and installing the Microsoft identity NuGet package.

What key settings are required in the appsettings.json file for authentication?

The appsettings.json file needs to include the Authority URL (for Entra ID), the Client_ID (assigned to the web app in Entra ID), and the CallbackPath, which is the URL where Entra ID will redirect the user after login.

How do you register the Blazor web app in the Microsoft Entra Admin Center?

To register the app in the Entra Admin Center, go to entra.microsoft.com, create a new app registration, specify a name, and configure the redirect URI with the CallbackPath. The ID token checkbox must be enabled in the authentication tab.

Why is the User.Read permission necessary for the web app in Entra ID?

The User.Read permission is essential for enabling users to log in and view their user profile, ensuring the authentication flow functions correctly.

What is the purpose of adding the Blazor app to a user flow in Entra ID?

Adding the Blazor app to a user flow allows the app to be included in an existing user journey, enabling seamless user registration and authentication as part of predefined flows in Entra ID.

How can you configure authorization for a specific component in Blazor Web App?

To configure component-level authorization, you need to remove the global authorization line from Program.cs and use the [Authorize] attribute in individual components, like the Weather component, to require authentication before the user can access it.