NET 8 Blazor Web app with ME-D

Riley McLaughlin 5 Reputation points
2024-01-10T01:11:13.3566667+00:00

I am unable to find a good document outlining the holistic approach to enable ME-ID auth in a Blazor Web App using NET8. For NET 8 there is a document showing the approach for a standalone WASM app with ME-ID:

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-entra-id?view=aspnetcore-8.0

But there is no such document explaining the approach with a Blazor Web App. Previously, in NET 7 we had the WASM Standalone ME-ID doc :

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-entra-id?view=aspnetcore-7.0

We also had a document for Net Core Hosted with ME-ID:

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/hosted-with-microsoft-entra-id?view=aspnetcore-7.0

Since the Blazor Web App has replaced the Blazor Hosted app in Net 8 it would be nice to have a similar document showing the full approach to set up ME-ID in a Blazor Web App.

I have played with different methods and have got it working, but only if I put my components in InteractiveServer rendering. Otherwise I lose all interactivity in my project (onclick handlers don't fire etc). This prevents me from taking advantage of InteractiveAuto and InteractiveWASM just to get auth working.

I would like to be able to direct users to the MS auth prompt when they are not authenticated, read their id from httpcontext when from either the main or client projects when they are authenticated, and allow them to sign out / change accounts. This is all possible in NET 7 following the hosted ME-ID doc from the link above.

Please let me know if there is an appropriate doc for this for NET8 Blazor Web App that I am missing.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,776 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,663 questions
Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
23,156 questions
{count} votes

3 answers

Sort by: Most helpful
  1. Shweta Mathur 30,301 Reputation points Microsoft Employee
    2024-01-15T07:51:30.9+00:00

    Hi Riley McLaughlin, Thanks for reaching out. I can understand there is no direct sample provided for blazor web app, but I can find the steps needed to convert Blazor Hosted app to Blazor Web app in Net8. https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0&tabs=visual-studio#convert-a-hosted-blazor-webassembly-app-into-a-blazor-web-app For direct sample, I would suggest you post this idea at the Azure Feedback Portal, which is monitored by the product team for feature enhancements. Hope this will help.

    Thanks,

    Shweta


    Please remember to "Accept Answer" if answer helped you.

    0 comments No comments

  2. Riley McLaughlin 5 Reputation points
    2024-01-16T19:58:10.2866667+00:00

    I was able to get a full solution from a repo in one of the issues that was posted in an answer here previously but seems to be removed now. Here is the issue: https://github.com/dotnet/AspNetCore.Docs/issues/29452

    and if you scroll through someone mentions this repo:

    dudley810/dotnet8identityopenid (github.com)

    This repo has a working example of a Blazor Web App using auto rendering and an authorized weather forecast controller call as a sample. The MS auth is working as expected. Glad to have it working as it is an improvement in user experience to not be directed to the loading indicator multiple times as was the case in WASM hosted with NET7 and before. Hopefully documentation will be added to fully address the Blazor Web app scenario here, because I bet there are a lot of devs looking for this.


  3. Pinaki Ghatak 5,570 Reputation points Microsoft Employee
    2024-01-17T13:23:13.4333333+00:00

    Hello @Riley McLaughlin Check if the following summary helps you:

    1. Create a tenant in Azure: Follow the guidance in Quickstart: Set up a tenant to create a tenant in ME-ID.
    2. Register a server API app in Azure: Navigate to Microsoft Entra ID in the Azure portal. Select Applications > App registrations in the sidebar. Select the New registration button. Provide a Name for the app (for example, Blazor Server ME-ID). Choose a Supported account type.
    3. Register a client app in Azure: Navigate to Microsoft Entra ID in the Azure portal. Select App registrations in the sidebar. Select the New registration button. Provide a Name for the app (for example, Blazor Client ME-ID). Choose a Supported account type.
    4. Create the Blazor app: This involves setting up the Blazor WebAssembly solution that uses ME-ID for authentication.
    5. Modify the Server app settings.json configuration: This involves adjusting the settings to accommodate the ME-ID authentication.
    6. Modify the default access token scope scheme: This is necessary for the app to function correctly with ME-ID. (Microsoft Entra Id)
    7. Run the app: After all the setup and modifications, you can now run your Blazor Web App.

    Please note that this is a high-level guide and the actual process may involve more detailed steps. I hope this helps.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.