IT评测·应用市场-qidao123.com

标题: .NET云原生应用实践（五）：使用Blazor WebAssembly实现前端页面 [打印本页]

---

作者: 汕尾海湾    时间: 2024-11-3 20:04
标题: .NET云原生应用实践（五）：使用Blazor WebAssembly实现前端页面
本章目标

• 使用Blazor WebAssembly实现管理“贴纸”页面
  
• 集成认证与授权机制
  

假如你对Blazor WebAssembly的使用不感兴趣，可以跳过本章的阅读。你也可以使用本身熟悉的前端技术完成案例的界面部分，之前我们开发的后端API比较简朴，所以本身实现一套前端界面并不会是一个困难的事情。

完成本章内容后，我们会得到下面的效果（点击查看大图），是不是跟第一章中所画的概念图已经很接近了？

我们到那里了？

在进一步介绍后续内容之前，先看看目前实现了哪些内容。回首之前的一张架构简图（其实也不算是架构图），彩色部分是目前我们已经实现的部分，虽然目前有些地方还并不完满，只是在开发环境能够正常运行起来，并且我们开发的RESTful API都还没有容器化。

本章会完成“Sticker前端应用”这个部分，在完成这部分内容后，我们就可以在开发环境中调试运行整个应用步伐了，由于还没有引入基于nginx的API网关，所以，整个体系的结构跟上图相比还是会有些差异。
Blazor WebAssembly是什么？

假如问ChatGPT，它的回答是如许的：Blazor WebAssembly是一个基于WebAssembly的现代Web应用步伐框架，由微软开发。它允许开发职员使用C#和.NET技术构建客户端Web应用步伐，而无需使用JavaScript。Blazor WebAssembly使用WebAssembly的性能优势，将C#代码编译为WebAssembly字节码，从而在浏览器中运行高性能的客户端应用步伐。开发职员可以使用Blazor组件模子构建交互式和动态的用户界面，同时使用.NET的强大功能和生态体系。Blazor WebAssembly还支持与服务器端Blazor应用步伐的通信，以及与现有JavaScript库的集成，为开发职员提供了灵活和强大的工具来构建现代的Web应用步伐。
Blazor应用步伐基本上可以分为两种：

• Blazor服务端应用：它基于ASP.NET Core底子办法实现服务端Hosting，并通过一种通信方式（好比SignalR）实现用户交互
  
• Blazor WebAssembly：它是在客户端浏览器中运行的Web应用步伐，它将C#代码编译为WebAssembly字节码，直接在浏览器中实行。Blazor WebAssembly应用步伐完全在客户端实行，可以实现更快的加载速度和更高的性能，适用于须要在客户端独立运行的应用步伐，以及对实时性要求较高的应用
  

从.NET 8开始，Visual Studio引入新的Blazor应用步伐构建模板：Blazor Web App，它整合了Blazor服务端和Blazor WebAssembly的优势，并且使用了.NET 8中新引入的Blazor相关功能，好比静态服务端渲染（static SSR）、流式渲染（Streaming Rendering）等。原有的Blazor Server App和Blazor WebAssembly Standalone App在.NET 8 中仍然支持，只不过可以考虑将这些类型的应用迁移到Blazor Web App上。详见：https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-8.0?view=aspnetcore-7.0#new-blazor-web-app-template

本系列文章案例代码选用Blazor WebAssembly项目模板作为底子举行开发。
为什么选择Blazor WebAssembly？

现在前端技术非常成熟，体系也很庞大，为何抛弃React、Angular、Vue这些前端框架不选，偏偏选择Blazor WebAssembly呢？我想大概几个方面吧：

• 我想尝试一下微软原生WebAssembly的开发框架，看看开发者体验怎样
  
• 我计划仍然选择微软技术来展示案例（之前有读者对我使用Java系的Keycloak有质疑，其实Keycloak在整个案例架构中只是一个IdP，它跟PostgreSQL、Redis这些组件等价，这么说能理解吧？）
  
