Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权(一)
好吧,這個題目我也想了很久,不知道如何用最簡單的幾個字來概括這篇文章,原本打算取名《Angular單頁面應用基于Ocelot API網關與IdentityServer4+ASP.NET Identity實現身份認證與授權》,然而如你所見,這樣的名字實在是太長了。所以,我不得不縮寫“單頁面應用”幾個字,然后去掉ASP.NET Identity的描述,最后形成目前的標題。
不過,這也就意味著這篇文章會涵蓋很多內容和技術,我會利用這些技術來走通一個完整的流程,這個流程也代表著在微服務架構中單點登錄的一種實現模式。在此過程中,我們會使用到如下技術或框架:
Angular 8
Ocelot API Gateway
IdentityServer4
ASP.NET Identity
Entity Framework Core
SQL Server
本文假設讀者具有上述技術框架的基礎知識。由于內容比較多,我還是將這篇文章分幾個部分進行講解和討論。
場景描述
在微服務架構下的一種比較流行的設計,就是基于前后端分離,前端只做呈現和用戶操作流的管理,后端服務由API網關同一協調,以從業務層面為前端提供各種服務。大致可以用下圖表示:
在這個結構中,我沒有將Identity Service放在API Gateway后端,因為考慮到Identity Service本身并沒有承擔任何業務功能。從它所能提供的端點(Endpoint)的角度,它也需要做負載均衡、熔斷等保護,但我們暫時不討論這些內容。
流程上其實也比較簡單,在上圖的數字標識中:
Client向Identity Service發送認證請求,通常可以是用戶名密碼
如果驗證通過,Identity Service會向Client返回認證的Token
Client使用Token向API Gateway發送API調用請求
API Gateway將Client發送過來的Token發送給Identity Service,以驗證Token的有效性
如果驗證成功,Identity Service會告知API Gateway認證成功
API Gateway轉發Client的請求到后端API Service
API Service將結果返回給API Gateway
API Gateway將API Service返回的結果轉發到Client
只是在這些步驟中,我們有很多技術選擇,比如Identity Service的實現方式、認證方式等等。接下來,我就在ASP.NET Core的基礎上使用IdentityServer4、Entity Framework Core和Ocelot來完成這一流程。在完成整個流程的演練之前,需要確保機器滿足以下條件:
安裝Visual Studio 2019 Community Edition。使用Visual Studio Code也是可以的,根據自己的需要選擇
安裝Visual Studio Code
安裝Angular 8
IdentityServer4結合ASP.NET Identity實現Identity Service
創建新項目
首先第一步就是實現Identity Service。在Visual Studio 2019 Community Edition中,新建一個ASP.NET Core Web Application,模板選擇Web Application (Model-View-Controller),然后點擊Authentication下的Change按鈕,再選擇Individual User Accounts選項,以便將ASP.NET Identity的依賴包都加入項目,并且自動完成基礎代碼的搭建。
然后,通過NuGet添加IdentityServer4.AspNetIdentity以及IdentityServer4.EntityFramework的引用,IdentityServer4也隨之會被添加進來。接下來,在該項目的目錄下,執行以下命令安裝IdentityServer4的模板,并將IdentityServer4的GUI加入到當前項目:
1 2 | dotnet new -i identityserver4.templates dotnet new is4ui --force |
然后調整一下項目結構,將原本的Controllers目錄刪除,同時刪除Models目錄下的ErrorViewModel類,然后將Quickstart目錄重命名為Controllers,編譯代碼,代碼應該可以編譯通過,接下來就是實現我們自己的Identity。
定制Identity Service
為了能夠展現一個標準的應用場景,我自己定義了User和Role對象,它們分別繼承于IdentityUser和IdentityRole類:
1 2 3 4 5 6 7 8 9 | public class AppUser : IdentityUser { ????public string DisplayName { get; set; } } ? public class AppRole : IdentityRole { ????public string Description { get; set; } } |
當然,Data目錄下的ApplicationDbContext也要做相應調整,它應該繼承于IdentityDbContext<AppUser, AppRole, string>類,這是因為我們使用了自定義的IdentityUser和IdentityRole的實現:
1 2 3 4 5 6 7 | public class ApplicationDbContext : IdentityDbContext<AppUser, AppRole, string> { ????public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) ????????: base(options) ????{ ????} } |
之后修改Startup.cs里的ConfigureServices方法,通過調用AddIdentity、AddIdentityServer以及AddDbContext,將ASP.NET Identity、IdentityServer4以及存儲認證數據所使用的Entity Framework Core的依賴全部注冊進來。為了測試方便,目前我們還是使用Developer Signing Credential,對于Identity Resource、API Resource以及Clients,我們也是暫時先寫死(hard code):
public void ConfigureServices(IServiceCollection services) { ????services.AddDbContext<ApplicationDbContext>(options => ????????options.UseSqlServer( ????????????Configuration.GetConnectionString("DefaultConnection"))); ????services.AddIdentity<AppUser, AppRole>() ????????.AddEntityFrameworkStores<ApplicationDbContext>() ????????.AddDefaultTokenProviders(); ????services.AddIdentityServer().AddDeveloperSigningCredential() ??????.AddOperationalStore(options => ??????{ ??????????options.ConfigureDbContext = builder => builder.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"), ??????????????sqlServerDbContextOptionsBuilder => ??????????????sqlServerDbContextOptionsBuilder.MigrationsAssembly(typeof(Startup).Assembly.GetName().Name)); ??????????options.EnableTokenCleanup = true; ??????????options.TokenCleanupInterval = 30; // interval in seconds ??????}) ??????.AddInMemoryIdentityResources(Config.GetIdentityResources()) ??????.AddInMemoryApiResources(Config.GetApiResources()) ??????.AddInMemoryClients(Config.GetClients()) ??????.AddAspNetIdentity<AppUser>(); ? ????services.AddCors(options => options.AddPolicy("AllowAll", p => p.AllowAnyOrigin() ???????.AllowAnyMethod() ???????.AllowAnyHeader())); ? ????services.AddControllersWithViews(); ????services.AddRazorPages(); ????services.AddControllers(); } |
然后,調整Configure方法的實現,將IdentityServer加入進來,同時配置CORS使得站點能夠被跨域訪問:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { ????if (env.IsDevelopment()) ????{ ????????app.UseDeveloperExceptionPage(); ????????app.UseDatabaseErrorPage(); ????} ????else ????{ ????????app.UseExceptionHandler("/Home/Error"); ????????app.UseHsts(); ????} ? ????app.UseCors("AllowAll"); ????app.UseHttpsRedirection(); ????app.UseStaticFiles(); ? ????app.UseRouting(); ????app.UseIdentityServer(); ? ????app.UseAuthentication(); ????app.UseAuthorization(); ? ????app.UseEndpoints(endpoints => ????{ ????????endpoints.MapControllerRoute( ????????????name: "default", ????????????pattern: "{controller=Home}/{action=Index}/{id?}"); ????????endpoints.MapRazorPages(); ????}); } |
完成這部分代碼調整后,編譯是通不過的,因為我們還沒有定義IdentityServer4的IdentityResource、API Resource和Clients。在項目中新建一個Config類,代碼如下:
public static class Config { ????public static IEnumerable<IdentityResource> GetIdentityResources() => ????????new IdentityResource[] ????????{ ????????????new IdentityResources.OpenId(), ????????????new IdentityResources.Email(), ????????????new IdentityResources.Profile() ????????}; ? ????public static IEnumerable<ApiResource> GetApiResources() => ????????new[] ????????{ ????????????new ApiResource("api.weather", "Weather API") ????????????{ ????????????????Scopes = ????????????????{ ????????????????????new Scope("api.weather.full_access", "Full access to Weather API") ????????????????}, ????????????????UserClaims = ????????????????{ ????????????????????ClaimTypes.NameIdentifier, ????????????????????ClaimTypes.Name, ????????????????????ClaimTypes.Email, ????????????????????ClaimTypes.Role ????????????????} ????????????} ????????}; ? ????public static IEnumerable<Client> GetClients() => ????????new[] ????????{ ????????????new Client ????????????{ ????????????????RequireConsent = false, ????????????????ClientId = "angular", ????????????????ClientName = "Angular SPA", ????????????????AllowedGrantTypes = GrantTypes.Implicit, ????????????????AllowedScopes = { "openid", "profile", "email", "api.weather.full_access" }, ????????????????RedirectUris = {"http://localhost:4200/auth-callback"}, ????????????????PostLogoutRedirectUris = {"http://localhost:4200/"}, ????????????????AllowedCorsOrigins = {"http://localhost:4200"}, ????????????????AllowAccessTokensViaBrowser = true, ????????????????AccessTokenLifetime = 3600 ????????????}, ????????????new Client ????????????{ ????????????????ClientId = "webapi", ????????????????AllowedGrantTypes = GrantTypes.ResourceOwnerPassword, ????????????????ClientSecrets = ????????????????{ ????????????????????new Secret("mysecret".Sha256()) ????????????????}, ????????????????AlwaysSendClientClaims = true, ????????????????AllowedScopes = { "api.weather.full_access" } ????????????} ????????}; } |
大致說明一下上面的代碼。通俗地講,IdentityResource是指允許應用程序訪問用戶的哪些身份認證資源,比如,用戶的電子郵件或者其它用戶賬戶信息,在Open ID Connect規范中,這些信息會被轉換成Claims,保存在User Identity的對象里;ApiResource用來指定被IdentityServer4所保護的資源,比如這里新建了一個ApiResource,用來保護Weather API,它定義了自己的Scope和UserClaims。Scope其實是一種關聯關系,它關聯著Client與ApiResource,用來表示什么樣的Client對于什么樣的ApiResource具有怎樣的訪問權限,比如在這里,我定義了兩個Client:angular和webapi,它們對Weather API都可以訪問;UserClaims定義了當認證通過之后,IdentityServer4應該向請求方返回哪些Claim。至于Client,就比較容易理解了,它定義了客戶端能夠以哪幾種方式來向IdentityServer4提交請求。
至此,我們的源代碼就可以編譯通過了,成功編譯之后,還需要使用Entity Framework Core所提供的命令行工具或者Powershell Cmdlet來初始化數據庫。我這里選擇使用Visual Studio 2019 Community中的Package Manager Console,在執行數據庫更新之前,確保appsettings.json文件里設置了正確的SQL Server連接字符串。當然,你也可以選擇使用其它類型的數據庫,只要對ConfigureServices方法做些相應的修改即可。在Package Manager Console中,依次執行下面的命令:
1 2 3 4 | Add-Migration ModifiedUserAndRole -Context ApplicationDbContext Add-Migration ModifiedUserAndRole –Context PersistedGrantDbContext Update-Database -Context ApplicationDbContext Update-Database -Context PersistedGrantDbContext |
效果如下:
打開SQL Server Management Studio,看到數據表都已成功創建:
由于IdentityServer4的模板所產生的代碼使用的是mock user,也就是IdentityServer4里默認的TestUser,因此,相關部分的代碼需要被替換掉,最主要的部分就是AccountController的Login方法,將該方法中的相關代碼替換為:
if (ModelState.IsValid) { ????var user = await _userManager.FindByNameAsync(model.Username); ? ????if (user != null && await _userManager.CheckPasswordAsync(user, model.Password)) ????{ ????????await _events.RaiseAsync(new UserLoginSuccessEvent(user.UserName, user.Id, user.DisplayName)); ? ????????// only set explicit expiration here if user chooses "remember me". ????????// otherwise we rely upon expiration configured in cookie middleware. ????????AuthenticationProperties props = null; ????????if (AccountOptions.AllowRememberLogin && model.RememberLogin) ????????{ ????????????props = new AuthenticationProperties ????????????{ ????????????????IsPersistent = true, ????????????????ExpiresUtc = DateTimeOffset.UtcNow.Add(AccountOptions.RememberMeLoginDuration) ????????????}; ????????}; ? ????????// issue authentication cookie with subject ID and username ????????await HttpContext.SignInAsync(user.Id, user.UserName, props); ? ????????if (context != null) ????????{ ????????????if (await _clientStore.IsPkceClientAsync(context.ClientId)) ????????????{ ????????????????// if the client is PKCE then we assume it's native, so this change in how to ????????????????// return the response is for better UX for the end user. ????????????????return View("Redirect", new RedirectViewModel { RedirectUrl = model.ReturnUrl }); ????????????} ? ????????????// we can trust model.ReturnUrl since GetAuthorizationContextAsync returned non-null ????????????return Redirect(model.ReturnUrl); ????????} ? ????????// request for a local page ????????if (Url.IsLocalUrl(model.ReturnUrl)) ????????{ ????????????return Redirect(model.ReturnUrl); ????????} ????????else if (string.IsNullOrEmpty(model.ReturnUrl)) ????????{ ????????????return Redirect("~/"); ????????} ????????else ????????{ ????????????// user might have clicked on a malicious link - should be logged ????????????throw new Exception("invalid return URL"); ????????} ????} ? ????await _events.RaiseAsync(new UserLoginFailureEvent(model.Username, "invalid credentials", clientId: context?.ClientId)); ????ModelState.AddModelError(string.Empty, AccountOptions.InvalidCredentialsErrorMessage); } |
這樣才能通過注入的userManager和EntityFramework Core來訪問SQL Server,以完成登錄邏輯。
新用戶注冊API
由IdentityServer4所提供的默認UI模板中沒有包括新用戶注冊的頁面,開發者可以根據自己的需要向Identity Service中增加View來提供注冊界面。不過為了快速演示,我打算先增加兩個API,然后使用curl來新建一些用于測試的角色(Role)和用戶(User)。下面的代碼為客戶端提供了注冊角色和注冊用戶的API:
18 119 | public class RegisterRoleRequestViewModel { ????[Required] ????public string Name { get; set; } ? ????public string Description { get; set; } } ? public class RegisterRoleResponseViewModel { ????public RegisterRoleResponseViewModel(AppRole role) ????{ ????????Id = role.Id; ????????Name = role.Name; ????????Description = role.Description; ????} ? ????public string Id { get; } ? ????public string Name { get; } ? ????public string Description { get; } } ? public class RegisterUserRequestViewModel { ????[Required] ????[StringLength(50, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 2)] ????[Display(Name = "DisplayName")] ????public string DisplayName { get; set; } ? ????public string Email { get; set; } ? ????[Required] ????[StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)] ????[DataType(DataType.Password)] ????[Display(Name = "Password")] ????public string Password { get; set; } ? ????[Required] ????[StringLength(20)] ????[Display(Name = "UserName")] ????public string UserName { get; set; } ? ????public List<string> RoleNames { get; set; } } ? public class RegisterUserResponseViewModel { ????public string Id { get; set; } ????public string UserName { get; set; } ????public string DisplayName { get; set; } ????public string Email { get; set; } ? ????public RegisterUserResponseViewModel(AppUser user) ????{ ????????Id = user.Id; ????????UserName = user.UserName; ????????DisplayName = user.DisplayName; ????????Email = user.Email; ????} } ? // Controllers\Account\AccountController.cs [HttpPost] [Route("api/[controller]/register-account")] public async Task<IActionResult> RegisterAccount([FromBody] RegisterUserRequestViewModel model) { ????if (!ModelState.IsValid) ????{ ????????return BadRequest(ModelState); ????} ? ????var user = new AppUser { UserName = model.UserName, DisplayName = model.DisplayName, Email = model.Email }; ????? ? ????var result = await _userManager.CreateAsync(user, model.Password); ? ????if (!result.Succeeded) return BadRequest(result.Errors); ? ????await _userManager.AddClaimAsync(user, new Claim(ClaimTypes.NameIdentifier, user.UserName)); ????await _userManager.AddClaimAsync(user, new Claim(ClaimTypes.Name, user.DisplayName)); ????await _userManager.AddClaimAsync(user, new Claim(ClaimTypes.Email, user.Email)); ? ????if (model.RoleNames?.Count > 0) ????{ ????????var validRoleNames = new List<string>(); ????????foreach(var roleName in model.RoleNames) ????????{ ????????????var trimmedRoleName = roleName.Trim(); ????????????if (await _roleManager.RoleExistsAsync(trimmedRoleName)) ????????????{ ????????????????validRoleNames.Add(trimmedRoleName); ????????????????await _userManager.AddToRoleAsync(user, trimmedRoleName); ????????????} ????????} ? ????????await _userManager.AddClaimAsync(user, new Claim(ClaimTypes.Role, string.Join(',', validRoleNames))); ????} ? ????return Ok(new RegisterUserResponseViewModel(user)); } ? // Controllers\Account\AccountController.cs [HttpPost] [Route("api/[controller]/register-role")] public async Task<IActionResult> RegisterRole([FromBody] RegisterRoleRequestViewModel model) { ????if (!ModelState.IsValid) ????{ ????????return BadRequest(ModelState); ????} ? ????var appRole = new AppRole { Name = model.Name, Description = model.Description }; ????var result = await _roleManager.CreateAsync(appRole); ????if (!result.Succeeded) return BadRequest(result.Errors); ? ????return Ok(new RegisterRoleResponseViewModel(appRole)); } |
在上面的代碼中,值得關注的就是register-account API中的幾行AddClaimAsync調用,我們將一些用戶信息數據加入到User Identity的Claims中,比如,將用戶的角色信息,通過逗號分隔的字符串保存為Claim,在后續進行用戶授權的時候,會用到這些數據。
創建一些基礎數據
運行我們已經搭建好的Identity Service,然后使用下面的curl命令創建一些基礎數據:
1 2 3 4 5 6 7 8 9 | curl -X POST https://localhost:7890/api/account/register-role \ ??-d '{"name":"admin","description":"Administrator"}' \ ??-H 'Content-Type:application/json' --insecure curl -X POST https://localhost:7890/api/account/register-account \ ??-d '{"userName":"daxnet","password":"P@ssw0rd123","displayName":"Sunny Chen","email":"daxnet@163.com","roleNames":["admin"]}' \ ??-H 'Content-Type:application/json' --insecure curl -X POST https://localhost:7890/api/account/register-account \ ??-d '{"userName":"acqy","password":"P@ssw0rd123","displayName":"Qingyang Chen","email":"qychen@163.com"}' \ ??-H 'Content-Type:application/json' --insecure |
完成這些命令后,系統中會創建一個admin的角色,并且會創建daxnet和acqy兩個用戶,daxnet具有admin角色,而acqy則沒有該角色。
使用瀏覽器訪問https://localhost:7890,點擊主頁的鏈接進入登錄界面,用已創建的用戶名和密碼登錄,可以看到如下的界面,表示Identity Service的開發基本完成:
小結
一篇文章實在是寫不完,今天就暫且告一段落吧,下一講我將介紹Weather API和基于Ocelot的API網關,整合Identity Service進行身份認證。
源代碼
訪問以下Github地址以獲取源代碼:
https://github.com/daxnet/identity-demo
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: .NET Core开发实战(第25课:路
- 下一篇: 【翻译】.NET 5 Preview 1