Blazor WASM 中的 Azure b2c 授權返回 401（未授權）

Question

我正在使用 Azure AD B2C 作為 ASP.NET Blazor WASM 應用程序和API的身份驗證提供程序所以問題是我無法從client訪問API端點，即 Blazor WASM。 當我向 API 發出請求時，我收到 401（未經授權）響應。

這是控制台錯誤

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Response status code does not indicate success: 401 (Unauthorized).
System.Net.Http.HttpRequestException: Response status code does not indicate success: 401 (Unauthorized).
   at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()
   at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__13`1[[Organizer.Web.Shared.Models.SuccessResultModel`1[[Organizer.Web.Shared.DTOs.UserDto, Organizer.Web.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], Organizer.Web.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Organizer.Web.Pages.Authentication.AccountProfile.OnInitializedAsync() in A:\Software_Development\2022\Organizer\Organizer.Web.Pages\Authentication\AccountProfile.razor.cs:line 57
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

B2C 客戶端設置

B2C API 設置

Blazor 客戶端 Appsettings 和 Program.cs

builder.Services.AddHttpClient("Organizer.API", client => client.BaseAddress = new Uri("https://localhost:7149"))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("Organizer.API"));

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add(
        "https://mydomain.onmicrosoft.com/60dbe9eb-056c-400d-a98d-c5c95b2bb000/Data.Read");
    options.ProviderOptions.LoginMode = "redirect";
});

{
  "AzureAdB2C": {
    "Authority": "https://mydomain.b2clogin.com/mydomain.onmicrosoft.com/B2C_1_susi",
    "ClientId": "f2161189-4bc6-4c26-99ae-a82b6729ab33",
    "ValidateAuthority": false
  }
}

API

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAdB2C"));

"AzureAdB2C": {
    "Instance": "https://mydomain.b2clogin.com/",
    "ClientId": "60dbe9eb-056c-400d-a98d-c5c95b4bb176",
    "Domain": "mydomain.onmicrosoft.com",
    "TenantId": "1a5a2799-8dde-4236-901f-c37b3d2b9b39",
    "Scopes": "Data.Read",
    "SignUpSignInPolicyId": "B2C_1_susi",
    "CallbackPath": "/authentication/login-callback"
}

注意：出於安全原因，我更改了 guid 和 URL。

Answer 1

• 請確保 scope 正確。scope 未正確配置可能是阻止客戶端應用程序無法訪問 web ZDB974238714CA8DE4FZA 端點的原因
• 如果 appId uri 是 jus api:// 客戶端 ID，請使用客戶端 ID，或者如果它自定義 URI，則在客戶端應用程序的 Program.cs 中添加如下范圍代替 clientId 時：

 options.ProviderOptions.DefaultAccessTokenScopes.Add("https://{TENANT}.onmicrosoft.com/{ API app CLIENTID OR custom value}/{DEFAULT Scope}");

例如：

.Add("https://contoso.onmicrosoft.com/41xxxa7xxxx-4xxx3-8fxx-6xxxxxxxfd/API.Access");

And then please try if you can set API app for a matching audience in the API app settings file (appsettings.json) which is nothing but "Audience": https://{TENANT}.onmicrosoft.com/{ API APP CLIENT ID OR CUSTOM VALUE if present}

前任：

{
  "AzureAdb2c": {
    "Authority": " ",
    "ClientId": "xxxxxxxxxx1fdxx",
    "ValidateAuthority": true,
    "Audience": "https://contoso.onmicrosoft.com/<client/appId>"
     ...
  }
}

觀眾的結尾不必是 scope /{DEFAULT SCOPE}。

• 只是為了重新檢查，請確保實例、權限、租戶 ID、租戶域、客戶端 ID 或重定向 URI 在您的應用程序中都配置正確，並且與 azure 門戶中的匹配
• 另請檢查所有API permissions ，這些權限已授予訪問 web API 端點所需的權限。

參考： 使用 Azure Active Directory B2C 保護 ASP.NET 核心 Blazor WebAssembly 獨立應用程序 | 微軟文檔