• 我对C#技术栈更为熟悉，功能开发和问题调查都会更加方便快捷，而且不轻易出错。在微服务的开发模式中，技术选择其实跟团队成员的偏好也有肯定的关系，在能够满足各种功能性和非功能性需求的前提下，团队当然渴望采用更为熟知的技术来完成研发。聊到我的前端技术，我个人对Angular比较熟悉，由于之前做过Angular的前端项目，React和Vue一直都没偶然机实践（或许我也不应该再“卷”下去了）
  

除了微软的Microsoft Learn和在线教育平台Edink之外，还是有不少站点是基于Blazor技术构建的，微软官方也给了几个客户案例，它们大多数都是US的公司，国内很少使用。
从上面三点可以看到，我在这个案例中选择Blazor WebAssembly，主观因素更多一些，在实际项目中，大概率大家也不会选择Blazor WebAssembly来构建本身的前端应用，原因也会是多方面的。由于本系列文章所介绍的案例比较简朴，前端部分暂时也不会有特别高的要求，所以我就基于本身的主观需求，选择了Blazor WebAssembly。读者完全可以基于本案例的服务端代码，使用本身熟悉的前端技术来重制“贴纸墙”的前端部分。
构建Stickers.Web应用

首先就是创建一个Blazor WebAssembly的应用，并启用认证机制，由于后面须要集成认证和授权流程。别的，我还在项目中使用了Blazor Bootstrap组件库，这个组件库对主要的Bootstrap组件举行了封装，并让其在Blazor应用中完美运行。使用Blazor Bootstrap须要有一些配置工作，这里不多介绍了，官方文档有Get Started操作流程。
Blazor WebAssembly的开发过程这里也不多做介绍了，请直接参考本文的源代码。这里主要介绍三个话题：自界说组件、使用HttpClient访问后端服务，以及认证与授权。
自界说组件

通常我们会把一些能够重复使用的前端代码封装成一个组件，并通过参数来接受数据并定制业务逻辑，实行过程中又通过变乱与别的组件交互。好比，一个分页功能就可以封装成一个组件，它可以通过参数来设置分页按钮的样式以及一次展现多少个分页按钮，当用户点击某个页码时，它又以变乱的方式关照相关的别的组件（好比父页面）被点击的页码数，以便触发页面更新等后续操作。
下面的代码是案例中的“编辑贴纸”的组件，这个组件有一个参数：StickerEditModel，用来指定用户操作行为类型（新建/编辑）以及将要新建/被编辑贴纸的数据模子，别的还包含两个变乱：OnCloseClickCallback和OnSaveClickCallback，当组件界面上的“关闭”和“生存”按钮被点击时，会触发这两个变乱。StickerEditModel的界说如下：

1. public enum EditMode
2. {
3.     Create,
4.     Edit
5. }
7. public class StickerEditModel
8. {
9.     public string? Content { get; set; }
10.     public int Id { get; set; }
11.     public string? Title { get; set; }
12.     public EditMode EditMode { get; set; }
13. }

复制代码

StickerEditModel看起来跟Sticker业务对象很像，但它只关注界面上所需的数据，所以，在StickerEditModel中，并没有CreatedOn、ModifiedOn这些属性，由于这些属性都是在创建或者修改贴纸时由体系自动生成的，新建/编辑贴纸的界面上并不须要这些信息。以下是“编辑贴纸”的组件EditStickerComponent的代码：

1. @using Stickers.Web.ViewModels
3. @if (Model is not null)
4. {
5.    
6.         <input @ref="_txtTitleRef" type="text"  placeholder="请输入贴纸标题" @bind-value="Model.Title">
7.    
8.    
9.         <InputTextArea  placeholder="请输入贴纸内容" @bind-Value="Model.Content"/>
10.    
12.    
13.         <Button Color="ButtonColor.Secondary" @onclick="OnCloseClickCallback"> 取消 </Button>
14.         <Button Color="ButtonColor.Primary" @onclick="OnSaveClick"> 保存 </Button>
15.    
16. }
18. @code {
19.     [Parameter]
20.     public StickerEditModel? Model { get; set; }
22.     [Parameter]
23.     public EventCallback<MouseEventArgs> OnCloseClickCallback { get; set; }
25.     [Parameter]
26.     public EventCallback<StickerEditModel> OnSaveClickCallback { get; set; }
28.     private ElementReference? _txtTitleRef;
30.     protected override async Task OnAfterRenderAsync(bool firstRender)
31.     {
32.         if (_txtTitleRef.HasValue)
33.         {
34.             await _txtTitleRef.Value.FocusAsync(true);
35.         }
36.     }
38.     private async Task OnSaveClick()
39.     {
40.         await InvokeAsync(() => OnSaveClickCallback.InvokeAsync(Model));
41.     }
42. }

