從零搭建一個IdentityServer——單頁應用身份驗證-有解無憂

上一篇文章我們介紹了Asp.net core中身份驗證的相關內容，并通過下圖描述了身份驗證及授權的流程：　　

　　注：改流程圖進行過修改，第三方用戶名密碼登陸后并不是直接獲得code/id_token/access_token，而是登錄后可以訪問identityServer中受保護的資源(Authorize Endpoint)，通過發起身份驗證請求來實作授權碼流程、隱式流程及混合流程來完成token的獲取，它與直接通過用戶名密碼來獲取token的Oauth2.0 Password GrantType方式是不一樣的，　　在asp.net core應用程式中，通過授權碼流程可以使用第三方(IdentityServer)的用戶名密碼，經過一系列的token、userinfo獲取，最后生成身份資訊載體(Cookie)，asp.net core應用程式使用cookie就能完成身份驗證作業，這個程序對于用戶來說，它與一般的asp.net core應用程式(特指基于asp.net core identity的應用程式)是沒有任何區別的，都是通過用戶名密碼登錄，然后就可以進入系統，對于應用程式來說它仍然是基于cookie來完成身份驗證，只不過生成cookie所需的資料是第三方提供的而已，　　但是單頁應用由于其特殊性，其UI渲染作業及業務邏輯的處理都是由瀏覽器完成，服務器不具備相關功能(僅需靜態檔案傳輸即可)，其次單頁應用會存在跨域問題，所以cookie就不適合作為單頁應用的身份資訊載體，本文就介紹如何使用jwt來完成單頁應用的身份驗證，　　主要內容有：

創建一個簡單的單頁應用專案
使用單頁應用完成受保護資源訪問
oidc Client簡介
oidc-client.js的各種用法

彈出式登錄/登出
靜默登錄與靜默重繪
會話監聽

小結

創建一個簡單的單頁應用專案

　　注：該單頁應用完全參考官方檔案，本小節僅對要點進行介紹，詳情參見檔案：https://identityserver4.readthedocs.io/en/latest/quickstarts/4_javascript_client.html 　　1、新建一個asp.net core的web應用程式：

　　2、添加oidc的js組件：　　oidc的js客戶端庫：https://github.com/IdentityModel/oidc-client-js 　　可以通過npm進行安裝或者在Github上直接下載，以下為npm安裝方法：　　npm i oidc-client 　　

　　完成之后在相關目錄下可找到oidc-client相關檔案：　　

