How to implement Microsoft Entra ID in .NET 8 ASP.NET Blazor #53436

smoehring · 2024-01-17T14:32:55Z

smoehring
Jan 17, 2024

Hello there,

I am a bit confused what the correct way to implement Microsoft Entra ID for a .NET 8 Blazor (Server-Side) might be.
While there is an Documentation how to implement it for Blazor Webassembly, this is outdated for .NET 8 Blazor WebApp and does not apply for Blazor Server in the first place.

Since .NET 5 i used the Azure.Identity NuGet Package in combination with the Microsoft.Identity.Web Package and half-successfully implemented this solution in a .NET 8 Blazor WebApp Project:

Example using the Blazor WebApp Template (.net 8 / Authenticationtype: None, Interactive render mode: Server, Interactivtiy location: Global):

Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddMicrosoftIdentityConsentHandler(); // Added

// Configure Authentication to use OpenID with Microsoft Entera ID
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration);

// Default for our corporate Azure Login
builder.Services.Configure<OpenIdConnectOptions>(
    options => options.ResponseType = OpenIdConnectResponseType.CodeIdToken);

// In a real life situation i would use groups and roles to assert the policies, here we will always fail to demonstrate
builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("AlwaysFail", policyBuilder => policyBuilder.RequireAssertion(_ => false));
    options.DefaultPolicy = options.GetPolicy("AlwaysFail");
    options.FallbackPolicy = options.DefaultPolicy;
});

var app = builder.Build();
// [...]

Routes.razor

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
            <NotAuthorized>
                <h1>Not Authorized</h1>
            </NotAuthorized>
            </AuthorizeRouteView>
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorMantraIdExample.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

This works fine for the most cases, however, upon Authorization-Failure it will result in a Access-Denied loop as described in multiple Tickets like #52167, #52222 and #52063. It will never reach the NotAuthorized Area of the Routes.razor.
Sadly, most of them have been closed or contains dangerous workarounds (which i found will just disable the Authorization alltogether) with no actual solution.

I myself have not found any solution for this either with the exception of adding and mapping a Controller myself that allows anonymous access. This however can not be the intended solution for this.

I assume the route used comes from the Microsoft.Identity.Web.UI Package, however i do not need it as i am fully using the Entera ID (in a corporate environment) and have no individual accounts that could benefit from it.
The <NotAuthorized> area from the <AuthorizeRouteView> would be more than enough and way easier to maintain.

So TL;DR:
What is the correct way to implement Microsoft Entera ID without relying on the Microsoft.Identity Package (too much) and being able to use the AuthorizeRouteView> <NotAuthorized> area?

Thank you in advance.

halter73 · 2024-01-30T11:16:36Z

halter73
Jan 30, 2024
Collaborator

We're currently working on a sample for this. You can check it out at https://github.com/dotnet/blazor-samples/tree/ea382520bf99b195b7c64108ca0bcc7e9ea49ca5/8.0/BlazorWebAppOidc and https://github.com/dotnet/blazor-samples/tree/ea382520bf99b195b7c64108ca0bcc7e9ea49ca5/8.0/BlazorWebAppOidcBff.

There's an PR open at dotnet/AspNetCore.Docs#31555 for the documentation to go with the sample. You can see the documentation in its current form at https://github.com/dotnet/AspNetCore.Docs/blob/602fb15bba8063cfefb691f099f9cd8dda7dedd0/aspnetcore/blazor/security/server/blazor-web-app-with-oidc.md.

1 reply

smoehring Feb 9, 2024
Author

Thank you for your work, i was able to remove the Microsoft.Identity.* Package with this.
Sadly it does not address the "Redirect to /Account/AccessDenied" Problem upon unauthorized access. Are you aware of any workaround for this or when (or if?) it will be fixed?
.NET 6 goes EOL in around 9 months, so there is not much time to migrate everything and as it currently stands, i can not deploy .net8 to production.

bneumann · 2024-04-18T11:13:06Z

bneumann
Apr 18, 2024

