基於 abp vNext 和 .NET Core 開發部落格專案 - 接入GitHub,用JWT保護你的API

阿星Plus發表於2020-05-23

上一篇文章(https://www.cnblogs.com/meowv/p/12924859.html)再次把Swagger的使用進行了講解,完成了對Swagger的分組、描述和開啟小綠鎖以進行身份的認證授權,那麼本篇就來說說身份認證授權。

開始之前先搞清楚幾個概念,請注意認證與授權是不同的意思,簡單理解:認證,是證明你的身份,你有賬號密碼,你可以登入進我們的系統,說明你認證成功了;授權,即許可權,分配給使用者某一許可權標識,使用者得到什麼什麼許可權,才能使用系統的某一功能,就是授權。

身份認證可以有很多種方式,可以建立一個使用者表,使用賬號密碼,也可以接入第三方平臺,在這裡我接入GitHub進行身份認證。當然你可以選擇其他方式(如:QQ、微信、微博等),可以自己擴充套件。

開啟GitHub,進入開發者設定介面(https://github.com/settings/developers),我們新建一個 oAuth App。

0

1

如圖所示,我們將要用到敏感資料放在appsettings.json

{
  ...
  "Github": {
    "UserId": 13010050,
    "ClientID": "5956811a5d04337ec2ca",
    "ClientSecret": "8fc1062c39728a8c2a47ba445dd45165063edd92",
    "RedirectUri": "https://localhost:44388/account/auth",
    "ApplicationName": "阿星Plus"
  }
}

ClientIDClientSecret是GitHub為我們生成的,請注意保管好你的ClientIDClientSecret。我這裡直接給出了明文,我將在本篇結束後刪掉此 oAuth App ?。請自己建立噢!

RedirectUri是我們自己新增的回撥地址。ApplicationName是我們應用的名稱,全部都要和GitHub對應。

相應的在AppSettings.cs中讀取

...
        /// <summary>
        /// GitHub
        /// </summary>
        public static class GitHub
        {
            public static int UserId => Convert.ToInt32(_config["Github:UserId"]);

            public static string Client_ID => _config["Github:ClientID"];

            public static string Client_Secret => _config["Github:ClientSecret"];

            public static string Redirect_Uri => _config["Github:RedirectUri"];

            public static string ApplicationName => _config["Github:ApplicationName"];
        }
...

接下來,我們大家自行去GitHub的OAuth官方文件看看,https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/

分析一下,我們接入GitHub身份認證授權整個流程下來分以下幾步

  1. 根據引數生成GitHub重定向的地址,跳轉到GitHub登入頁,進行登入
  2. 登入成功之後會跳轉到我們的回撥地址,回撥地址會攜帶code引數
  3. 拿到code引數,就可以換取到access_token
  4. 有了access_token,可以呼叫GitHub獲取使用者資訊的介面,得到當前登入成功的使用者資訊

開始之前,先將GitHub的API簡單處理一下。

.Domain層中Configurations資料夾下新建GitHubConfig.cs配置類,將所需要的API以及appsettings.json的內容讀取出來。

//GitHubConfig.cs
namespace Meowv.Blog.Domain.Configurations
{
    public class GitHubConfig
    {
        /// <summary>
        /// GET請求,跳轉GitHub登入介面,獲取使用者授權,得到code
        /// </summary>
        public static string API_Authorize = "https://github.com/login/oauth/authorize";

        /// <summary>
        /// POST請求,根據code得到access_token
        /// </summary>
        public static string API_AccessToken = "https://github.com/login/oauth/access_token";

        /// <summary>
        /// GET請求,根據access_token得到使用者資訊
        /// </summary>
        public static string API_User = "https://api.github.com/user";

        /// <summary>
        /// Github UserId
        /// </summary>
        public static int UserId = AppSettings.GitHub.UserId;

        /// <summary>
        /// Client ID
        /// </summary>
        public static string Client_ID = AppSettings.GitHub.Client_ID;

        /// <summary>
        /// Client Secret
        /// </summary>
        public static string Client_Secret = AppSettings.GitHub.Client_Secret;

        /// <summary>
        /// Authorization callback URL
        /// </summary>
        public static string Redirect_Uri = AppSettings.GitHub.Redirect_Uri;

        /// <summary>
        /// Application name
        /// </summary>
        public static string ApplicationName = AppSettings.GitHub.ApplicationName;
    }
}

細心的同學可能以及看到了,我們在配置的時候多了一個UserId。在這裡使用一個策略,因為我是部落格系統,管理員使用者就只有我一個人,GitHub的使用者Id是唯一的,我將自己的UserId配置進去,當我們通過api獲取到UserId和自己配置的UserId一致時,就為其授權,你就是我,我認可你,你可以進入後臺隨意玩耍了。

在開始寫介面之前,還有一些工作要做,就是在 .net core 中開啟使用我們的身份認證和授權,因為.HttpApi.Hosting層引用了專案.Application.Application層本身也需要新增Microsoft.AspNetCore.Authentication.JwtBearer,所以在.Application新增包:Microsoft.AspNetCore.Authentication.JwtBearer,開啟程式包管理器控制檯用命令Install-Package Microsoft.AspNetCore.Authentication.JwtBearer安裝,這樣就不需要重複新增引用了。

.HttpApi.Hosting模組類MeowvBlogHttpApiHostingModuleConfigureServices中新增

public override void ConfigureServices(ServiceConfigurationContext context)
{
    // 身份驗證
    context.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
           .AddJwtBearer(options =>
           {
               options.TokenValidationParameters = new TokenValidationParameters
               {
                   ValidateIssuer = true,
                   ValidateAudience = true,
                   ValidateLifetime = true,
                   ClockSkew = TimeSpan.FromSeconds(30),
                   ValidateIssuerSigningKey = true,
                   ValidAudience = AppSettings.JWT.Domain,
                   ValidIssuer = AppSettings.JWT.Domain,
                   IssuerSigningKey = new SymmetricSecurityKey(AppSettings.JWT.SecurityKey.GetBytes())
               };
           });

    // 認證授權
    context.Services.AddAuthorization();

    // Http請求
    context.Services.AddHttpClient();
}

因為待會我們要在程式碼中呼叫GitHub的api,所以這裡提前將System.Net.Http.IHttpClientFactory和相關服務新增到IServiceCollection中。

解釋一下TokenValidationParameters引數的含義:

ValidateIssuer:是否驗證頒發者。ValidateAudience:是否驗證訪問群體。ValidateLifetime:是否驗證生存期。ClockSkew:驗證Token的時間偏移量。ValidateIssuerSigningKey:是否驗證安全金鑰。ValidAudience:訪問群體。ValidIssuer:頒發者。IssuerSigningKey:安全金鑰。
GetBytes()是abp的一個擴充套件方法,可以直接使用。

設定值全部為true,時間偏移量為30秒,然後將ValidAudienceValidIssuerIssuerSigningKey的值配置在appsettings.json中,這些值都是可以自定義的,不一定按照我填的來。

//appsettings.json
{
  ...
  "JWT": {
    "Domain": "https://localhost:44388",
    "SecurityKey": "H4sIAAAAAAAAA3N0cnZxdXP38PTy9vH18w8I9AkOCQ0Lj4iMAgDB4fXPGgAAAA==",
    "Expires": 30
  }
}

//AppSettings.cs
...
        public static class JWT
        {
            public static string Domain => _config["JWT:Domain"];

            public static string SecurityKey => _config["JWT:SecurityKey"];

            public static int Expires => Convert.ToInt32(_config["JWT:Expires"]);
        }
...

Expires是我們的token過期時間,這裡也給個30。至於它是30分鐘還是30秒,由你自己決定。

SecurityKey是我隨便用編碼工具進行生成的。

同時在OnApplicationInitialization(ApplicationInitializationContext context)中使用它。

...
        public override void OnApplicationInitialization(ApplicationInitializationContext context)
        {
            ...
            // 身份驗證
            app.UseAuthentication();

            // 認證授權
            app.UseAuthorization();
            ...
        }
...

此時配置就完成了,接下來去寫介面生成Token並在Swagger中運用起來。

.Application層之前已經新增了包:Microsoft.AspNetCore.Authentication.JwtBearer,直接新建Authorize資料夾,新增介面IAuthorizeService以及實現類AuthorizeService

//IAuthorizeService.cs
using Meowv.Blog.ToolKits.Base;
using System.Threading.Tasks;

namespace Meowv.Blog.Application.Authorize
{
    public interface IAuthorizeService
    {
        /// <summary>
        /// 獲取登入地址(GitHub)
        /// </summary>
        /// <returns></returns>
        Task<ServiceResult<string>> GetLoginAddressAsync();

        /// <summary>
        /// 獲取AccessToken
        /// </summary>
        /// <param name="code"></param>
        /// <returns></returns>
        Task<ServiceResult<string>> GetAccessTokenAsync(string code);

        /// <summary>
        /// 登入成功,生成Token
        /// </summary>
        /// <param name="access_token"></param>
        /// <returns></returns>
        Task<ServiceResult<string>> GenerateTokenAsync(string access_token);
    }
}

新增三個介面成員方法,全部為非同步的方式,同時注意我們是用之前編寫的返回模型接收噢,然後一一去實現他們。

先實現GetLoginAddressAsync(),我們們構建一個AuthorizeRequest物件,用來填充生成GitHub登入地址,在.ToolKits層新建GitHub資料夾,引用.Domain專案,新增類:AuthorizeRequest.cs

//AuthorizeRequest.cs
using Meowv.Blog.Domain.Configurations;
using System;

namespace Meowv.Blog.ToolKits.GitHub
{
    public class AuthorizeRequest
    {
        /// <summary>
        /// Client ID
        /// </summary>
        public string Client_ID = GitHubConfig.Client_ID;

        /// <summary>
        /// Authorization callback URL
        /// </summary>
        public string Redirect_Uri = GitHubConfig.Redirect_Uri;

        /// <summary>
        /// State
        /// </summary>
        public string State { get; set; } = Guid.NewGuid().ToString("N");

        /// <summary>
        /// 該引數可選,需要呼叫Github哪些資訊,可以填寫多個,以逗號分割,比如:scope=user,public_repo。
        /// 如果不填寫,那麼你的應用程式將只能讀取Github公開的資訊,比如公開的使用者資訊,公開的庫(repository)資訊以及gists資訊
        /// </summary>
        public string Scope { get; set; } = "user,public_repo";
    }
}

實現方法如下,拼接引數,輸出GitHub重定向的地址。

...
        /// <summary>
        /// 獲取登入地址(GitHub)
        /// </summary>
        /// <returns></returns>
        public async Task<ServiceResult<string>> GetLoginAddressAsync()
        {
            var result = new ServiceResult<string>();

            var request = new AuthorizeRequest();
            var address = string.Concat(new string[]
            {
                    GitHubConfig.API_Authorize,
                    "?client_id=", request.Client_ID,
                    "&scope=", request.Scope,
                    "&state=", request.State,
                    "&redirect_uri=", request.Redirect_Uri
            });

            result.IsSuccess(address);
            return await Task.FromResult(result);
        }
...

同樣的,實現GetAccessTokenAsync(string code),構建AccessTokenRequest物件,在.ToolKitsGitHub資料夾新增類:AccessTokenRequest.cs

//AccessTokenRequest.cs
using Meowv.Blog.Domain.Configurations;

namespace Meowv.Blog.ToolKits.GitHub
{
    public class AccessTokenRequest
    {
        /// <summary>
        /// Client ID
        /// </summary>
        public string Client_ID = GitHubConfig.Client_ID;

        /// <summary>
        /// Client Secret
        /// </summary>
        public string Client_Secret = GitHubConfig.Client_Secret;

        /// <summary>
        /// 呼叫API_Authorize獲取到的Code值
        /// </summary>
        public string Code { get; set; }

        /// <summary>
        /// Authorization callback URL
        /// </summary>
        public string Redirect_Uri = GitHubConfig.Redirect_Uri;

        /// <summary>
        /// State
        /// </summary>
        public string State { get; set; }
    }
}

根據登入成功得到的code來獲取AccessToken,因為涉及到HTTP請求,在這之前我們需要在建構函式中依賴注入IHttpClientFactory,使用IHttpClientFactory建立HttpClient

...
private readonly IHttpClientFactory _httpClient;

public AuthorizeService(IHttpClientFactory httpClient)
{
    _httpClient = httpClient;
}
...
...
        /// <summary>
        /// 獲取AccessToken
        /// </summary>
        /// <param name="code"></param>
        /// <returns></returns>
        public async Task<ServiceResult<string>> GetAccessTokenAsync(string code)
        {
            var result = new ServiceResult<string>();

            if (string.IsNullOrEmpty(code))
            {
                result.IsFailed("code為空");
                return result;
            }

            var request = new AccessTokenRequest();

            var content = new StringContent($"code={code}&client_id={request.Client_ID}&redirect_uri={request.Redirect_Uri}&client_secret={request.Client_Secret}");
            content.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");

            using var client = _httpClient.CreateClient();
            var httpResponse = await client.PostAsync(GitHubConfig.API_AccessToken, content);

            var response = await httpResponse.Content.ReadAsStringAsync();

            if (response.StartsWith("access_token"))
                result.IsSuccess(response.Split("=")[1].Split("&").First());
            else
                result.IsFailed("code不正確");

            return result;
        }
...

使用IHttpClientFactory建立HttpClient可以自動釋放物件,用HttpClient傳送一個POST請求,如果GitHub伺服器給我們返回了帶access_token的字串便表示成功了,將其處理一下輸出access_token。如果沒有,就代表引數code有誤。

.HttpApi層新建一個AuthController控制器,注入我們的IAuthorizeServiceService,試試我們的介面。

//AuthController.cs
using Meowv.Blog.Application.Authorize;
using Meowv.Blog.ToolKits.Base;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Mvc;
using static Meowv.Blog.Domain.Shared.MeowvBlogConsts;

namespace Meowv.Blog.HttpApi.Controllers
{
    [ApiController]
    [AllowAnonymous]
    [Route("[controller]")]
    [ApiExplorerSettings(GroupName = Grouping.GroupName_v4)]
    public class AuthController : AbpController
    {
        private readonly IAuthorizeService _authorizeService;

        public AuthController(IAuthorizeService authorizeService)
        {
            _authorizeService = authorizeService;
        }

        /// <summary>
        /// 獲取登入地址(GitHub)
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        [Route("url")]
        public async Task<ServiceResult<string>> GetLoginAddressAsync()
        {
            return await _authorizeService.GetLoginAddressAsync();
        }

        /// <summary>
        /// 獲取AccessToken
        /// </summary>
        /// <param name="code"></param>
        /// <returns></returns>
        [HttpGet]
        [Route("access_token")]
        public async Task<ServiceResult<string>> GetAccessTokenAsync(string code)
        {
            return await _authorizeService.GetAccessTokenAsync(code);
        }
    }
}

注意這裡我們新增了兩個Attribute:[AllowAnonymous]、[ApiExplorerSettings(GroupName = Grouping.GroupName_v4)],在.Swagger層中為AuthController新增描述資訊

...
new OpenApiTag {
    Name = "Auth",
    Description = "JWT模式認證授權",
    ExternalDocs = new OpenApiExternalDocs { Description = "JSON Web Token" }
}
...

開啟Swagger文件,呼叫一下我們兩個介面看看效果。

3

然後開啟我們生成的重定向地址,會跳轉到登入頁面,如下:

4

點選Authorize按鈕,登入成功後會跳轉至我們配置的回撥頁面,.../account/auth?code=10b7a58c7ba2e4414a14&state=a1ef05212c3b4a2cb2bbd87846dd4a8e

然後拿到code(10b7a58c7ba2e4414a14),在去呼叫一下獲取AccessToken介面,成功返回我們的access_token(97eeafd5ca01b3719f74fc928440c89d59f2eeag)。

5

拿到access_token,就可以去呼叫獲取使用者資訊API了。在這之前我們先來寫幾個擴充套件方法,待會和以後都用得著,在.ToolKits層新建資料夾Extensions,新增幾個比較常用的擴充套件類(...)。

擴充套件類的程式碼我就不貼出來了。大家可以去GitHub(https://github.com/Meowv/Blog/tree/blog_tutorial/src/Meowv.Blog.ToolKits/Extensions)自行下載,每個擴充套件方法都有具體的註釋。

接下來實現GenerateTokenAsync(string access_token),生成Token。

有了access_token,可以直接呼叫獲取使用者資訊的介面:https://api.github.com/user?access_token=97eeafd5ca01b3719f74fc928440c89d59f2eeag ,會得到一個json,將這個json包裝成一個模型類UserResponse.cs

在這裡教大家一個小技巧,如果你需要將json或者xml轉換成模型類,可以使用Visual Studio的一個快捷功能,點選左上角選單:編輯 => 選擇性貼上 => 將JSON貼上為類/將XML貼上為類,是不是很方便,快去試試吧。

//UserResponse.cs
namespace Meowv.Blog.ToolKits.GitHub
{
    public class UserResponse
    {
        public string Login { get; set; }

        public int Id { get; set; }

        public string Avatar_url { get; set; }

        public string Html_url { get; set; }

        public string Repos_url { get; set; }

        public string Name { get; set; }

        public string Company { get; set; }

        public string Blog { get; set; }

        public string Location { get; set; }

        public string Email { get; set; }

        public string Bio { get; set; }

        public int Public_repos { get; set; }
    }
}

然後看一下具體生成token的方法吧。

...
        /// <summary>
        /// 登入成功,生成Token
        /// </summary>
        /// <param name="access_token"></param>
        /// <returns></returns>
        public async Task<ServiceResult<string>> GenerateTokenAsync(string access_token)
        {
            var result = new ServiceResult<string>();

            if (string.IsNullOrEmpty(access_token))
            {
                result.IsFailed("access_token為空");
                return result;
            }

            var url = $"{GitHubConfig.API_User}?access_token={access_token}";
            using var client = _httpClient.CreateClient();
            client.DefaultRequestHeaders.Add("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.14 Safari/537.36 Edg/83.0.478.13");
            var httpResponse = await client.GetAsync(url);
            if (httpResponse.StatusCode != HttpStatusCode.OK)
            {
                result.IsFailed("access_token不正確");
                return result;
            }

            var content = await httpResponse.Content.ReadAsStringAsync();

            var user = content.FromJson<UserResponse>();
            if (user.IsNull())
            {
                result.IsFailed("未獲取到使用者資料");
                return result;
            }

            if (user.Id != GitHubConfig.UserId)
            {
                result.IsFailed("當前賬號未授權");
                return result;
            }

            var claims = new[] {
                    new Claim(ClaimTypes.Name, user.Name),
                    new Claim(ClaimTypes.Email, user.Email),
                    new Claim(JwtRegisteredClaimNames.Exp, $"{new DateTimeOffset(DateTime.Now.AddMinutes(AppSettings.JWT.Expires)).ToUnixTimeSeconds()}"),
                    new Claim(JwtRegisteredClaimNames.Nbf, $"{new DateTimeOffset(DateTime.Now).ToUnixTimeSeconds()}")
                };

            var key = new SymmetricSecurityKey(AppSettings.JWT.SecurityKey.SerializeUtf8());
            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

            var securityToken = new JwtSecurityToken(
                issuer: AppSettings.JWT.Domain,
                audience: AppSettings.JWT.Domain,
                claims: claims,
                expires: DateTime.Now.AddMinutes(AppSettings.JWT.Expires),
                signingCredentials: creds);

            var token = new JwtSecurityTokenHandler().WriteToken(securityToken);

            result.IsSuccess(token);
            return await Task.FromResult(result);
        }
...

GitHub的這個API做了相應的安全機制,有一點要注意一下,當我們用程式碼去模擬請求的時候,需要給他加上User-Agent,不然是不會成功返回結果的。

FromJson<T>是之前我們新增的擴充套件方法,將JSON字串轉為實體物件。

SymmetricSecurityKey(byte[] key)接收一個byte[]引數,這裡也用到一個擴充套件方法SerializeUtf8()字串序列化成位元組序列。

我們判斷返回的Id是否為我們配置的使用者Id,如果是的話,就驗證成功,進行授權,生成Token。

生成Token的程式碼也很簡單,指定了 Name,Email,過期時間為30分鐘。具體各項含義可以去這裡看看:https://tools.ietf.org/html/rfc7519。

最後呼叫new JwtSecurityTokenHandler().WriteToken(SecurityToken token)便可成功生成Token,在Controller新增好,去試試吧。

...
        /// <summary>
        /// 登入成功,生成Token
        /// </summary>
        /// <param name="access_token"></param>
        /// <returns></returns>
        [HttpGet]
        [Route("token")]
        public async Task<ServiceResult<string>> GenerateTokenAsync(string access_token)
        {
            return await _authorizeService.GenerateTokenAsync(access_token);
        }
...

6

將之前拿到的access_token傳進去,呼叫介面可以看到已經成功生成了token。

前面為AuthController新增了一個Attribute:[AllowAnonymous],代表這個Controller下的介面都不需要授權,就可以訪問,當然你不新增的話預設也是開放的。可以為整個Controller指定,同時也可以為具體的介面指定。

當想要保護某個介面時,只需要加上Attribute:[Authorize]就可以了。現在來保護我們的BlogController下非查詢介面,給增刪改新增上[Authorize],注意引用名稱空間Microsoft.AspNetCore.Authorization

...
        ...
        /// <summary>
        /// 新增部落格
        /// </summary>
        /// <param name="dto"></param>
        /// <returns></returns>
        [HttpPost]
        [Authorize]
        public async Task<ServiceResult<string>> InsertPostAsync([FromBody] PostDto dto)
        ...

        /// <summary>
        /// 刪除部落格
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [HttpDelete]
        [Authorize]
        public async Task<ServiceResult> DeletePostAsync([Required] int id)
        ...

        /// <summary>
        /// 更新部落格
        /// </summary>
        /// <param name="id"></param>
        /// <param name="dto"></param>
        /// <returns></returns>
        [HttpPut]
        [Authorize]
        public async Task<ServiceResult<string>> UpdatePostAsync([Required] int id, [FromBody] PostDto dto)
        ...

        /// <summary>
        /// 查詢部落格
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [HttpGet]
        public async Task<ServiceResult<PostDto>> GetPostAsync([Required] int id)
        ...
...

現在編譯執行一下,呼叫上面的增刪改看看能不能成功?

7

這時介面就會直接給我們返回一個狀態碼為401的錯誤,為了避免這種不友好的錯誤,我們可以新增一箇中介軟體來處理我們的管道請求或者在AddJwtBearer()中處理我們的身份驗證事件機制,當遇到錯誤的狀態碼時,我們還是返回我們之前的建立的模型,定義友好的返回錯誤,將在後面篇章中給出具體方法。

可以看到公開的API和需要授權的API小綠鎖是不一樣的,公開的顯示為黑色,需要授權的顯示為灰色。

如果需要在Swagger中呼叫我們的非公開API,要怎麼做呢?點選我們的小綠鎖將生成的token按照Bearer {Token}的方式填進去即可。

8

注意不要點Logout,否則就退出了。

9

可以看到當我們請求的時候,請求頭上多了一個authorization: Bearer {token},此時便大功告成了。當我們在web中呼叫的時候,也遵循這個規則即可。

特別提示

在我做授權的時候,token也生成成功了,也在Swagger中正確填寫Bearer {token}了。呼叫介面的時候始終還是返回401,最終發現導致這個問題的原因是在配置Swagger小綠鎖時一個錯誤名稱導致的。

10

看他的描述為:A unique name for the scheme, as per the Swagger spec.(根據Swagger規範,該方案的唯一名稱)

如圖,將其名稱改為 "oauth2" ,便可以成功授權。本篇接入了GitHub,實現了認證和授權,用JWT的方式保護我們寫的API,你學會了嗎????

開源地址:https://github.com/Meowv/Blog/tree/blog_tutorial

相關文章