[Mvp.Blazor] 集成Ids4，实现统一授权认证

（又一个客户端集成了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 doesn't work for you
     mgr.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脚本方法的，原理不解释，直接封装扩展：

 /// 

 /// JSRuntime扩展类
 /// 用来调取app.js文件
 /// 
 public static class JSRuntimeExtensions
 {
     public async static Task SignInAsync(this IJSRuntime jsRuntime)
     {
         await jsRuntime.InvokeAsync