Hi, I came here with almost the same question. We upgrade our WebAssembly UI to dotnet 8. While at it we decided to also include a Blazor Server version, so we moved all our UI code into a razor library and imported it into the WASM project. That works totaly fine.
Now we saw that the template dotnet new blazorserver --auth SingleOrg -o blazorAuth is discontinued (though working) and one should use the new dotnet new blazor --auth Individual -o blazorAuth template.
We are also in a corporate environment so I don't care for users to register some account. I found that you can use external providers but none of them being AzureAD/EntraID.
The sample you provided confuses me even more because it contains 2 projects one is the blazor server and one a wasm client, and I actually wanted to only use a blazor server hosting. Is that even possible with Authentication for Entra ID?

1 reply

smoehring Sep 13, 2024
Author

Hey there.

First up: The State of the Blazor Authentication is a mess since Dotnet 8.
It has been nearly a year and the broken state has been mostly disregarded by the team. See #52063 - bring Popcorn.

But back to the Question: Yes it is possible (and quite easy) to use EntraId with Blazor Server-Side.
For this to work you need to allow ID-Token for implicit and hyrbrid-flows in your app-registration on EntraID

The Configuration in the program.cs looks as following:

builder.Services.AddAuthentication(options =>
            {
                options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
            }).AddOpenIdConnect(options =>
            {
                options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                options.Scope.Add(OpenIdConnectScope.Email);
                options.CallbackPath = new PathString("<MyCallBackPath>"); //e.g. /signin-ad
                options.Authority = $"https://login.microsoftonline.com/{<MyTenantId>}/v2.0/";
                options.ClientId = <ClientId>
                options.ClientSecret = <ClientSecret>
                options.ResponseType = OpenIdConnectResponseType.CodeIdToken; // <- This is important.
                options.GetClaimsFromUserInfoEndpoint = true;
                options.MapInboundClaims = false;
                options.TokenValidationParameters = new TokenValidationParameters()
                {
                    NameClaimType = "preferred_username",
                    RoleClaimType = "groups"
                };
            }).AddCookie(options =>
            {
                options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
                options.Cookie.HttpOnly = true;
            });

You will need the Packages

Microsoft.AspNetCore.Authentication
Microsoft.AspNetCore.Authentication.OpenIdConnect

I hope this helps

developer9969 · 2025-01-16T07:43:21Z

developer9969
Jan 16, 2025

@smoehring I have been looking for a sample .net 8/9 blazor server and Entra External Id , I am finding most example either outdated or mainly webassembly, did you manage to get something working and do you have a sample I can look at? @halter73 Hi, I find the sample microsoft provided very confusing especially for blazor server where you mix webassembly with server, its not clear and if you are learning you then have doubts, I was expecting a simple blazor server calling a minimal api using entra ID . Is there such a thing?

grateful for any response

2 replies

ahelland Jan 16, 2025

I have a sample here for a BFF with Blazor server for auth and WASM for client-side:
https://github.com/ahelland/Container-Apps-BFF/tree/main/dotnet9/BFF_Aspire

Blog post with explanations on the way (since it might be that not everything is self-explanatory). Skipping client secrets here, but totally possible to adjust.

Should work with Entra External ID as well with an adjusted config, but haven't gotten around to verifying that yet.

developer9969 Jan 17, 2025

Oh that is great! I will have a look,

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to implement Microsoft Entra ID in .NET 8 ASP.NET Blazor #53436

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to implement Microsoft Entra ID in .NET 8 ASP.NET Blazor #53436

smoehring Jan 17, 2024

Replies: 3 comments · 4 replies

halter73 Jan 30, 2024 Collaborator

smoehring Feb 9, 2024 Author

bneumann Apr 18, 2024

smoehring Sep 13, 2024 Author

developer9969 Jan 16, 2025

ahelland Jan 16, 2025

developer9969 Jan 17, 2025

smoehring
Jan 17, 2024

Replies: 3 comments 4 replies

halter73
Jan 30, 2024
Collaborator

smoehring Feb 9, 2024
Author

bneumann
Apr 18, 2024

smoehring Sep 13, 2024
Author

developer9969
Jan 16, 2025