开源课程 视频网站模板,手机网站弹出菜单,怎么查自己的二建信息,WordPress数据库禁用插件#xff08;又一个客户端集成了IdentityServer4#xff09;还是很开心的#xff0c;目前已经有六个开源项目都集成到了Ids4认证中心了。1、Blazor系列文章回顾书接上文#xff0c;关于Blazor学习呢#xff0c;我也发了几篇文章了#xff0c;我一般写东西都喜欢偏实战又一个客户端集成了IdentityServer4还是很开心的目前已经有六个开源项目都集成到了Ids4认证中心了。1、Blazor系列文章回顾书接上文关于Blazor学习呢我也发了几篇文章了我一般写东西都喜欢偏实战当然也有系列教程的情节还记得当时在群里我说简单看看浅尝辄止吧没想到慢慢的发现了解的就越来越深入了这里我我们再来一个前情回顾《我的『MVP.Blazor』快速创建与部署》在这篇文章中我们简单的了解了下什么的Blazor他能做些什么以及如何快速的入门和部署属于一个认知的阶段熟话说万事开头难只要有兴趣了剩下的就是勤为径《最终选型 Blazor.Server又快又稳》从这篇文章开始慢慢的开始实战了因为刚开始选型的是blazor.wasm后来发现速度上比较慢特别是刷新上所以就最终选型了Blazor.Server了速度当然没得说和我们平时的ASP.NETCore是一样的不过很多人说对硬件要求高我感觉没什么感觉2C4G的Linux服务器几千人在线应该没问题。然后就正式开始了设计我的MVP项目《[号外] Blazor wasm 其实也挺快》选型了server版本以后总感觉wasm版本不可能那么慢然后就好好的深入研究了下通过了PWA、GZIP压缩、CDN等技术基本能保证WASM框架首屏首次刷新在3~5s之内之后静态加载毫秒级别动态刷新是2s以内可以查看我文章有具体的数据佐证《[Mvp.Blazor] 动态路由与钩子函数》之前三篇文章我们学会了组件通信、数据请求、数据绑定和继承等知识点那这篇文章我简单的对路由和钩子函数做了说明和讲解已经算是比较完善的项目了《如何给Blazor.Server加个API鉴权》我经常在群里说的一句话就是没有日志的项目是没有灵魂的没有权限的项目是裸奔的。就是这样的所以我基本任何项目都会有权限包括我们功能内部的一些小Portal我都会在重要页面或数据上增加一定的权限。这篇文章我用了很简单可以说很low的方法对资源api实现了鉴权当然我在文章中也说了这种方案肯定不靠谱。所以在这个端午节三天期间内趁着没地方去我又各种的翻看资料这里说下国外的资料还是比较丰富的有条件的话还是要科学上网更好些。最终呢不负众望实现了将Blazor.Server集成到了Ids4的统一认证平台上如果你用的是Blazor.wasm基本差不多甚至更简单等你有实战项目了就知道了。这里先说明一下因为毕竟是集成Ids4涉及的知识会比较多比如如何使用oidc-client、如何c#调用js事件、如何封装service模块不过本文就不过多的对这几个知识点讲解原理了先列出来操作步骤和代码毕竟篇幅有限之后我会针对我认为比较重要的知识点稍微讲解讲解。2、Ids4模块配置如果你之前开发过Ids4呢接下来已经能看懂如果完全不会建议还是先把Ids4学一遍吧除非就完全copy我的代码尽管会遇到这样那样的Bug。涉及到的页面和模块蓝色背景的三个文件1、先在认证中心配置Client我们既然要集成认证平台那肯定要去认证中心配置一个客户端因为我们的Blazor是一个前端的框架所以我们使用implicit简化模式和Blog.Admin很相似只不过一个组件安装一个是直接使用js静态文件原理都一样。Blazor客户端的基本配置详细应该能看的懂注意一点就是需要配置AllowAccessTokensViaBrowser true
这样才能有资格接收认证平台返回过来的access_token。2、客户端配置config.js首先需要下载或者从admin项目中拷贝出来oidc-client.js文件然后就是设计配置文件我取名为app.js主要还是连接ids4的相关内容 var url window.location.origin;var settings {authority: https://ids.neters.club,client_id: blazorjs,redirect_uri: url /callback,post_logout_redirect_uri: url,response_type: id_token token,scope: openid profile roles blog.core.api,popup_redirect_uri: url /callback,popup_post_logout_redirect_uri: url,silent_redirect_uri: url /silent,automaticSilentRenew: false,filterProtocolClaims: true,loadUserInfo: true,revokeAccessTokenOnSignout: true};var mgr new Oidc.UserManager(settings);///// events///mgr.events.addAccessTokenExpiring(function () {console.log(token expiring);// maybe do this code manually if automaticSilentRenew doesnt work for youmgr.signinSilent().then(function (user) {console.log(silent renew success, user);}).catch(function (e) {console.error(silent renew error, e.message);})});mgr.events.addAccessTokenExpired(function () {console.log(token expired);});mgr.events.addSilentRenewError(function (e) {console.log(silent renew error, e.message);});mgr.events.addUserLoaded(function (user) {console.log(user loaded, user);mgr.getUser().then(function () {console.log(getUser loaded user after userLoaded event fired);});});mgr.events.addUserUnloaded(function (e) {console.log(user unloaded);});这里先看看热闹即可具体的代码我建议还是直接从我的项目中获取具体内容不做赘述3、blazor项目引用我们都知道Blazor.Server更像是一个netcore项目那如何引用js文件呢很简单之前的文章中我也讲过有一个统一的主页面用来承载整个app那就是_Host.cshtml我们就这几在这里引用即可如果你是用WASM的话直接有一个index.html和这个是同一个道理在Blazor.Server中引用js文件那现在我们都配置好了客户端和连接也引用到了Blazor项目里那如何去调用具体的js方法呢请往下继续看。3、C#调用js方法模块是不是如果你看到这个逻辑都很怪异我们都知道c#和js完全就不是一个逻辑那是如何相互调用的呢不仅c#可以使用js方法我们也同样能在js里去调用c#代码当然这是在Blazor框架里你用mvc还是比较复杂的平时我们也是习惯用signalR来实现的双工通信。这一模块对应的代码蓝色背景部分那我以登录为例子讲解如何C#调用js吧1、注入JS运行时我们如果想调用js肯定需要一个运行时环境这里已经给我们提供给了一个封装好的接口直接注入即可inject IJSRuntime JS
然后在code代码块中我们使用JS可以看到有两个异步方法2、封装扩展方法这个就是用来帮助我们去Invoke脚本方法的原理不解释直接封装扩展 /// summary/// JSRuntime扩展类/// 用来调取app.js文件/// /summarypublic static class JSRuntimeExtensions{public async static Task SignInAsync(this IJSRuntime jsRuntime){await jsRuntime.InvokeAsyncobject(users.startSigninMainWindow);}}括号中的参数呢是调用的js方法名称user.xxxx注意这个格式下文会将如何写这个js方法而且也可以传递参数像这样public async static Task SetUserInfoToStorage(this IJSRuntime jsRuntime, UserInfoModel userInfoModel)
{await jsRuntime.InvokeAsyncUserInfoModel(users.setUserInfoToStorage, userInfoModel);
}当然也可以用返回值不过这里有一个小坑js时间转成c#时间的时候会少八个小时自己注意一下就行 public async static TaskUserInfoModel GetUserInfoFromStorage(this IJSRuntime jsRuntime){return await jsRuntime.InvokeAsyncUserInfoModel(users.getUserInfoFromStorage);}
具体的还是看我的源码吧否则文章会比较长。3、然后C#调用扩展其实也不一定需要封装扩展直接用原生的invoke也是一样的不过现在我通过开源了Blog.Core项目以后越来越多封装情有独钟了。code {protected override async Task OnAfterRenderAsync(bool firstRender){await JS.SignInAsync();}
}
是不是很简单这样就直接可以在c#中调用js脚本方法了但是这个js方法任意写function就行了么并不是。4、最后封装js方法还是用上边的例子users.startSigninMainWindow 这个方法对应的js是这样的 window.users {startSigninMainWindow: function () {// ...},}里边的内容很简单就是调用上一节的oidc-client的方法主要是外边的结构自己把握一下就明白了对应在浏览器中是这样的相当于给window窗体增加一个属性这个我用着还挺好上手的如果很多小伙伴不懂的话以后在单独写文章吧。到了这里我们已经配置了ids4模块、c#调用模块那就剩下最后一个模块调用资源服务器的service服务模块了。4、调用service模块不知道大家还记得不记得在之前的简单的鉴权中我是通过一个input输入框手动输入token的方案还是很low的那现在我们就不需要手动配置了用了ids4后一切都是自动的所以还需要继续做封装。这一部分涉及的代码1、获取访问状态——token在上一节中我们说到了用c#来调用js在用户登录成功后获取用户信息然后保存到了localstorage里现在我们如果要发送http请求就肯定每次获取access_token然后添加到htpp报头里。 public async Taskstring GetAccessToken(){var userInfo await _jS.GetUserInfoFromStorage();if (!IsLogin(userInfo)){await _jS.SignInAsync();}return userInfo.AccessToken;}public bool IsLogin(UserInfoModel UserInfo) UserInfo ! null UserInfo.AccessToken.IsNotEmptyOrNull() !UserInfo.IsExpired();我们这里做了封装等token失效的时候会重新去ids4认证中心拉取新的令牌。2、封装Http操作上边我们已经获取到了token接下来就需要发送了使用的是HttpClient那每次都设置肯定比较麻烦感觉再来个封装 public abstract class BaseService{protected BaseService(IServiceProvider serviceProvider){ServiceProvider serviceProvider;}protected IServiceProvider ServiceProvider { get; }protected HttpClient HttpClient ServiceProvider.GetServiceHttpClient();protected IJSRuntime JS ServiceProvider.GetServiceIJSRuntime();protected AccessState AccessState ServiceProvider.GetServiceAccessState();protected async TaskHttpClient SecurityHttpClientAsync(){var httpClient ServiceProvider.GetServiceHttpClient();httpClient.DefaultRequestHeaders.Remove(Authorization);var token await AccessState.GetAccessToken();httpClient.DefaultRequestHeaders.Add(Authorization, $Bearer {token});httpClient.BaseAddress new Uri(http://apk.neters.club);return httpClient;}}这是一个抽象基类然后每个服务继承了就行了。PS这里的资源服务用的Blog.Core的接口你可以用自己的各种服务无论是webservicerestful还是grpc。3、定义Blog具体服务有了服务基类以后我们在定义每一个基础服务的时候就简单了不少只关注业务逻辑即可不用关心令牌权限了 /// summary/// 服务基类/// 主要用来对Http请求的基础封装/// /summarypublic class BlogService : BaseService{/// summary/// 构造函数/// /summary/// param nameserviceProvider/parampublic BlogService(IServiceProvider serviceProvider) : base(serviceProvider){}/// summary/// 获取全部博文/// /summary/// param nametypes/param/// param namepage/param/// returns/returnspublic async TaskMessageModelListBlogArticle GetBlogs(string types, int page 1){var httpClient await SecurityHttpClientAsync();return await httpClient.GetFromJsonAsyncMessageModelListBlogArticle($/api/Blog/GetBlogsByTypesForMVP?types{types}page{page});}}
是不是就是很普通的调用接口了4、前端调用前端就很简单了注入我们的blogservice然后发送请求即可inject BlogService BlogServiceusing Blog.MVP.Blazor.SSR.Pages.Post.componenth1编辑/h1Editor BlogArticleBlogArticle OnSaveCallbackOnSaveAsync/Editordiv classtext-danger_errmsg
/divcode {[Parameter]public int Id { get; set; }private BlogArticle BlogArticle { get; set; }private string _errmsg ;protected override async Task OnInitializedAsync(){BlogArticle (await BlogService.GetBlogByIdForMVP(Id)).response;}private async Task OnSaveAsync(BlogArticle blogArticle){BlogArticle blogArticle;var result await BlogService.UpdateBlog(BlogArticle);if (result.IsSuccessStatusCode){NavManager.NavigateTo(/blog/list);}else{_errmsg 保存失败! 错误原因 result.ReasonPhrase 。请重试或登录;}}
}
最后别忘了startup注册服务 // services and stateservices.AddScopedBlogService();services.AddScopedAccessState();5、总结经过上边几步的操作我们已经可以发送请求了来先看看效果这里有一个小瑕疵登录后右上角个人信息需要刷新以后再优化已经实现了单点登录、注销授权验证等等功能如果没有权限就提示无权限重要说明虽然我们已经写完了也很流畅但是这里有一个问题如果想要在页面进入的时候初始化就调用js事件。比如如果你想在进入一个页面的时候就需要权限需要去登录就比如我的blog/list页面我在获取service的时候会先判断access_token如果不存在就去登录那这个时候肯定需要调用js事件。你可能会这么写 protected override async Task OnInitializedAsync(){BlogArticle (await BlogService.GetBlogByIdForMVP(Id)).response;}
但是只要去调用或者去刷新可能会遇到这个一个问题它的意思是我们不能在初始化的时候对页面进行js操作必须要页面渲染完成才可以那这个时候就要考虑那三个阶段六个钩子了官方已经提醒我们使用OnAfterRenderAsync了但是又有一个问题是如果你这么写页面的data就无法渲染已经我们这是在页面加载完成了才会获取的service。经过我搜索stack overflow发现已经有人趟过了https://stackoverflow.com/questions/61438796/javascript-interop-error-when-calling-javascript-from-oninitializedasync-blazor可见生命周期还是要好好学学的。好啦假期也结束了该收收心了记得我的DDD领域驱动设计概论视频也发布了记得去看看有问题尽量视频下边留言群里讨论太乱了。拜拜。
