從壹開始 [ 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協議，既然開始了，便只顧風雨兼程了。
四、下一步 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（資源伺服器）