Blazor WASM hosted in ASP.NET Core templates with Azure B2C and Azure AD authentication using Backend for Frontend (BFF)

I have implemented many Blazor WASM ASP.NET Core hosted applications now for both Azure AD and Azure B2C authentication. I always implement security for this type of application now using the Backend for Frontend (BFF) security architecture and can remove the tokens from the client. This is also what I recommend. At present, no Microsoft templates exist for this and it takes too much effort to set this up every time I start a new project.

To fill this gap, I created two templates to speed up the development process:

Blazor.BFF.AzureAD.Template
Blazor.BFF.AzureB2C.Template

The two separate Nuget packages were created, one for Azure AD and one for Azure B2C due to the restrictions and differences in the identity providers. Both packages use Microsoft.Identity.Web to authenticate and also use Microsoft Graph to access the profile data. I have included the typical security headers required using the NetEscapades.AspNetCore.SecurityHeaders Nuget package. The security headers and the CSP are setup ready for production deployment. (As best as Blazor allows)

Using the templates

You can install the Azure B2C template as follows:

dotnet new -i Blazor.BFF.AzureB2C.Template

and the Azure AD template with

dotnet new -i Blazor.BFF.AzureAD.Template

Then you can create a new project using the dotnet CLI

dotnet new blazorbffb2c -n YourCompany.MyB2cBlazor

or

dotnet new blazorbffaad -n YourCompany.MyADBlazor

You need to create the Azure App registrations for the applications as requires. If using Azure B2C, the user flow needs to be created. This is well documentation on the Microsoft.Identity.Web github repo. The Graph permissions also need to be added and configured in the app.settings.json. The app.settings.json have been configured with the values expected. Once all configured, you can run the application and also deploy this to an Azure Web App or whatever.

Each template implements an API call and a user profile view using the Microsoft Graph data.

If you have any comments, or ways of improving these templates, please create an issue or a PR in the github repo.

Links

https://github.com/damienbod/Blazor.BFF.AzureAD.Template

https://github.com/damienbod/Blazor.BFF.AzureB2C.Template

https://github.com/AzureAD/microsoft-identity-web

https://github.com/andrewlock/NetEscapades.AspNetCore.SecurityHeaders

Leave a Reply

Your email address will not be published.