IdentityServer4-前后端分离的授权验证（六）
上兩節(jié)介紹完Hybrid模式在MVC下的使用，包括驗(yàn)證從數(shù)據(jù)獲取的User和Claim對(duì)MVC的身份授權(quán)。本節(jié)將介紹Implicit模式在JavaScript應(yīng)用程序中的使用，使用Node.js+Express構(gòu)建JavaScript客戶端，實(shí)現(xiàn)前后端分離。本節(jié)授權(quán)服務(wù)和資源服務(wù)器基于第四和第五節(jié)。
?一、使用Node.js+Express搭建JavaScript客戶端
（1）首先需要Node.js環(huán)境
下載并安裝Node.js，官網(wǎng)下載地址：https://nodejs.org/en/?
輸入指令：node –v??檢測(cè)是否已安裝Node.js，已安裝會(huì)顯示安裝的Node.js版本
（2）安裝Express
打開cmd，輸入指令：npm install express-generator –g
輸入指令：express –h????已安裝express會(huì)顯示幫助文檔
（3）新建文件，創(chuàng)建JavaScript_Client應(yīng)用程序
新建文件夾（在D盤新建Express文件夾），cmd進(jìn)入該文件夾。
輸入：express JavaScript_Client???? 在當(dāng)前目錄下創(chuàng)建一個(gè)名為JavaScript_Client的應(yīng)用。目錄結(jié)構(gòu)如下：
（4）安裝依賴包
輸入：cd JavaScript_Client?? 進(jìn)入JavaScript_Client目錄
輸入：npm install?? 安裝依賴包
（5）啟動(dòng)并測(cè)試項(xiàng)目
輸入：npm start
瀏覽器打開：http://localhost:3000?
看到以下頁面證明成功了。
?
二、添加JavaScript客戶端測(cè)試代碼
（1）安裝oidc-client庫(kù)
輸入：npm install oidc-client –save
我們會(huì)發(fā)現(xiàn)在D:\express\JavaScript_Client\node_modules\oidc-client\dist? 有兩個(gè)js文件
我們只需使用這兩個(gè)文件。把這兩個(gè)文件復(fù)制到D:\express\JavaScript_Client\public\ javascripts 目錄下
（2）添加測(cè)試用的HTML文件
使用VSCode打開JavaScript_Client文件夾，在public（D:\express\JavaScript_Client\public）下新建index.html文件。添加幾個(gè)測(cè)試用的按鈕。
（3）添加測(cè)試的js文件
在public下新建app.js文件。
黏貼以下代碼
以下對(duì)app.js代碼進(jìn)行分析
App.js中l(wèi)og函數(shù)用來記錄消息
使用oidc-client庫(kù)中的UserManager類來管理OpenID連接協(xié)議。添加此代碼以配置和實(shí)例化UserManager:
接下來，UserManager提供一個(gè)getUser API來獲取用戶是否登錄到JavaScript應(yīng)用程序。返回的User對(duì)象有一個(gè)profile屬性，其中包含用戶的聲明。添加此代碼以檢測(cè)用戶是否登錄到JavaScript應(yīng)用程序:
接下來，我們要實(shí)現(xiàn)登錄、api和注銷功能。UserManager提供登錄用戶的signinRedirect和用戶登出的signoutRedirect。我們?cè)谏鲜龃a中獲得的用戶對(duì)象還有一個(gè)access_token屬性，可以使用該屬性對(duì)web API進(jìn)行身份驗(yàn)證。access_token將通過Bearer模式傳遞給Web API。添加以下代碼在我們的應(yīng)用程序中實(shí)現(xiàn)這三個(gè)功能:
（4）再新建一個(gè)callback.html。一旦用戶登錄到IdentityServer，這個(gè)HTML文件就是指定的redirect_uri頁面。它將完成OpenID Connect協(xié)議與IdentityServer的登錄握手。這里的代碼都由我們前面使用的UserManager類提供。登錄完成后，我們可以將用戶重定向回index.html頁面。添加此代碼完成登錄過程:
（8）修改服務(wù)端口為5003
?
三、修改授權(quán)服務(wù)配置，資源服務(wù)器允許跨域調(diào)用API
（1）修改授權(quán)服務(wù)配置
在AuthServer項(xiàng)目，打開Config.cs文件，在GetClients中添加JavaScript客戶端配置
（2）在資源服務(wù)配置允許跨域調(diào)用api
在ResourceAPI項(xiàng)目，打開Startup.cs文件中的ConfigureServices方法，配置CORS，允許Ajax調(diào)用從http://localhost:5003調(diào)用http://localhost:5001的Web API。
在Configure方法中將CORS中間件添加到管道中
//JS-Add the CORS middleware to the pipeline in Configure:app.UseCors("default");（3）添加測(cè)試用的api接口
添加IdentityController控制器
（4）測(cè)試
運(yùn)行AuthServer項(xiàng)目，運(yùn)行ResourceAPI項(xiàng)目。
在VSCode終端輸入：npm start
打開瀏覽器：http://localhost:5003/
點(diǎn)擊Login，使用賬號(hào):zhubingjian 密碼:123? 登錄
登錄返回用戶的Claims信息
點(diǎn)擊Call API，調(diào)用資源服務(wù)器的API接口
成功獲取接口返回的信息。
通過這六節(jié)的內(nèi)容，大概地介紹了IdentityServer4中Client的應(yīng)用場(chǎng)景，包括MVC、前后端分離和服務(wù)端。
此外還介紹了如何動(dòng)態(tài)配置Client、如何驗(yàn)證從數(shù)據(jù)庫(kù)中獲取的User以及自定義Claims的方法。
這個(gè)系列對(duì)IdentityServer4的介紹也是我博客的起點(diǎn)，寫博客雖然很花時(shí)間，但是可以幫助我加深對(duì)知識(shí)點(diǎn)的理解。然而文中也體現(xiàn)到我對(duì)某些知識(shí)點(diǎn)的理解還是不到位的，望大家見諒。
參考官網(wǎng)地址：https://identityserver4.readthedocs.io/en/release/quickstarts/7_javascript_client.html
授權(quán)服務(wù)和資源服務(wù)源碼地址：https://github.com/Bingjian-Zhu/Mvc-HybridFlow.git
JavaScript客戶端源碼地址：https://github.com/Bingjian-Zhu/Identity-JavaScript_Client.git
相關(guān)文章：
從Client應(yīng)用場(chǎng)景介紹IdentityServer4（一）
IdentityServer4-EF動(dòng)態(tài)配置Client和對(duì)Claims授權(quán)（二）
IdentityServer4-客戶端的授權(quán)模式原理分析（三）
IdentityServer4-MVC+Hybrid實(shí)現(xiàn)Claims授權(quán)驗(yàn)證（四）
IdentityServer4-從數(shù)據(jù)庫(kù)獲取User登錄并對(duì)Claims授權(quán)驗(yàn)證（五）
基于IdentityServer4 實(shí)現(xiàn).NET Core的認(rèn)證授權(quán)
IdentityServer4與ocelot實(shí)現(xiàn)認(rèn)證與客戶端統(tǒng)一入口
使用Dapper持久化IdentityServer4
原文地址:?https://www.cnblogs.com/FireworksEasyCool/p/10197620.html
.NET社區(qū)新聞，深度好文，歡迎訪問公眾號(hào)文章匯總 http://www.csharpkit.com
總結(jié)
以上是生活随笔為你收集整理的IdentityServer4-前后端分离的授权验证（六）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于.NET Standard的分布式自
- 下一篇： 软件开发模式：瀑布与敏捷