Blazor WASM standalone to ASP.NET Core 6 Web API with AAD B2C Authorization - asp.net-core-webapi

Question

I am building a Blazor WASM standalone UI that will use an existing ASP.NET Core 6 Web API for its backend. I have both the Blazor app and the Web API authenticating successfully to AAD B2C individually, but I can't get the UI to successfully pass the token to the API and always get a 401 from the API.
I'm referencing an NSWAG generated API Client from the Blazor app.
Web API
appsettings.js:
Program.cs:
Blazor WASM Standalone
appsettings.js:
Program.cs:
Page.cs:
Service.cs:

Answer 1

Even I got the Http 500 Error Initially. If the controller class has RequiredScope mentioned, remove that attribute.
In client appsettings.json it has to be Authority and in Server appsettingsjson it has to be Instance.
My WeatherForecastController.cs
[RequiredScope(RequiredScopesConfigurationKey = "AzureAdB2C:Scopes")]
My appsettings.json from Client App
appsettings.json file will be available under wwwroot folder
{
"AzureAdB2C": {
"Authority": "https://DomainInitialName.b2clogin.com/DomainInitialName.onmicrosoft.com/B2C_1_Sign_In",
"ClientId": "ClientID from Client AppRegistration",
"ValidateAuthority": false
}
}
Client Program.cs file
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using MySOBlazorApp.Client;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddHttpClient("MySOBlazorApp.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("MySOBlazorApp.ServerAPI"));
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
options.ProviderOptions.DefaultAccessTokenScopes.Add("https://DomainInitial.onmicrosoft.com/Client Id of Client App Registration from Azure Portal/User Flow from the tenant");
});
await builder.Build().RunAsync();
My appsettings.json from Server App
{
"AzureAdB2C": {
"Instance": "https://DomainInitial.b2clogin.com",
"ClientId": "ClientID from Server AppRegistration",
"Domain": "DomainInitial.onmicrosoft.com",
"SignUpSignInPolicyId": "UserFlow Name"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
OutPut
References taken from MSDoc 1 and 2

Answer 2

I ended up resolving my issues with the help of this example: https://github.com/bryanknox/BlazorApiAadB2c/tree/main/BlazorSample
When newing up the HttpClient, I needed to add a custom AuthorizationMessageHandler and then configure the authorizedUrls and scopes since the UI is talking to an existing API with a different Base URL via a generated NSWAG client. I did this via an extension class.
From within Program.cs, I call the extension class like so: builder.Services.AddApiClient(builder.Configuration);
I also was using the GUID in the .ConfigureHandler(scopes... param URL, but actually needed to use it as it was defined within the B2C portal, which was with the actual API AAD B2C App Registration name.