Categories
ASP.NET CORE Azure Blazor

TROUBLESHOOT: ASP.NET Core Blazor WebAssembly hosted app with Azure Active Directory B2C

In Blazor WASM 3.2.0 Preview 2, Microsoft announced support for Token-based authentication. In particular, IdentityServer, OpenID Connect provider, and Azure Active Directory B2C.

THIS ARTICLE IS SPECIFICALLY FOR AZURE ACTIVE DIRECTORY B2C

Follow the guide: https://docs.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/hosted-with-azure-active-directory-b2c?view=aspnetcore-3.1#create-the-app

We should be able to create an app that’s able to use AAD B2C for login and use API securely.

In creating the app, it requires carefully crafted command to create the app: dotnet new blazorwasm -au IndividualB2C –aad-b2c-instance “{AAD B2C INSTANCE}” –api-client-id “{SERVER API APP CLIENT ID}” –app-id-uri “{APP ID URI}” –client-id “{CLIENT APP CLIENT ID}” –default-scope “{DEFAULT SCOPE}” –domain “{DOMAIN}” -ho -ssp “{SIGN UP OR SIGN IN POLICY}” –tenant-id “{TENANT ID}”

I tried this several times and I keeps on getting weird issues.

  1. On Chrome, I’ll get some weird PERMISSION issue. It works on Firefox and Edge, so this is probably not something I did wrong. Most likely will get fixed in the future.
  2. After Login, LoginDisplay gets my displayname correctly, however, when visit FetchData, the app will crash due to token been null

For 2, after hours, seems create app generation might cause an issue in builder.Services.AddMsalAuthentication.

Incorrect Generated: options.ProviderOptions.DefaultAccessTokenScopes.Add(“https:// XXXXXX.onmicrosoft.com/https:// XXXXXX.onmicrosoft.com/11111111-1111-1111-1111-111111111111/API.Access”);

Working solution:

options.ProviderOptions.DefaultAccessTokenScopes.Add(“https://XXXXXX.onmicrosoft.com/11111111-1111-1111-1111-111111111111/API.Access”);

Hopefully this helps someone else.

Leave a Reply

Your email address will not be published. Required fields are marked *