　　將其復制到適合的位置即可，　　3、通過資料庫添加一個Client資訊(如果是基于記憶體的，那么需要添加一個client實體，詳見檔案：https://identityserver4.readthedocs.io/en/latest/quickstarts/4_javascript_client.html#add-a-client-registration-to-identityserver-for-the-javascript-client)，用于單頁應用的授權配置：　　添加Client時需要注意幾個關鍵資訊：

授權型別支持授權碼型別；
不需要客戶端密碼；
允許跨域，允許客戶端跨域訪問IdentityServer；

　　參考如下，記憶體實體：　　

　　資料庫資料：　　

　　4、添加基于oidc-client的登錄、API訪問以及登出業務邏輯代碼App.js：　　UserManager物件初始化：　　

　　使用UserManager實體進行登錄跳轉：　　

　　使用UserManager實體獲取用戶資訊，然后通過用戶資訊中的access token訪問受保護資源：　　

　　使用UserManager實體進行登出跳轉：　　

　　5、添加功能頁面Index.html，包含登錄、API訪問及登出功能：　　

　　6、添加用于處理授權碼的重定向頁面：　　

　　到此單頁應用程式已經創建完畢，后面就使用該程式要介紹它是如何完成身份驗證，并訪問受保護資源的，

使用單頁應用完成受保護資源訪問

　　我們使用一個簡單的asp.net core web api專案(本系列文章用過的)來進行演示，它對于普通API專案來說要點在于：　　1、添加基于JwtBearer的身份驗證處理器: 　　

　　2、添加跨域處理，添加跨域策略配置：　　

　　3、在asp.net core應用請求管道中應用跨域配置：　　

　　4、受保護內容通過authorize特性進行標記：　　

　　一切準備就緒后運行三個應用程式，單頁應用運行并打開index.html頁面效果如下，一共有三個功能，登錄、呼叫API以及登出：　　

　　登錄：它實際上是呼叫oidc Client的signinRedirect方法，語意上來說它是通過重定向的方式進行登錄，而它實際執行的效果如下：

　　跳轉到了IdentityServer的登錄頁面，然后我們再看看它本質上是做了什么？

　　它實際上是發起了一個授權碼流程的身份驗證請求（請求程序可參考：https://www.cnblogs.com/selimsong/p/14355150.html#oidc_code_flow），發起請求后，由于當前用戶沒有在IdentityServer上登錄或者說未通過IdentityServer的身份驗證，所以由跳轉到登錄頁面，　　當我們通過用戶名密碼登錄之后，IdentityServer將繼續完成授權碼流程，后續流程是生成相應的授權碼并回傳到客戶端配置的重定向uri（本例中是https://localhost:5003/html/callback.html），為了能夠看清楚整個請求程序，本例在callback.html頁面加入了除錯斷點：　　

　　斷點位于signinRedirectCallback方法之后，也就是完成回呼處理之后(這個時候已經完成token等資訊的獲取)，跳轉到index.html頁面之前，　　以下是輸入用戶名密碼提交后命中斷點時的相關請求資訊：

　　由上圖可以看到，當輸入用戶名密碼提交后（第一個請求），由于通過了身份驗證，那么繼續完成授權碼流程（第二個請求），授權碼流程完成后攜帶授權碼重定向到Client配置的重定向地址（第三個請求）. 　　第三個請求就到了我們的callback.html頁面，頁面的加載首先請求了oidc-client.js檔案，然后由UserManager的實體化以及signinRedirectCallback方法，來完成了后續請求，后續請求包含openid的配置資訊請求、獲取Token請求、獲取用戶資訊（userinfo）請求以及檢查會話請求，　　以上一系列的請求結果就是在瀏覽器的會話存盤中，我們可以找到相關的資料資訊：　　

　　斷點通過后就來到了index.html頁面，并列印出登錄用戶資訊：　　

　　點擊Call API按鈕后，程式將從存盤資訊中獲取到access_token，攜帶access_token完成請求：

　　點擊登出按鈕后，程式將洗掉用戶資訊并跳轉到IdentityServer的登出頁面：

　　注：需要配置identityserver4的登出url：　　

oidc-client.js簡介

　　前面的內容是基于oidc-client.js，即JavaScript版本的oidc客戶端類別庫來實作的單頁應用的，那么oidc-client.js到底為我們提供了什么功能呢？ oidc-client.js是一個支持OIDC和Oauth2.0協議的JavaScript類別庫，除此之外它還提供用戶會話和Token的管理功能，類別庫中的核心型別是UserManager，它提供了用戶登錄、登出、用戶資訊管理等高層次的API，上面的例子中就是使用UserManager來完成的登錄、用戶資訊(Access Token)獲取以及登出的， oidc-client.js或者直接說UserManager使用上需要注意以下幾個方面：

配置：配置的目的和asp.net core基于oidc身份驗證的配置類似，主要是指明identityServer的地址、用于授權的Client資訊、授權所使用的流程（授權碼還是隱式流程）、授權完成后的跳轉地址以及請求的Scope資訊等(更多配置引數可查看檔案：https://github.com/IdentityModel/oidc-client-js/wiki)，如下圖所示：

　　但這里要注意的是由于以上代碼對用戶是可見的，所以Client的密碼就省略了，

方法：提供了用戶管理、登錄、登出、以及相關回呼方法，除此之外還有會話狀態查詢和開啟/關閉靜默重繪(token)的方法，登錄/登出分為三種型別：跳轉、靜默和彈出，具體如何使用后續介紹，

屬性：可以回傳UserManager的配置、事件以及元資料服務，
事件：UserManager包含了8個事件，如用戶登錄/登出、access token過期等：

　　以上內容參考檔案：https://github.com/IdentityModel/oidc-client-js/wiki

oidc-client.js的各種用法

彈出式登錄/登出

　　彈出式登錄/登出就是字面的意思，通過彈出視窗打開IdentityServer的登錄/登出頁面完成相應功能，　　下圖為彈出式登錄(僅需呼叫UserManager的signinPopup方法即可)：　　

　　注：回呼頁面需要使用signinPopupCallback：　　

　　下圖為彈出式登出：　　

靜默登錄與靜默重繪

　　靜默登錄和靜默重繪指的就是signinSilent和startSilentRenew兩個方法，而且需要注意的是startSilentRenew的原理實際上是關注了accessTokenExpiring事件，當token即將過期時呼叫signinSilent進行靜默登錄，　　靜默登錄方式又有兩種其一是基于會話的，其二是基于重繪token，其中重繪token的優先級較高，換句話就是重繪token存在的時候，它就默認使用重繪token進行登錄，重繪token比較好理解，但是會話是什么呢？它實際上就是通過IdentityServer的登錄后所保持的狀態，文章最開始的流程圖中提到過，我們之所以可以通過授權碼流程進行授權是因為登錄之后有權訪問IdentityServer受保護的授權終結點，從而可以獲取授權碼及相關Token，那這里的原理就是瀏覽器保存了登錄狀態，所以可以再次訪問授權終結點來獲取并重繪Token資訊，　　基于會話的靜默登錄，下圖為點擊靜默登錄按鈕后發起的請求資訊，也就是正常的請求到授權碼之后獲取token及用戶資訊的程序：

　　需要注意的是回呼頁面需要使用signinSilentCallback方法，同時不再需要頁面跳轉：　　

　　基于重繪token的靜默登錄，在嘗試重繪token登錄之前首先需要獲得重繪token，oidc中重繪token的獲取是需要client支持offline_access的scope，同時在發起獲取token時攜帶該scope：　　

　　配置完成后重新登錄獲取token即可在存盤中找到重繪token資訊 : 　　

　　然后再次進行靜默登錄(相應client需要支持refresh_token的授權方式)：　　

　　靜默登錄發起的請求資訊：　　

　　回應資訊中包含了新的token：

會話監聽

　　會話監聽是默認開啟的，在正常登錄狀態下，通過新的瀏覽器視窗從identityserver中登出(目的是清除identityserver存盤在瀏覽器的會話資訊)：　　

　　資訊清除后它會立即嘗試發起新的身份驗證請求，但是回傳資訊中包含“需要登錄”錯誤資訊，可以在接收到相關錯誤資訊時清除相關Token及用戶資訊，已達到單頁應用隨著IdentityServer會話結束而登出的效果：

小結

　　本篇文章介紹了單頁應用使用IdentityServer進行身份驗證的程序及oidc-client.js JavaScript類別庫在應用中的使用，oidc-client.js為我們適配了oidc協議，同時還提供了豐富的功能和機制，使用這個類別庫可以大大減少實際作業中的開發量，　　說到單頁應用的身份驗證，它最根本的機制無非就是獲得Access Token和Refresh Token，使用Access Token作為身份資訊載體來完成身份驗證，使用Refresh Token作為更新Access Token的鑰匙，通過保證Access Token不過期來保證用戶能夠正常訪問相關資源，　　但如果使用Oauth2.0協議來實作單頁應用的登錄(Password授權模式)會存在一些問題，首先是單頁應用對于授權服務器來說是不可信的，但是Password授權由單頁應用發起，屬于授權服務器的用戶資訊及密碼都要經過不可信的單頁應用，這會造成一些安全問題，其次使用Oauth2.0協議完成授權后，應用與授權服務器之間實際上就沒有任何關聯了，授權服務器不保留用戶會話，也無法實作用戶登出聯動的功能(即一方登出可以通知另一方)，這些也正是IdentityServer4或者說OIDC協議所處理的內容，　　下篇文章，我們將繼續以IdentityServer4或者說OIDC的會話管理開始，深入聊一聊它們的登錄與登出，參考： https://identityserver4.readthedocs.io/en/latest/quickstarts/4_javascript_client.html https://github.com/IdentityModel/oidc-client-js/wiki 本文鏈接：https://www.cnblogs.com/selimsong/p/14483664.html 從零搭建一個IdentityServer——目錄（更新中...）

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/266177.html

標籤：.NET Core

上一篇：一日一技：微信開發-自定義選單

下一篇：一日一技：微信開發-自定義選單