《进击吧!Blazor!》系列入门教程 第一章 6.安全

本文基于《进击吧!Blazor!》编写,介绍了Blazor WebAssembly 用.NET生成交互式客户端Web应用。重点讲述为ToDo应用增加安全功能,包括Blazor身份验证与授权、使用Token的方式及风险,还对ToDo项目前后端改造,使其支持登录功能,最后提及更多安全内容可看官方文档。

《进击吧!Blazor!》是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
视频地址:https://space.bilibili.com/483888821/channel/detail?cid=151273
Blazor WebAssembly 是单页应用 (SPA) 框架,用于使用 .NET 生成交互式客户端 Web 应用,采用 C# 代替 JavaScript 来编写前端代码
本系列文章基于《进击吧!Blazor!》编写,升级.Net5,但因篇幅有限,省略了部分代码,完整示例代码:https://github.com/TimChen44/Blazor-ToDo

作者:陈超超
Ant Design Blazor 项目贡献者,拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,现就职于正泰集团。
邮箱:timchen@live.com
欢迎各位读者有任何问题联系我,我们共同进步。

我的的ToDo应用基本功能已经完成,但是自己的待办当然只有自己知道,所以我们这次给我们的应用增加一些安全方面的功能。

Blazor 身份验证与授权

身份验证

Blazor Server应用和 Blazor WebAssembly 应用的安全方案有所不同。

  • Blazor WebAssembly

Blazor WebAssembly 应用在客户端上运行。 由于用户可绕过客户端检查,因为用户可修改所有客户端代码, 因此授权仅用于确定要显示的 UI 选项,所有客户端应用程序技术都是如此。

  • Blazor Server

Blazor Server应用通过使用 SignalR 创建的实时连接运行。 建立连接后,将处理基于 SignalR 的应用的身份验证。 可基于 cookie 或一些其他持有者令牌进行身份验证。

授权

AuthorizeView 组件根据用户是否获得授权来选择性地显示 UI 内容。 如果只需要为用户显示数据,而不需要在过程逻辑中使用用户的标识,那么此方法很有用。

<AuthorizeView>
    <Authorized>
<!--验证通过显示-->
    </Authorized>
    <NotAuthorized>
<!--验证不通过显示-->
    </NotAuthorized>
</AuthorizeView>

Blazor 中使用Token

在Blazor WebAssembly模式下, 因为应用都在客户端运行,所以使用Token作为身份认证的方式是一个比较好的选择。
基本的使用时序图如下

前端 服务端 登录请求 验证身份 创建Token 返回Token 业务请求
### Blazor入门教程和资源 #### 什么是BlazorBlazor是一种用于构建交互式客户端Web应用程序的框架,允许使用C#而不是JavaScript来编写前端代码[^2]。对于.NET开发者而言,这意味着可以在前后端统一使用熟悉的技术栈。 #### 安装与配置环境 为了开始学习Blazor, 首先需要安装Visual Studio (建议版本为最新稳定版),并确保选择了“.NET跨平台开发”的工作负载。此外还需要下载并设置好.NET SDK。完成这些准备工作之后就可以创建第一个Blazor应用了。 #### 创建首个Blazor WebAssembly App 通过命令行工具或者IDE界面新建项目向导中的模板选项轻松建立新的Blazor WebAssembly工程: ```bash dotnet new blazorwasm -o MyFirstBlazorApp cd MyFirstBlazorApp dotnet run ``` 这段简单的脚本会初始化一个新的基于WebAssembly运行模式下的Blazor程序,并启动本地服务器供测试访问。 #### 学习组件化编程思维 在深入研究之前理解Blazor的核心概念——组件非常重要。每一个`.razor`文件代表了一个独立可重用的小部件(Component),它们之间可以通过参数传递数据相互协作形成复杂UI结构。例如下面展示的是如何定义一个带有属性绑定特性的简单按钮控件: ```csharp // Button.razor <button @onclick="OnClick"> Click me! </button> @code { [Parameter] public EventCallback OnClick { get; set; } } ``` 此段代码片段展示了基本的Razor语法以及事件处理机制的应用方式[^3]。 #### 掌握状态管理技巧 随着应用程序规模的增长,有效的状态管理和共享变得至关重要。官方推荐的方式之一就是利用依赖注入(Dependency Injection)特性配合专门的服务类(Service Class)来进行全局变量存储及操作。比如要实现计数器功能可以这样做: ```csharp public class CounterService : ICounterService { private int _count; public event Action<int> CountChanged; public void IncrementCount() { _count++; CountChanged?.Invoke(_count); } // ... other methods ... } // Register service in Program.cs or Startup.cs builder.Services.AddSingleton<ICounterService, CounterService>(); ``` 上述例子说明了服务注册过程和服务内部方法的设计思路。 #### 参考优秀开源库扩展能力 除了掌握基础知识点外,积极借鉴社区力量也是快速提升技能水平的有效途径。像[MASA.Blazor](https://github.com/BlazorComponent/MASA.Blazor)[^1], 这样的高质量第三方组件集合能够帮助加速开发进度同时提高用户体验质量。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值