6-OAuth2 & OpenID Connect &a

一、我们使用 Hybrid Flow

image.png
大致流程如图示。
客户端从IDP获取到access token 并验证成功后，在之后访问 API 的请求中，会将 access token 添加到 HTTP请求的 header 里，然后 API在收到请求对其进行校验

二、修改 IDP 项目添加 api 的 resource 和 scope

• Nuget 安装包 IdentityServer4.AccessTokenValidation
  

  image.png

• 修改 Config 类
  添加方法

        public static IEnumerable<ApiResource> GetApiResources()
        {
            return new List<ApiResource>
            {
                new ApiResource("junguoguoAPI","Jun's Image Gallery API")
            };
        }

同时 GetClients 方法中 imageclient 添加上 scope

image.png

• 修改 Startup 类，使用刚才添加的 resource

  
  image.png

• 修改 Client 项目的 Startup 类，获取 scope

  
  image.png

三、修改 API 项目

使用 SSL

1. 右键项目属性， Debug -> Enable SSL, 然后复制地址到 URL 中

   
   image.png
2. 修改 Client 端项目中对 api 调用处的地址为新的 https 地址

• ImageGalleryHttpClient 类的 GetClient 方法

        public async Task<HttpClient> GetClient()
        {      
              // 由 http://localhost:1601/ 改为 如下所示
            _httpClient.BaseAddress = new Uri("https://localhost:44363/");
            _httpClient.DefaultRequestHeaders.Accept.Clear();
            _httpClient.DefaultRequestHeaders.Accept.Add(
                new MediaTypeWithQualityHeaderValue("application/json"));

            return _httpClient;
        }        

• Index.cshtml
  image.png
  使用 IDP

3. Startup 类
   ConfigureServices添加代码

                services.AddAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme)
                .AddIdentityServerAuthentication(options =>
                {
                    options.Authority = "https://localhost:44319/";   // IDP server 的地址
                    options.ApiName = "junguoguoAPI";   // 上面添加的 api resource 的name
                });

Configure添加代码

            // 添加在 UseMVC 前，以便在请求到达 MVC 前做校验
            app.UseAuthentication();

4. ImagesController 类添加校验属性

   
   image.png

四、调试运行

登陆后会发现试图获取权限

image.png
确定后会报Unauthorized错：
image.png
修改 GalleryController 类的Index方法
image.png
再运行，会显示 AccessDenied 页面而不是报错

五、Client 传递 AccessToken 给 API

1. 修改 ImageGalleryHttpClient 类的 GetClient 方法
   添加如下代码，将 AccessToken 传递给 api

            var accessToken = string.Empty;
            // get the current HttpContext to access the tokens
            var currentContext = _httpContextAccessor.HttpContext;
            // get access token
            accessToken = await currentContext.GetTokenAsync(OpenIdConnectParameterNames.AccessToken);
            if (!string.IsNullOrWhiteSpace(accessToken))
            {
                // set as Bearer token
                _httpClient.SetBearerToken(accessToken);
            }

打断点，运行获取 accessToken 的值，到 JWT.IO 解析可得

image.png

再运行会正常加载页面

六、API 权限控制初版

1. 修改 IDP 的 Config 类 ApiResource方法 添加 role claim
   image.png
2. 修改 API

• ImagesController：
  GetImages方法根据用户角色和Id加载用户可查看的图片
  image.png
  CreateImage方法限制付费用户或管理员可访问
  image.png

七、github commit

Click Here