驾一叶之扁舟 举匏樽以相属
寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。
挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。

从壹开始 [ Ids4实战 ] 之七 ║ 客户端、服务端、授权中心全线打通

1、经过元旦两天的全力整改,终于在这新的一年,完成了我的布道生涯的第一个大步走 —— 那就是客户端(VUE)、服务端(ASP.NET Core API)、授权中心(IdentityServer4)的大融合,不仅有文档也有代码,更重要的是实战。

2、这一大步里边当然也有很多小步骤,知识点就不说了,过去的文章里都有。

3、具体的代码和效果呢,我会在下边给大家先简单的说明一下,今天的目的主要是第一篇,概述下,里边的小知识点或者注意事项,其实主要还是Ids4的内容,我还是会慢慢的在以后的文章或者视频中,给大家讲解的。

4、有人问了我的新年计划,主要是CI/CD这一块,配合Docker和DDD,实现第二个闭环,具体还没有想好,等我通知吧。

 

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

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、OIDC 四者的关系和内容;

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";     })

 

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

 

 

 

就这样,元旦一整天就过去了,项目也终于放上去了,当然还有很多要优化的,比如如何在Nginx部署IdentityServer的时候配置HTTPS协议,既然开始了,便只顾风雨兼程了。

 

 

四、遇到了问题

1、手机版兼容,登录不跳转

 本以为上边的已经完成了,电脑上,也各种测试没问题,就在下班的路上,在手机上试试吧,竟然无效?!无法跳转。真是尴尬

夜里开始研究官方的Demo代码,终于发了这一块,竟然需要处理Cookie策略,直接看代码吧:

 

   public static class SameSiteHandlingExtensions
    {
        public static IServiceCollection AddSameSiteCookiePolicy(this IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
                options.OnAppendCookie = cookieContext => 
                    CheckSameSite(cookieContext.Context, cookieContext.CookieOptions);
                options.OnDeleteCookie = cookieContext => 
                    CheckSameSite(cookieContext.Context, cookieContext.CookieOptions);
            });

            return services;
        }
        
        private static void CheckSameSite(HttpContext httpContext, CookieOptions options)
        {
            if (options.SameSite == SameSiteMode.None)
            {
                var userAgent = httpContext.Request.Headers["User-Agent"].ToString();
                if (DisallowsSameSiteNone(userAgent))
                {
                    // For .NET Core < 3.1 set SameSite = (SameSiteMode)(-1)
                    options.SameSite = SameSiteMode.Unspecified;
                }
            }
        }

        private static bool DisallowsSameSiteNone(string userAgent)
        {
            // Cover all iOS based browsers here. This includes:
            // - Safari on iOS 12 for iPhone, iPod Touch, iPad
            // - WkWebview on iOS 12 for iPhone, iPod Touch, iPad
            // - Chrome on iOS 12 for iPhone, iPod Touch, iPad
            // All of which are broken by SameSite=None, because they use the iOS networking stack
            if (userAgent.Contains("CPU iPhone OS 12") || userAgent.Contains("iPad; CPU OS 12"))
            {
                return true;
            }

            // Cover Mac OS X based browsers that use the Mac OS networking stack. This includes:
            // - Safari on Mac OS X.
            // This does not include:
            // - Chrome on Mac OS X
            // Because they do not use the Mac OS networking stack.
            if (userAgent.Contains("Macintosh; Intel Mac OS X 10_14") && 
                userAgent.Contains("Version/") && userAgent.Contains("Safari"))
            {
                return true;
            }

            // Cover Chrome 50-69, because some versions are broken by SameSite=None, 
            // and none in this range require it.
            // Note: this covers some pre-Chromium Edge versions, 
            // but pre-Chromium Edge does not require SameSite=None.
            if (userAgent.Contains("Chrome/5") || userAgent.Contains("Chrome/6"))
            {
                return true;
            }

            return false;
        }
    }

 

 

 

然后把这个服务注册:

 

 

 

 

最后中间件配置下Cookie策略:

 

 

 

有一个小伙伴说,只配置Cookie中间件即可,你也可以试试再。

 

2、无效Token,访问无权限接口,异常

 

 

谷歌到了官方的 Issue,大家讨论了很多,随便找了一个:https://github.com/IdentityServer/IdentityServer4/issues/1627

简单来说,主要是因为传递了一个无效的Token来访问我们的资源服务器,导致中间件管道内异常,但是不影响正常使用,配置下,对token做下校验即可,比如这样的:

 

 

具体的可以查看我的代码。

 

五、配置HTTPS

 在我的微信公众号文章里:

https://mp.weixin.qq.com/s/GQXah1rq6qEMqcgAfWNkIw

 

 

六、下一步 2020

 

今年开始,一切都是新的,第一个闭环已经完成了,当然还有很多需要优化,比如单点登录,DDD和Blog项目也迁移到Ids4上来,那下一个就开始了 —— CI/CD DevOps 我来了。

 

https://github.com/anjoy8/Blog.IdentityServer(授权)

https://github.com/anjoy8/Blog.Admin(客户端)

https://github.com/anjoy8/Blog.Core(资源服务器)

posted @ 2020-01-02 13:30  老张的哲学  阅读(...)  评论(...编辑  收藏
作者:老张的哲学
好好学习,天天向上
返回顶部小火箭
好友榜:
如果愿意,把你的博客地址放这里
jianshu.com/u/老张
SqlSugar codeisbug.com
钰玺 studenty.cn