【实战 Ids4】║ 客户端、服务端、授权中心全线打通！

老张的哲学

发布于 2022-04-11 11:34:09

1.3K0

发布于 2022-04-11 11:34:09

1、经过元旦两天的全力整改，终于在这新的一年，完成了我的布道生涯的第一个大步走 —— 那就是客户端（VUE）、服务端（ASP.NET Core API）、授权中心（IdentityServer4）的大融合，不仅有文档也有代码，更重要的是实战。
2、这一大步里边当然也有很多小步骤，知识点就不说了，过去的文章里都有。
3、具体的代码和效果呢，我会在下边给大家先简单的说明一下，今天的目的主要是第一篇，概述下，里边的小知识点或者注意事项，其实主要还是Ids4的内容，我还是会慢慢的在以后的文章或者视频中，给大家讲解的。

因为微信公众号不能多次修改文章内容，所以我如果有更新内容，会重点在博客园也发布几篇文章，公众号只是作为一个消息的发布，点击阅读原文，查看博客园文章。

那下边我就简单的说说效果吧，大家也可以自行体验一下：

http://vueadmin.neters.club

(支持滑动更新等基本操作，后期增加单点登录)

Blog.Admin 客户端

Admin项目，是基于Vue+Ele开发的一套后端权限框架，是我自主研发的，里边主要是用到了动态数据库授权认证，使用JWT的复杂策略授权技术，精确到按钮基本，目前部门数据权限还在设计当中，以后也会附加上，这是内部授权这一块，但是认证想做一个统一认证中心，所以就想到了IdentityServer4了。

Vue项目和其他的SPA项目是一样的，连接IdentityServer4认证中心，主要是通过oidc-client这个插件来处理的，

npm install oidc-client --save

用法其实很简单，我简单说下思路，具体的看我的代码，或者看官网都可以：

 class ApplicationUserManager extends UserManager {
  constructor () {
    super({
      authority: 'http://ids.neters.club',
      client_id: 'blogadminjs',
      redirect_uri: 'http://vueadmin.neters.club/callback',
      response_type: 'id_token token',
      scope: 'openid profile roles blog.core.api',
      post_logout_redirect_uri: 'http://vueadmin.neters.club'
    })
  }

这个是核心方法，目的是通过配置，实现用户管理，比如登录，跳转，回调，获取用户信息，令牌token，刷新等等，当然以后可能会配合单点登录做处理。

  methods: {
    async refreshUserInfo() {
      const user = await applicationUserManager.getUser();
      if (user) {
        this.user.name = user.profile.name;
        this.user.isAuthenticated = true;
      } else {
        this.user.name = "";
        this.user.isAuthenticated = false;
      }
    }
  }

这个是使用上边的UserManager来处理远程获取到的用户数据。

具体的代码我已经放到了Blog.Admin项目的ids4分支下了：

Blog.Core 资源服务端

这个项目想必都知道了，不多说什么，其实你的任意一个后端服务项目都可以，只要做个表结构，然后配置Identityserver4的认证即可。


//2.2【认证】、IdentityServer4 认证 (暂时忽略)
services.AddAuthentication("Bearer")
  .AddIdentityServerAuthentication(options =>
  {
      options.Authority = "http://ids.neters.club";
      options.RequireHttpsMetadata = false;
      options.ApiName = "blog.core.api";
  });

这个就是一个核心的代码，将我们BlogCore的资源服务器认证方式，从JWT改成Ids4认证。

修改完认证方式以后，下边就是简单的对其中几个小知识点进行微调了，比如某些Claim声明字段，我用的和Ids4不太一样，所以就简单微调一下，主要的修改内容，我也新建了一个分支，可以自行查看下，修改的地方不多。

Blog.Idp 认证授权中心

这个才是整个项目的重头戏，项目的重中之重，不过配置起来也不难，具体的操作和使用，我也在录视频和写文章，其实只要了解这几个知识点，就基本学会了Ids4了：

1、如何引用指定的nuget包； 2、JWT、OpenID、OAuth2、OCID 四者的关系和内容； 3、常见的四种授权方式：简化、混合、密码、客户端等要明白场景，会用； 4、学会联调；

具体的就不多说了，不是今天的讲解内容。今天主要点一下部署的时候的几个知识点，其他的看我的代码即可，这次是master分支。

// 使用证书，可以直接使用开发证书
builder.AddDeveloperSigningCredential();

// 或者自己配置
.AddDeveloperSigningCredential(true, ConstanceHelper.AppSettings.CredentialFileName)
.AddSigningCredential(new X509Certificate2(Path.Combine(Environment.WebRootPath,
        Configuration["Certificates:Path"]),
        Configuration["Certificates:Password"]))

证书这个很重要，当然既然是安全，就要好好处理，可以配合的证书，继续搞搞HTTPS安全协议，未来还是很多要处理的。

 new Client {
     ClientId = "blogadminjs",
     ClientName = "Blog.Admin JavaScript Client",
     AllowedGrantTypes = GrantTypes.Implicit,
     AllowAccessTokensViaBrowser = true,

     RedirectUris =           { "http://vueadmin.neters.club/callback" },
     PostLogoutRedirectUris = { "http://vueadmin.neters.club" },
     AllowedCorsOrigins =     { "http://vueadmin.neters.club" },

     AllowedScopes = {
         IdentityServerConstants.StandardScopes.OpenId,
         IdentityServerConstants.StandardScopes.Profile,
         "roles",
         "blog.core.api"
     }
 }

这是另一个重点，必须要配置客户端，不仅是数据生成到数据库，更是在授权的时候，起到安全的作用。

最后一个小问题，确定是我自己的问题，就是部署的时候，我本来用的Nginx进行代理，但是配置文件里，却依然是localhost：

这样就导致了一个问题，虽然我的认证中心项目可以正常的跑，我是说服务器生产环境，但是用客户端去登录的时候，会自动跑到locaohost里，毕竟配置文件是这样的。

网上找了很多资料，都是本地教程，部署的都很少，我也是很方，最后我找到了官方的一个在线demo项目，它是正常的，我仔细研究了下代码，代码和我的没啥区别，最后灵机一动，我看了看他们的服务器，是IIS！我赶紧实验了一番，还真的是正常了：

但是这个不科学呀，这个我要承认下，肯定是我学艺不精，Nginx肯定是可行的，但是我没有找到为何去配置，这个时候应该查看官网的，当我继续在寻找的时候，但是正好有一个小伙伴的小伙伴告诉了我，贼简单，这个故事告诉我们，学习知识要从细节着手，不能知其然而不知其所以然。

 var builder = services.AddIdentityServer(options =>
     {
         options.Events.RaiseErrorEvents = true;
         options.Events.RaiseInformationEvents = true;
         options.Events.RaiseFailureEvents = true;
         options.Events.RaiseSuccessEvents = true;
         options.IssuerUri = "http://ids.neters.club";// 就是这里
         options.PublicOrigin = "http://ids.neters.club";
     })

结果还是正确的，看来还是要多读文档，当然如果实在是绕不过来，也可以先求助。