BlazorWebAssembly项目访问IdentityServer4

Program.cs注册工厂，注意角色的名称也要转换

builder.Services.AddOidcAuthentication(optiOns=>
{
// Configure your authentication provider options here.
// For more information, see https://aka.ms/blazor-standalone-auth
builder.Configuration.Bind("Local", options.ProviderOptions);
//这里是个ClaimType的转换，Identity Server的ClaimType和Blazor中间件使用的名称有区别，需要统一。
options.UserOptions.NameClaim = "name";
options.UserOptions.RoleClaim = "role";
})
.AddAccountClaimsPrincipalFactory();

给FetchData.razor页面增加认证要求

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles = "Admin")]

再次运行2个项目，测试alice有Admin权限，可以访问FetchData.razor页面，bob不行。

获取Access Token访问资源Web Api

参考微软官网定义，在Program.cs访问资源服务器的HttpClient参数，框架会自动获取Access Token到HttpClient的Header。

https://docs.microsoft.com/zh-cn/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-6.0#configure-the-httpclient-handler

AuthorizationMessageHandler 是一个 DelegatingHandler，用于将访问令牌附加到传出 HttpResponseMessage 实例。 令牌是使用由框架注册的 IAccessTokenProvider 服务获取的。

可以使用 ConfigureHandler 方法将 AuthorizationMessageHandler 配置为授权的 URL、作用域和返回 URL。 ConfigureHandler 配置此处理程序，以使用访问令牌授权出站 HTTP 请求。 仅当至少有一个授权 URL 是请求 URI (HttpRequestMessage.RequestUri) 的基 URI 时，才附加访问令牌。 

builder.Services.AddHttpClient("MyWebApi",
client => client.BaseAddress = new Uri("https://localhost:5601"))
.AddHttpMessageHandler(sp => sp.GetRequiredService()
.ConfigureHandler(
authorizedUrls: new[] { "https://localhost:5601" },
scopes: new[] { "scope1" }));
builder.Services.AddScoped(sp => sp.GetRequiredService()
.CreateClient("MyWebApi"));

FetchData.razor页面改为访问MyWebApi项目获取数据

protected override async Task OnInitializedAsync()
{
//forecasts = await Http.GetFromJsonAsync("sample-data/weather.json");
try
{
forecasts = await Http.GetFromJsonAsync("WeatherForecast");
}
catch (AccessTokenNotAvailableException exception)
{
exception.Redirect();
}
}

资源Web Api配置跨域共享

同时运行AspNetId4Web项目、MyWebAPi项目、WebAsmOidc项目，用管理员alice登录，访问FetchData.razor页面，提示跨域访问错误。

blazor.webassembly.js:1 info: System.Net.Http.HttpClient.MyWebApi.ClientHandler[100]

      Sending HTTP request GET https://localhost:5601/WeatherForecast

fetchdata:1

       Access to fetch at 'https://localhost:5601/WeatherForecast' from origin 'https://localhost:5801' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

:5601/WeatherForecast:1

参考微软官网给MyWebApi项目增加跨域共享配置

https://docs.microsoft.com/zh-cn/aspnet/core/blazor/call-web-api?view=aspnetcore-6.0&pivots=webassembly#call-web-api-example

app.UseCors(policy =>
policy.WithOrigins("https://localhost:5801")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials());

Fiddler抓包看一下，WebAsmOidc项目访问了2次MyWebAPi项目。

第一次是OPTIONS方法，获取MyWebAPi项目支持的功能。

OPTIONS https://localhost:5601/WeatherForecast HTTP/1.1
Host: localhost:5601
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Origin: https://localhost:5801
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.39
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-Fetch-Dest: empty
Referer: https://localhost:5801/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
HTTP/1.1 204 No Content
Date: Wed, 16 Mar 2022 12:13:16 GMT
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: https://localhost:5801

第二次才是查询数据。

GET https://localhost:5601/WeatherForecast HTTP/1.1
Host: localhost:5601
Connection: keep-alive
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="99", "Microsoft Edge";v="99"
authorization: Bearer eyJ……ihg
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.39
sec-ch-ua-platform: "Windows"
Accept: */*
Origin: https://localhost:5801
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://localhost:5801/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Date: Wed, 16 Mar 2022 12:13:17 GMT
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://localhost:5801
Transfer-Encoding: chunked
1ee
[{"date":"2022-03-17T20:13:18.0963201+08:00","temperatureC":13,"temperatureF":55,"summary":"Cool"},{"date":"2022-03-18T20:13:18.0966368+08:00","temperatureC":24,"temperatureF":75,"summary":"Balmy"},{"date":"2022-03-19T20:13:18.0966403+08:00","temperatureC":-17,"temperatureF":2,"summary":"Mild"},{"date":"2022-03-20T20:13:18.0966405+08:00","temperatureC":15,"temperatureF":58,"summary":"Chilly"},{"date":"2022-03-21T20:13:18.0966406+08:00","temperatureC":10,"temperatureF":49,"summary":"Mild"}]
0

问题

Blazor WebAssembly项目访问跨域的资源Web Api配置比较麻烦，这是由浏览器安全机制规定的，简单的Blazor WebAssembly项目最好还是配合托管主机一起使用，网页客户端只访问配套的托管主机服务端，对于第三方资源Web Api也通过托管主机中转，托管主机起到类似网关的作用。托管主机是后台服务器，不受浏览器跨域访问的约束。这样网页客户端的HttpClient配置比较简单，资源Web Api也不用配置跨域共享，当然这个会牺牲性能，有利有弊。

访问托管主机的简单配置：

builder.Services.AddHttpClient("MyWebApi",
client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
.AddHttpMessageHandler();
builder.Services.AddScoped(sp => sp.GetRequiredService()
.CreateClient("MyWebApi"));

DEMO代码地址：https://gitee.com/woodsun/blzid4