复制代码

它提供了两个文本框，分别让用户输入贴纸的标题和内容，另有两个按钮，让用户生存所做的修改或者取消所做的操作。调用组件会生成一个StickerEditModel的实例，通过Model参数传入这个组件，然后以对话框的情势显示该组件以吸收用户输入，当用户完成操作并点击生存或者取消按钮时，通过变乱将用户的输入返回给调用方。
使用HttpClient访问后端服务

在Blazor WebAssembly中访问后端服务是非常方便的，只需在Program.cs中到场HttpClient的支持，好比：

1. builder.Services.AddHttpClient(
2.     "myHttpClient",
3.     client => client.BaseAddress = new Uri("http://localhost:5000")
4. );

复制代码

然后，在Razor页面或者组件中，通过注入HttpClientFactory，就可以使用注册的HttpClient了：

1. @inject IHttpClientFactory HttpClientFactory
3. @code {
4.     private override async Task OnInitializedAsync()
5.     {
6.         // ...
7.         using var httpClient = HttpClientFactory.GetClient("myHttpClient");
8.         var responseMessage = await httpClient.GetAsync("api/any-api");
9.         // ...
10.     }
11. }

复制代码

HttpClient在Blazor中的使用，跟ASP.NET Core中非常类似，可以直接阅读官方文档来了解具体内容，这里就不多做介绍了。
认证与授权

在Stickers.Web项目中须要调用后端的Stickers.WebApi RESTful API来实现其功能，而后端API是须要认证和授权的，所以，前端界面在HttpClient发送API调用请求时，就须要把access token带上，否则API调用是不会乐成的。在Blazor WebAssembly中，要实现这个逻辑，就须要自界说DelegatingHandler，然后在HttpClient中使用这个自界说的Handler。
Blazor WebAssembly支持一种称之为AuthorizationMessageHandler的DelegatingHandler，它可以直接拿来使用，以便将access token附加到发出的HTTP请求上。只须要在添加HttpClient的时候，指定HttpMessageHandler即可：

1. builder.Services.AddHttpClient(
2.     "myHttpClient",
3.     client => client.BaseAddress = new Uri("http://localhost:5000")
4. ).AddHttpMessageHandler<AuthorizationMessageHandler>();

复制代码

认证用户可以登录站点，并不表现该用户可以访问所有的页面并举行所有的操作，好比前文中所创建的nobody用户，它只能被认证，却没有任何授权，所以，对于该用户而言，它是无法使用“贴纸”功能的。在这个用户登录之后，即便登录没有问题，使用该用户的access token去访问后端API服务仍然会得到403 Forbidden的错误，好比，在这个用户点击“我的贴纸墙”页面时，下面的代码就会抛出未授权非常：

1. @code {
2.     protected override async Task OnInitializedAsync()
3.     {
4.         CurrentPage = await ReadStickersAsync();
5.         // 此处由于异常未被处理，造成页面出错
6.         await base.OnInitializedAsync();
7.     }
9.     private async Task<StickersPage?> ReadStickersAsync(
10.         int pageNumber = 1,
11.         int pageSize = DefaultPageSize)
12.     {
13.         using var httpClient = HttpClientFactory.CreateClient("stickersHttpClient");
14.         var httpResponseMessage = await httpClient
15.             .GetAsync($"api/stickers?page={pageNumber}&size={pageSize}");
16.         httpResponseMessage.EnsureSuccessStatusCode(); // 此处抛出异常
17.         var responseJson = await httpResponseMessage.Content.ReadAsStringAsync();
18.         return JsonSerializer.Deserialize<StickersPage>(responseJson);
19.     }
20. }

