blazor wasm访问非本地的restful service
准备工作
blazor wasm正式版发布了!在尝试使用的过程中,发现几个小坑,跟大家分享一下,希望有所帮助。
我是通过keycloak来保护blazor和service的,如何保护service请参考我之前的随笔,此处不再重复说明。
启动一个新的wasm项目,包含身份认证,但不是hosted(web前端和service在同一个网址),也就是最常见的web和service分别开发和分别部署的场景,使用如下命令新建项目:
dotnet new blazorwasm -o {存放路径} --au Individual
自动生成客户端代码
由于我的service采用了openapi,因此在wasm项目中,可以借助openapi代码生成工具,自动生成客户端代码,节约开发时间。这个步骤不是必须的,但是个人建议这样做。
首先,如果没有安装工具,先安装工具:
dotnet tool install -g microsoft.dotnet-openapi
然后,运行命令生成客户端代码:
dotnet openapi add url http://localhost:5000/swagger/v1/swagger.json --output-file Weather.json
以上工具只是将json文件注册到项目中,项目中还必须安装NSWag.CodeGeneration.CSharp,才能正常生成客户端代码,为了方便大家参考,将所有需要引用的包都写在这儿了。
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.1</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="3.2.0" />
<PackageReference Include="Microsoft.Extensions.Http" Version="3.1.4" />
<PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
<PackageReference Include="NSwag.ApiDescription.Client" Version="13.0.5" />
<PackageReference Include="NSwag.CodeGeneration.CSharp" Version="13.5.0" />
<PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
</ItemGroup>
<ItemGroup>
<OpenApiReference Include="Weather.json" SourceUrl="http://localhost:5000/swagger/v1/swagger.json" />
</ItemGroup>
</Project>
为了保证代码能够顺利生成,可以运行dotnet build命令,如果成功,Obj目录会出现一个WeatherClient.cs文件,其中包含了model和service。因为他使用了Newtonsoft.Json,所以要添加这个包的引用。
配置oidc
模板包含了oidc的基本配置,修改配置文件中的地址和客户端名称即可连接到openid服务。
实际操作中遇到几个坑:
- 无法获得access token或者json解析错误
- 无法获得用户名
- 访问service时,无法自动添加acess token到请求头部
无法获得access token
主要是app默认采用implicit认证流程,keycloak默认没有开启该流程,而且开启后,会无法解析json。
解决方法,修改program.cs,在builder.Services.AddOidcAuthentication中添加如下代码
options.ProviderOptions.ResponseType = "code";
无法获得用户名
keycloak使用preferred_username发送用户名信息,而.net默认需要name字段,两边不匹配。
解决方法,要么修改这边,要么修改那边。
方法1:修改keycloak的client scopes - profile - mappers - username,修改"Token Claim Name"的内容为"name"
方法2:在builder.Services.AddOidcAuthentication中添加如下代码
options.UserOptions.NameClaim = "preferred_username";
访问service时,无法自动添加acess token到请求头部
这是最大的一个坑。
官方模板和文档中,总是在说如何访问自己hosted的service,但是实际使用中,app和service往往在不同的服务器上,官方文档最这种情况作了说明,但是如果不很细致的看文档,就容易理解错。
最主要的一点就是:BaseAddressAuthorizationMessageHandler只能给本地地址的请求加token,并不能处理不同服务器的情况。
下面是我的解决方法:
var clientName = "BlazorWithIdentity.ServerAPI";
var baseUrl = builder.Configuration.GetValue<string>("ApiBaseUrl"); builder.Services.AddHttpClient(clientName, client => client.BaseAddress = new Uri(baseUrl))
.AddHttpMessageHandler(sp => sp.GetRequiredService<AuthorizationMessageHandler>()
.ConfigureHandler(new [] { baseUrl })); builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>()
.CreateClient(clientName)); builder.Services.AddTransient<WeatherClient>(s =>
new WeatherClient(null, s.GetRequiredService<IHttpClientFactory>().CreateClient(clientName)));
4行:注入名称为clientName的客户端,并且设置handler,对于来自baseUrl的所有请求自动添加Auth头;
8行:注入HttpClient,在页面上通过 @inject HttpClient Http,就可以使用自带Auth头部的HttpClient了;
11行:注入自动生成的WeatherClient,使用4行的HttpClient
页面调用service访问数据
经过前面的各种配置,页面访问数据就很简单了,如下:
@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@inject WeatherClient Client
@attribute [Authorize] <h1>Weather forecast</h1> <p>This component demonstrates fetching data from the server.</p> @if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
} @code {
private IEnumerable<WeatherForecast> forecasts; protected override async Task OnInitializedAsync()
{
forecasts = await Client.WeatherForecastAsync();
}
}
怎么样,是不是很简洁的代码?
最新文章
- spring mvc 和spring security配置 web.xml设置
- linux 文件系统简介
- [工具分享]JetBrains ReSharper 9.0 正式版和注册码
- 【语言基础】c++ 基本数据类型与字节数组(string,char [] )之间的转化方法
- Linux系统下如何配置SSH?如何开启SSH
- vc++ mfc 里保存缩放的bmp图片 不失真
- Linux How to add a new disk to LVM
- MVC个人认为的终极分页
- 机器学习&mdash;&mdash;Logistic回归
- JS获取图片上传地址
- Git 远程仓库的管理和使用
- MSIL
- Openjudge-NOI题库-垂直直方图
- Centos更换yum源
- vlan分类简易解释
- 表table
- dp 动态规划 之C - Apple Catching 简单基础
- Fragment+FragmentActivity出现The specified child already has a parent. You must call removeView() on the child&#39;s parent first.
- SpringBoot在自定义类中调用service层等Spring其他层
- python使用selenium安装chromedriver的问题