Identity Server 4 原理和實戰（完結）_Implicit Flow 實例

oidc-client.js貌似是IdentityServer4的團隊開發的

服務端的設置
在服務端新增一個Client




以後須要在angular客戶端頁建兩個頁面，對應這兩個url才行

登出以後要跳轉的url地址

容許跨域的地址

這裏和之前同樣

angular客戶端設置

angular客戶端設置，首先須要安裝oidc-client



oidc-client須要配置一些參數，在這個文件內。environments/environment.ts至關於咱們開發的時候會使用這個文件

生產環境會走這個文件
environment.prod.ts這個文件。和asp.net core文件裏面 那個 appsettings差很少
聲明兩個常量，分別是IdentityServe的地址和api1 的地址

視頻中裝了個這麼個東西，號稱是能夠在保存的時候自動把分號給你補上

把idpBase的url放在environment裏面輸出。而後定義openIdConnectSettings這個對象設置openIdConnect的一些參數

配置這寫相關的參數

新建Service。ng g s iodc/openIdConnect:建立完成後他會更名，爲opne-id-connect


定義私有變量




ReplaySubject表示便可以訂閱又能夠發佈

userManager.getUser()方法返回的是一個Promise




自動刷新的功能

最後再加一個退出的

在首頁頂部的右側 加一些按鈕什麼的，用戶登錄後把用戶名顯示出來

注入進來才能在HTML內使用



點擊登錄：


登錄

idToken和AccessToken都在應用裏

是由於咱們沒作回調的頁面這個signin-oidc

咱們須要在前端作一下這個頁面

這個頁面能夠不用掛在angular應用裏面，能夠做爲單獨的頁面


這樣登錄的回調就寫完了。

html頁面隨便寫點文字


再寫刷新的頁面

再頁面中定義一個看不見frame頁面，進行刷新，從而刷新accessToken

配置上着兩個組件的路由

測試登錄


api1設置只有登錄的用戶才能夠訪問


這樣再去訪問 就讀取不到數據了，再訪問數據的時候沒有帶上accessToken

angular攔截器

若是每個地方都要加上參數比較麻煩，因此angular的攔截器
angular攔截器，對全部發出的請求進行攔截。而後修改下Authorization的Header就能夠了
新建攔截器沒有生成的命令，只能本身新建一個ts的文件
authorization-header.interceptor.ts


注入opneIdConnectService


註冊攔截器



這樣整個代碼就完成了


https://github.com/IdentityModel/oidc-client-js