如何给Blazor.Server加个API鉴权?
(Ant Design of Blazor为努力而生)
书接上文,上次我们说到了最终选用Blazor.Server来实现了我们的MVP项目,额其实就是博客的增删改查,不过运行还是很爽的,不过是一个小demo,脑子里一直有个声音,说把Blog.Admin项目给做个Blazor版本,以后再说吧,一个人毕竟是有限的。
这三篇也是上中下了,从客户端,到服务端,最后今天简单说下权限,之后可能还是重点说下NetCore的相关内容吧。
上周我们虽然已经部署了,加载速度也解决了,展示也挺好了,最后确有一个小问题,让我不得不提上日程,那就是权限问题,因为我增加了新增和修改,肯定不能让每个人都处理吧,好,那咱们就开搞,我周六用了一下午的时候,研究了下如何加权的问题,感觉并不是很满意,虽然也可以用,希望有借鉴意义。
1、Blazor权限控制有哪几种?
关于Blazor.Server开发中的权限控制呢,其实是有三个方向,或者说是三个模块的,这里简单说一下吧:
1、对.razor组件的加权
我们通过之前的了解,已经发现了其实Blazor组件中,可以写c#的业务逻辑,更像是一个.cs类文件一样,所以我们也可以像写类或者方法那样,直接加个特性,官方也是这么说的:
@page "/fetchdata"
@attribute [Authorize(Roles = "Admin")]
是不是感觉挺厉害的,直接配置,然后只要我们的HttpContext中有对应的Claims,那就可以访问,否则就不能获取指定的内容,官方还给来了个组件:
<AuthorizeView Roles="User"><p>You can only see this if you're in the User role.</p>
</AuthorizeView><AuthorizeView Roles="Admin"><p>You can only see this if you're in the Admin role.</p>
</AuthorizeView>
看似一切正常的情况下,我没有试验成功,可能文档看的还是不够,这里留个疑问,以后有机会学会了,再补充下。
而且,就算是可以的,最后会出现另一个问题,就是如何和IdentityServer4进行兼容问题,毕竟我们的BlogCore资源服务器是基于Ids4验证的,????,困难总比办法多。
所以这种方法暂时搁置,是搁置,不是放弃。
2、通过service服务来控制
昨天我们在讲到创建官方Demo的时候,看到了Blazor.Server项目其实是可以通过自己建Service服务来进行处理的,包括持久化,那我们能不能在这里做处理呢?
这个就更像是我们的NetCore项目了,嗯,感觉靠谱,毕竟轻车熟路,可是转念一想,我们使用的是第三方的BlogCore的资源服务器呀,这里就算加权了,但是c#发起HttpClient请求的时候,不还是有问题,还是需要传递Token么?倒不如直接写到.razor里边,直接去HttpClient请求第三方资源服务器。
而且还是没有解决如何兼容Ids4的问题,(⊙﹏⊙),放弃。
3、HttpClient直接请求带Token
最后我还是介于上边两个方案,综合了一个办法,投机取巧的方法:
在.razor中,直接用HttpClient去请求Blog.Core的API,然后Header中增加Token就行,至于这个Token从哪里来,有多个方案:
1、要么写个api,传递username和pwd,来获取token;
2、要么直接用个输入框,手动输入,这个投机方案,不提倡,但是可以自己玩玩儿。
3、写个登录页面;
最终因为不是很擅长Blazor,而且也没有过多的研究,最终还是选择的第二种,直接手动输入吧。
2、HttpClient直接发送Token请求
接下来就是很简单的没有啥技术含量了:
1、编辑表单增加Token输入框
<div><div class="form-group"><label>令牌</label><input @bind="BlogArticle.Token" class="form-control" /></div><div class="form-group"><label>标题</label><input @bind="BlogArticle.btitle" class="form-control" /></div><div class="form-group"><label>分类</label><input @bind="BlogArticle.bcategory" class="form-control" /></div><div class="form-group"><label>外链</label><input @bind="BlogArticle.bsubmitter" class="form-control" /></div><div class="form-group"><label>副标题</label><input @bind="BlogArticle.bcontent" class="form-control" /></div><div class="form-group"><label>阅读</label><input @bind="BlogArticle.btraffic" class="form-control" /></div><button class="btn btn-primary" @onclick="TrySave">保存</button><CancelBtn Name="取消"></CancelBtn></div>
效果是这样的:
这个Token令牌从哪里来呢,很简单,我目前是简单写了一个API从Ids4项目生成的,然后手动输入的,你也可以写个登录页面来获取(不要告诉我,你还不会通过postman从ids4项目获取token)。
2、HttpClient添加Header
既然要鉴权,然后从Blog.Core中获取指定的资源数据,那就必须仿照前后端分离项目,在Header中添加Authorization信息。
private async Task OnSaveAsync(BlogArticle blogArticle){BlogArticle = blogArticle;// 通过双向绑定,从子组件中获取token,并添加到Header中Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {BlogArticle.Token}");var result = await Http.PostAsJsonAsync("http://apk.neters.club/api/Blog/AddForMVP", BlogArticle);if (result.IsSuccessStatusCode){NavManager.NavigateTo("/blog/list");}else{// 如果失败了,必须刷新页面,因为这个时候HttpClient已经失效了_errmsg = "保存失败! 错误原因:" + result.ReasonPhrase + "。请刷新页面重试";}}
除了添加Header以为,另一个知识点就是需要刷新页面了,这个还是和我们平时访问api还是不一样的,就算是你生命周期设置了瞬态也不行:
services.AddTransient<HttpClient>();
很值得研究。
3、效果预览
简单处理了以后,就可以看看效果了,如果没有登录呢,会报错:
然后输入正确的Token后,就可以写入成功了。
3、总结
说句实话,对第三方资源服务器的请求和加权,应该有更高级的玩儿法,相信社区的小伙伴一起可以集思广益吧,未来还是很有希望的。固步自封,最终逃不掉失败的命运。
如何给Blazor.Server加个API鉴权?相关推荐
- JWT的API鉴权,基于拦截器的token与鉴权
基于JWT的API鉴权 基于拦截器的token与鉴权 如果我们每个方法都去写一段代码,冗余度太高,不利于维护,那如何做使我们的代码看起来更清爽呢?我们可以 将这段代码放入拦截器去实现 Spring中 ...
- API 鉴权插件上线!支持用户自定义鉴权插件
0.4.0 版本更新主要围绕这几个方面: 分组独立的 UI,支持分组 API 鉴权 API 测试支持继承 API 鉴权 支持用户自定义鉴权插件,仅需部分配置即可发布鉴权插件 开始介绍功能之前,我想先和 ...
- EduSoho Api 鉴权
EduSoho Api 鉴权 在请求接口时,首先要验证用户是否拥有访问系统的权限.举个简单的例子,我心里有个秘密只想和亲密的朋友分享,这时候有个陌生人想问我这个秘密,我会选择拒绝.这里区分亲密朋友和陌 ...
- Python 技术篇-百度语音API鉴权认证获取Access Token实例演示
百度语音官方鉴权认证文档 下面来为大家进行鉴权认证获取Access Token的演示: 首先需要创建自己的个人语音应用,在应用列表里进行创建. 百度语音个人应用列表 然后用这个应用里的 API Key ...
- 百度智能云 API鉴权总结
最近在研究百度云的一些服务,处理api接口鉴权时花了不少时间,总结一下,方便大家对接: Signer.php:签名工具类,鉴权签名的核心方法都在这里 Utils.php:封装的工具类,鉴权,返回jso ...
- 公共平台API鉴权安全验证
api使用签名+时间戳鉴权 请求api接口格式:/api/testserver?appid=xxx&sign=12AA12SD123SD1DSSA×tamp=15113329 ...
- 对外API接口的安全性设计及鉴权方式
对外API接口的安全性设计及鉴权方式 API鉴权方式 API Key + API Secret实现API鉴权 Cookie + Session实现API鉴权 token机制实现API鉴权 API接口的 ...
- api postmain 鉴权_API鉴权
API鉴权 为提高API访问安全性,OneNET API的鉴权参数Authorization作为Header参数存在. Authorization计算的核心密钥为accessKey,用户需要使用核心密 ...
- 腾讯云API接口鉴权v3 鉴权失败问题 AuthFailure.SignatureFailure
最近我开发的CRM项目正好在做营销短信的功能,这个功能需要对接腾讯云的第三方短信接口.众所周知,对接接口最难的就是鉴权部分了,毕竟为了安全嘛.云API鉴权一直是比较晦涩难懂的,建议大家还是去githu ...
最新文章
- centos 搭建 svn服务器
- db2查询表结构语句_SQL语句大全,赶快收藏吧!
- mysql_load
- FFMPEG设置 cbr讨论
- 啥是佩奇?爷爷,我用Python给你画一个
- toj 4609 Internal Rate of Return
- python绘制折线图保存_python如何画折线图
- 从零开始学编程——编程语言
- matlab模拟高斯光束波前相位分布,拉盖尔-高斯光束空间传播波前畸变的RMS评估...
- git cz 代替 git commit,让提交信息更加明确
- R非独立样本的 t 检验
- Java博客项目(重点)
- 仿美团下拉菜单 html,React Native仿美团下拉菜单的实例代码
- CityEngine制作玻璃材质反光效果
- Jenkins-API
- 数据分析总结四:可视化与数据分析
- 2021年中国亚马逊耳环市场趋势报告、技术动态创新及2027年市场预测
- 「集成架构」ETL工具大比拼:Talend vs Pentaho
- python restful接口返回类型出错_使用Python和Flask返回API错误消息
- 华为matebook电脑屏幕亮度动态变化的解决办法