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

4 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,

developer9969 Jan 21, 2025

@ahelland thanks for that link, new to Entra and put together a noddy app to get a feeling and all seems to be working however I seem to get a behavior where if

I try to logout
abort -
go back
it still says "Login"

and all the things I do even get the AuthState still says not authenticated when should be.. if fact if I press login , the login screen is not presented(correct) . have you encountered this issue by any chance where the state of the auth is not in sync? thanks again

ahelland Jan 22, 2025

I probably should have mentioned that my sample focuses more om demoing login than the complete life cycle :)

In the auth config there is the line microsoftIdentityOptions.SaveTokens = true;. This is used to make it possible to auth against the WeatherAPI with a JWT as it is a separate service. If you don't have such a need you can set it to false.

There isn't proper clearing of the auth state on logout so you are automagically signed in again if you hit login immediately after signing out. The token will expire though - so if you leave the browser open it will error out later on. The token refreshing you are already aware of it seems: #8175

Things like aborting and going back & forth I haven't fully tested. When you say AuthState not authenticated - is that while stepping through the debugger or an error message in the UI? (As in I would like to know if I have a bug I'm not aware of that I should fix.)

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

Uh oh!

Uh oh!

smoehring Jan 17, 2024

Replies: 3 comments · 6 replies

Uh oh!

halter73 Jan 30, 2024 Collaborator

Uh oh!

Uh oh!

smoehring Feb 9, 2024 Author

Uh oh!

bneumann Apr 18, 2024

Uh oh!

smoehring Sep 13, 2024 Author

Uh oh!

developer9969 Jan 16, 2025

Uh oh!

ahelland Jan 16, 2025

Uh oh!

developer9969 Jan 17, 2025

Uh oh!

Uh oh!

developer9969 Jan 21, 2025

Uh oh!

ahelland Jan 22, 2025

smoehring
Jan 17, 2024

Replies: 3 comments 6 replies

halter73
Jan 30, 2024
Collaborator

smoehring Feb 9, 2024
Author

bneumann
Apr 18, 2024

smoehring Sep 13, 2024
Author

developer9969
Jan 16, 2025