上兩節介紹完Hybrid模式在MVC下的使用，包括驗證從數據獲取的User和Claim對MVC的身份授權。本節將介紹Implicit模式在JavaScript應用程序中的使用，使用Node.js+Express構建JavaScript客戶端，實現前后端分離。本節授權服務和資源服務器基于第四和第五節。

---

?一、使用Node.js+Express搭建JavaScript客戶端

（1）首先需要Node.js環境

下載并安裝Node.js，官網下載地址：https://nodejs.org/en/?

輸入指令：node –v??檢測是否已安裝Node.js，已安裝會顯示安裝的Node.js版本

（2）安裝Express

打開cmd，輸入指令：npm install express-generator –g

輸入指令：express –h????已安裝express會顯示幫助文檔

（3）新建文件，創建JavaScript_Client應用程序

新建文件夾（在D盤新建Express文件夾），cmd進入該文件夾。

輸入：express JavaScript_Client???? 在當前目錄下創建一個名為JavaScript_Client的應用。目錄結構如下：

（4）安裝依賴包

輸入：cd JavaScript_Client?? 進入JavaScript_Client目錄

輸入：npm install?? 安裝依賴包

（5）啟動并測試項目

輸入：npm start

瀏覽器打開：http://localhost:3000?

看到以下頁面證明成功了。

---

?

二、添加JavaScript客戶端測試代碼

（1）安裝oidc-client庫

輸入：npm install oidc-client –save

我們會發現在D:\express\JavaScript_Client\node_modules\oidc-client\dist? 有兩個js文件

我們只需使用這兩個文件。把這兩個文件復制到D:\express\JavaScript_Client\public\ javascripts 目錄下

（2）添加測試用的HTML文件

使用VSCode打開JavaScript_Client文件夾，在public（D:\express\JavaScript_Client\public）下新建index.html文件。添加幾個測試用的按鈕。

（3）添加測試的js文件

在public下新建app.js文件。

黏貼以下代碼

以下對app.js代碼進行分析

App.js中log函數用來記錄消息

使用oidc-client庫中的UserManager類來管理OpenID連接協議。添加此代碼以配置和實例化UserManager:

接下來，UserManager提供一個getUser API來獲取用戶是否登錄到JavaScript應用程序。返回的User對象有一個profile屬性，其中包含用戶的聲明。添加此代碼以檢測用戶是否登錄到JavaScript應用程序:

接下來，我們要實現登錄、api和注銷功能。UserManager提供登錄用戶的signinRedirect和用戶登出的signoutRedirect。我們在上述代碼中獲得的用戶對象還有一個access_token屬性，可以使用該屬性對web API進行身份驗證。access_token將通過Bearer模式傳遞給Web API。添加以下代碼在我們的應用程序中實現這三個功能:

（4）再新建一個callback.html。一旦用戶登錄到IdentityServer，這個HTML文件就是指定的redirect_uri頁面。它將完成OpenID Connect協議與IdentityServer的登錄握手。這里的代碼都由我們前面使用的UserManager類提供。登錄完成后，我們可以將用戶重定向回index.html頁面。添加此代碼完成登錄過程:

（8）修改服務端口為5003

---

?

三、修改授權服務配置，資源服務器允許跨域調用API

（1）修改授權服務配置

在AuthServer項目，打開Config.cs文件，在GetClients中添加JavaScript客戶端配置

（2）在資源服務配置允許跨域調用api

在ResourceAPI項目，打開Startup.cs文件中的ConfigureServices方法，配置CORS，允許Ajax調用從http://localhost:5003調用http://localhost:5001的Web API。

在Configure方法中將CORS中間件添加到管道中

//JS-Add the CORS middleware to the pipeline in Configure:app.UseCors("default");

（3）添加測試用的api接口

添加IdentityController控制器

（4）測試

運行AuthServer項目，運行ResourceAPI項目。

在VSCode終端輸入：npm start

打開瀏覽器：http://localhost:5003/

點擊Login，使用賬號:zhubingjian 密碼:123? 登錄

登錄返回用戶的Claims信息

點擊Call API，調用資源服務器的API接口

成功獲取接口返回的信息。

---

通過這六節的內容，大概地介紹了IdentityServer4中Client的應用場景，包括MVC、前后端分離和服務端。

此外還介紹了如何動態配置Client、如何驗證從數據庫中獲取的User以及自定義Claims的方法。

這個系列對IdentityServer4的介紹也是我博客的起點，寫博客雖然很花時間，但是可以幫助我加深對知識點的理解。然而文中也體現到我對某些知識點的理解還是不到位的，望大家見諒。

參考官網地址：https://identityserver4.readthedocs.io/en/release/quickstarts/7_javascript_client.html

授權服務和資源服務源碼地址：https://github.com/Bingjian-Zhu/Mvc-HybridFlow.git

JavaScript客戶端源碼地址：https://github.com/Bingjian-Zhu/Identity-JavaScript_Client.git

相關文章：

• 從Client應用場景介紹IdentityServer4（一）

• IdentityServer4-EF動態配置Client和對Claims授權（二）

• IdentityServer4-客戶端的授權模式原理分析（三）

• IdentityServer4-MVC+Hybrid實現Claims授權驗證（四）

• IdentityServer4-從數據庫獲取User登錄并對Claims授權驗證（五）

• 基于IdentityServer4 實現.NET Core的認證授權

• IdentityServer4與ocelot實現認證與客戶端統一入口

• 使用Dapper持久化IdentityServer4

原文地址:?https://www.cnblogs.com/FireworksEasyCool/p/10197620.html

.NET社區新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結

以上是生活随笔為你收集整理的IdentityServer4-前后端分离的授权验证（六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。