复制代码

解决这个问题的思绪有两种：

• 由于WebAssembly是可以得到用户的access token的，所以也可以像之前Stickers API里计划的那样，获得用户的授权信息，然后根据用户的授权信息来计划前端的授权机制（Blazor WebAssembly默认基于角色授权，也可以本身开发自界说的Policy来实现更为灵活的授权方案），再根据这套机制和用户本身的授权信息以判定某个组件是否应该显示、是否可以被该用户使用
  
• 简朴粗暴，在调用API时，假如非常，则捕获非常并直接跳转到登录界面或者错误界面，提示用户没有权限
  

第一种方案其实更为合理，一方面假如用户本来就没有权限，那就可以直接把不可以访问的组件隐藏掉或者禁用，没须要等到用户点击的时候才报错；另一方面，计划一个前端授权机制也会使得组件和页面的访问控制变得更为灵活，假如计划合理，还可以跟Blazor WebAssembly的授权机制无缝整合，大大减少出错的几率。而第二种方案则相对简朴一些，适用于像本文如许的demo场景（Blazor应用的授权计划不是本案例的重点）。
首先可以自界说一个AuthorizationMessageHandler，然后通过AddHttpMessageHandler方法，将这个Handler注册到HttpClient上：

1. public class StickersMessageHandler : AuthorizationMessageHandler
2. {
3.     private readonly NavigationManager _navigationManager;
4.    
5.     public StickersMessageHandler(IAccessTokenProvider provider, NavigationManager navigation) : base(provider,
6.         navigation)
7.     {
8.         _navigationManager = navigation;
9.     }
11.     protected override async Task<HttpResponseMessage> SendAsync(
12.         HttpRequestMessage request,
13.         CancellationToken cancellationToken)
14.     {
15.         try
16.         {
17.             var responseMessage = await base.SendAsync(request, cancellationToken);
18.             if (responseMessage.StatusCode == HttpStatusCode.Forbidden)
19.             {
20.                 _navigationManager.NavigateTo("/forbidden");
21.             }
22.             return responseMessage;
23.         }
24.         catch (AccessTokenNotAvailableException ex)
25.         {
26.             ex.Redirect();
27.             return new HttpResponseMessage();
28.         }
29.     }
30. }

复制代码

这个类首先注入一个NavigationManager实例，然后在重载的SendAsync方法中，判断返回的状态码是否为403 Forbidden，假如是的话，就直接跳转到/forbidden页面就可以了。这里的代码虽然对状态码举行了判断，但是在调用端的EnsureSuccessStatusCode方法仍然会由于状态码不是2XX而抛出非常。这里只要稍微处理一下就可以了：

1. protected override async Task OnInitializedAsync()
2. {
3.     try
4.     {
5.         CurrentPage = await ReadStickersAsync();
6.     }
7.     catch (HttpRequestException ex) when (ex.StatusCode is HttpStatusCode.Forbidden)
8.     {
9.         return;
10.     }
11.    
12.     await base.OnInitializedAsync();
13. }

复制代码

总结

本文简朴介绍了基于Blazor WebAssembly实现前端的几个主要方面，前端代码很多，一篇文章也无法全部介绍完备，有兴趣的读者请直接下载源码阅读。在运行本案例的过程中，你会发现，登录用户之前还能互相看到对方所创建的贴纸，这是一个bug，在下一讲中，我将通过引入多租户的初步计划，将这个bug修复掉。
源代码

本章源代码在chapter_5这个分支中：https://gitee.com/daxnet/stickers/tree/chapter_5/
下载源代码前，请先删除已有的stickers-pgsql:dev和stickers-keycloak:dev两个容器镜像，并删除docker_stickers_postgres_data数据卷。
下载源代码后，进入docker目录，然后编译并启动容器：

1. $ docker compose -f docker-compose.dev.yaml build
2. $ docker compose -f docker-compose.dev.yaml up

复制代码

现在就可以直接用Visual Studio 2022或者JetBrains Rider打开stickers.sln解决方案文件，然后同时启动Stickers.WebApi和Stickers.Web两个项目举行调试运行了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4