Blazor WASM 独立于具有 AAD B2C 授权的 ASP.NET Core 6 Web API答案

【问题标题】：Blazor WASM standalone to ASP.NET Core 6 Web API with AAD B2C AuthorizationBlazor WASM 独立于具有 AAD B2C 授权的 ASP.NET Core 6 Web API
【发布时间】：2022-12-16 06:02:32
【问题描述】：

我正在构建一个 Blazor WASM 独立 UI，它将使用现有的 ASP.NET Core 6 Web API 作为其后端。我有 Blazor 应用程序和 Web API 分别成功地向 AAD B2C 进行身份验证，但我无法让 UI 成功地将令牌传递给 API 并始终从 API 获得 401。

我引用的是来自 Blazor 应用程序的 NSWAG 生成的 API 客户端。

网页接口

appsettings.js:

Program.cs:

Blazor WASM 独立

appsettings.js：

Program.cs：

Page.cs:

Service.cs：

【问题讨论】：

请在code block 中分享您的代码，而不是images。

标签： asp.net-core-webapi azure-ad-b2c blazor-webassembly asp.net-core-6.0

【解决方案1】：

即使我最初得到了 Http 500 错误。如果控制器类提到了 RequiredScope，请删除该属性。

在客户端appsettings.json中它必须是Authority并且在服务器appsettingsjson中它必须是实例。

我的 WeatherForecastController.cs

[RequiredScope(RequiredScopesConfigurationKey = "AzureAdB2C:Scopes")]

来自客户端应用程序的我的 appsettings.jsonappsettings.json 文件将在wwwroot 文件夹下可用

{
  "AzureAdB2C": {
    "Authority": "https://DomainInitialName.b2clogin.com/DomainInitialName.onmicrosoft.com/B2C_1_Sign_In",
    "ClientId": "ClientID from Client AppRegistration",
    "ValidateAuthority": false
  }
}

客户端程序.cs文件

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();

服务器应用程序中的我的 appsettings.json

{ 
  "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": "*"
}

输出

参考资料取自 MSDoc 1 和 2

【讨论】：

谢谢，Harshitha，但看起来您的示例使用的是 ASP.Net Core 托管的标准 Blazor WASM 应用程序。在我的例子中，我有一个现有的 Web API，我需要将一个新的 Blazor WASM 应用程序连接到它，因此它们具有不同的基地址。
它只是 Web API。你可以查看我的controller Action Method。

【解决方案2】：

我最终在这个例子的帮助下解决了我的问题：https://github.com/bryanknox/BlazorApiAadB2c/tree/main/BlazorSample

更新 HttpClient 时，我需要添加一个自定义的 AuthorizationMessageHandler，然后配置 authorizedUrls 和 scopes，因为 UI 正在通过生成的 NSWAG 客户端与具有不同基本 URL 的现有 API 对话.我通过扩展类做到了这一点。
1. 在Program.cs 中，我这样调用扩展类：builder.Services.AddApiClient(builder.Configuration);
2. 我还在 .ConfigureHandler(scopes... 参数 URL 中使用了 GUID，但实际上需要使用它，因为它是在 B2C 门户中定义的，它与实际的 API AAD B2C 应用程序注册名称一起使用。

【讨论】：