服务器端授权验证,IdentityServer4-前后端分离的授权验证（六）

不念不忘少年蓝@ 2022-08-29 10:19 215阅读 0赞

上两节介绍完Hybrid模式在MVC下的使用，包括验证从数据获取的User和Claim对MVC的身份授权。本节将介绍Implicit模式在Java应用程序中的使用，使用Node.js+Express构建Java客户端，实现前后端分离。本节授权服务和资源服务器基于第四和第五节。

一、使用Node.js+Express搭建Java客户端

(1)首先需要Node.js环境

下载并安装Node.js，官网下载地址：https://nodejs.org/en/

输入指令：node –v检测是否已安装Node.js，已安装会显示安装的Node.js版本

![e4a4ef3908ebc50ef2ec13a5a15f1493.png][]

(2)安装Express

打开cmd，输入指令：npm install express-generator –g

输入指令：express –h已安装express会显示帮助文档

![73dc6e905845377efaf80b056617ef1f.png][]

(3)新建文件，创建Java\_Client应用程序

新建文件夹(在D盘新建Express文件夹)，cmd进入该文件夹。

输入：express Java\_Client在当前目录下创建一个名为Java\_Client的应用。目录结构如下：

![b59e974c5fde6b7c4f96b47981bb41b7.png][]

(4)安装依赖包

输入：cd Java\_Client进入Java\_Client目录

输入：npm install安装依赖包

![b0f97da07632de4aac4de5dacab44f50.png][]

(5)启动并测试项目

输入：npm start

![c175f3e20b807123007eb4d45a7c3332.png][]

浏览器打开：http://localhost:3000

看到以下页面证明成功了。

![a23ce5d0993e582e93541ebfd5cdff34.png][]

二、添加Java客户端测试代码

(1)安装oidc-client库

输入：npm install oidc-client –save

我们会发现在D:expressJava\_Clientnode\_modulesoidc-clientdist 有两个js文件

![4f12ea11840996217aff4545ca3184b1.png][]

我们只需使用这两个文件。把这两个文件复制到D:expressJava\_Clientpublic javas 目录下

(2)添加测试用的HTML文件

使用VSCode打开Java\_Client文件夹，在public(D:expressJava\_Clientpublic)下新建index.html文件。添加几个测试用的按钮。

![57c0594fb3101f8aec60828436e6527f.png][]

(3)添加测试的js文件

在public下新建app.js文件。

黏贴以下代码

![d36aabb059345ebc4fc98f05e2e3249a.png][]

![655c4f583970621fa95b625c33303f0e.png][]

以下对app.js代码进行分析

App.js中log函数用来记录消息

![0da78cbc24dc10b12339895aa4e27034.png][]

使用oidc-client库中的UserManager类来管理OpenID连接协议。添加此代码以配置和实例化UserManager:

![5859aaa5c1e817f52113a0b001d7c878.png][]

接下来，UserManager提供一个getUser API来获取用户是否登录到Java应用程序。返回的User对象有一个profile属性，其中包含用户的声明。添加此代码以检测用户是否登录到Java应用程序:

![7571b924edfab1a162054eb74778168c.png][]

接下来，我们要实现登录、api和注销功能。UserManager提供登录用户的signinRedirect和用户登出的signoutRedirect。我们在上述代码中获得的用户对象还有一个access\_token属性，可以使用该属性对web API进行身份验证。access\_token将通过Bearer模式传递给Web API。添加以下代码在我们的应用程序中实现这三个功能:

![9aa126035cfd642e904085b860b68506.png][]

(4)再新建一个callback.html。一旦用户登录到IdentityServer，这个HTML文件就是指定的redirect\_uri页面。它将完成OpenID Connect协议与IdentityServer的登录握手。这里的代码都由我们前面使用的UserManager类提供。登录完成后，我们可以将用户重定向回index.html页面。添加此代码完成登录过程:

![c426000e5d56811587ae0dcfdbfa42d7.png][]

![057ab889fa7ebbdfa846ad22ccdd1da8.png][]

(8)修改服务端口为5003

![721d5041ccafd453dc2adacceb4a4dc8.png][]

三、修改授权服务配置，资源服务器允许跨域调用API

(1)修改授权服务配置

在AuthServer项目，打开Config.cs文件，在GetClients中添加Java客户端配置

![2ec40c78f366c7b98c6650397d9fa8b0.png][]

(2)在资源服务配置允许跨域调用api

在ResourceAPI项目，打开Startup.cs文件中的ConfigureServices方法，配置CORS，允许Ajax调用从http://localhost:5003调用http://localhost:5001的Web API。

![782294b7f0d41846ce6684961f13e8a4.png][]

![624d42c21f237137e1578fd2b5998318.png][]

在Configure方法中将CORS中间件添加到管道中

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

(3)添加测试用的api接口

添加IdentityController控制器

![82e5a2b4c0b366e4677c3feba26770a1.png][]

(4)测试

运行AuthServer项目，运行ResourceAPI项目。

在VSCode终端输入：npm start

![39ee1440bf832a5a74558e86c724c37d.png][]

打开浏览器：http://localhost:5003/

![7168a4526badf03d65852f287d38be2f.png][]

点击Login，使用账号:zhubingjian 密码:123 登录

![38046cd13f24e2d2334cbe1b7e69f2b5.png][]

登录返回用户的Claims信息

![bbebc142c1b09c99d9c68bcf87642aba.png][]

点击Call API，调用资源服务器的API接口

![f52fbda967351555e1591efd9ff1e29b.png][]

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

通过这六节的内容，大概地介绍了IdentityServer4中Client的应用场景，包括MVC、前后端分离和服务端。

此外还介绍了如何动态配置Client、如何验证从数据库中获取的User以及自定义Claims的方法。

这个系列对IdentityServer4的介绍也是我博客的起点，写博客虽然很花时间，但是可以帮助我加深对知识点的理解。然而文中也体现到我对某些知识点的理解还是不到位的，望大家见谅。

参考官网地址：https://identityserver4.readthedocs.io/en/release/quickstarts/7\_java\_client.html

授权服务和资源服务源码地址：https://github.com/Bingjian-Zhu/Mvc-HybridFlow.git

Java客户端源码地址：https://github.com/Bingjian-Zhu/Identity-Java\_Client.git

[e4a4ef3908ebc50ef2ec13a5a15f1493.png]: /images/20220829/caf2d32bc503410cacab3cae88252e8e.png
[73dc6e905845377efaf80b056617ef1f.png]: /images/20220829/60a374c74cd041aabe5d879fc9d2cf84.png
[b59e974c5fde6b7c4f96b47981bb41b7.png]: /images/20220829/de8c30201e8a4279ad486876c0e68600.png
[b0f97da07632de4aac4de5dacab44f50.png]: /images/20220829/20bedfd6deec411292b7cc3f7ebd891a.png
[c175f3e20b807123007eb4d45a7c3332.png]: /images/20220829/c0c34b72ffac45bf8840e6b9c929065a.png
[a23ce5d0993e582e93541ebfd5cdff34.png]: /images/20220829/3fe4ec0fade14f049ea87f0d8da97f60.png
[4f12ea11840996217aff4545ca3184b1.png]: /images/20220829/b40b713da4614561a5a5236037014242.png
[57c0594fb3101f8aec60828436e6527f.png]: /images/20220829/3771ea1f15d04edd8d719834624c3170.png
[d36aabb059345ebc4fc98f05e2e3249a.png]: /images/20220829/78314b6c7b8d40c6835aae8b9ada749f.png
[655c4f583970621fa95b625c33303f0e.png]: /images/20220829/bd6ce324d0ad4b12a63a71e414bf5fb4.png
[0da78cbc24dc10b12339895aa4e27034.png]: /images/20220829/549380dda43049b280ac9b645bbc1304.png
[5859aaa5c1e817f52113a0b001d7c878.png]: /images/20220829/5ddd5c40b5d54f3199587d70d54e599a.png
[7571b924edfab1a162054eb74778168c.png]: /images/20220829/3dcba413efdc4e1c84969f5c1a4625df.png
[9aa126035cfd642e904085b860b68506.png]: /images/20220829/156b903484344c5ea9d356103f5be7df.png
[c426000e5d56811587ae0dcfdbfa42d7.png]: /images/20220829/1747bb1eecc84a89b67f98411e7bda8a.png
[057ab889fa7ebbdfa846ad22ccdd1da8.png]: /images/20220829/be15b6e2ec5f4d4ab9f359d7ce63c1c9.png
[721d5041ccafd453dc2adacceb4a4dc8.png]: /images/20220829/40aa456fc4e0418d8f979fc9d88f3e8f.png
[2ec40c78f366c7b98c6650397d9fa8b0.png]: /images/20220829/97cffd463b3e4b4fb68e7b5bd74f1808.png
[782294b7f0d41846ce6684961f13e8a4.png]: /images/20220829/0e5a4b26e62b4288942d415195dd7ea2.png
[624d42c21f237137e1578fd2b5998318.png]: /images/20220829/01fa695ed2df4fa39c3a5057beab6d68.png
[82e5a2b4c0b366e4677c3feba26770a1.png]: /images/20220829/beee2e30fc5d4cddaddaa5828a32ee5f.png
[39ee1440bf832a5a74558e86c724c37d.png]: /images/20220829/c879c848e03d4daa890af926b3a866f2.png
[7168a4526badf03d65852f287d38be2f.png]: /images/20220829/4505b2f4c92a4fdfa87ded07a2714160.png
[38046cd13f24e2d2334cbe1b7e69f2b5.png]: /images/20220829/b9de4bf436884c2f8925adce208a7dfd.png
[bbebc142c1b09c99d9c68bcf87642aba.png]: /images/20220829/cc7e9ebb37a94e28a7b22ac05a393240.png
[f52fbda967351555e1591efd9ff1e29b.png]: /images/20220829/d237bf339dec4e9c9bfef42f31ab93ef.png