IdentityServer4-前后端分离的授权验证(六)
上两节介绍完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-前后端分离的授权验证(六)相关推荐
- Springboot Spring Security +Jwt+redis+mybatisPlus 动态完成 前后端分离认证授权
Springboot Spring Security +Jwt 动态完成 前后端分离认证授权 文章目录 Springboot Spring Security +Jwt 动态完成 前后端分离认证授权 前 ...
- 前后端分离之权限验证
前后端分离之权限验证 原理:将登录验证的请求头中后端生成的秘钥(token)接收后存储在cookie内,在再次请求数据时添加在请求头中发送给后端验证,请求数据. 代码: 登录ajax: $scope. ...
- 前后端分离的用户验证原理及Spring Boot + JWT的框架搭建(附完整的框架代码)之二
本篇承接上一篇,关于Session以及JWT Token参考: 前后端分离的用户验证原理及Spring Boot + JWT的框架搭建(附完整的框架代码)之一 框架整体描述 框架使用Spring Bo ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
- SSM+JWT实现前后端分离的token验证
SSM+JWT实现前后端分离的token验证 前言 什么是JWT 基于Token的验证流程 JWT的Token实现 后端部分 前端部分 测试 项目完整地址 前言 以前写的web项目都是没有前后端分离的 ...
- spring security 前后端分离 进行用户验证 权限登陆的实现代码(看不懂??直接cv)
目录 目录 前言: 一.所需依赖 二.application.properties 三.工具类 3.1ApplicationContextUtils 3.2JwtUtils 3.3ResponseRe ...
- SpringBoot2.0.3 + SpringSecurity5.0.6 + vue 前后端分离认证授权
新项目引入安全控制 项目中新近添加了Spring Security安全组件,前期没怎么用过,加之新版本少有参考,踩坑四天,终完成初步解决方案.其实很简单,Spring Security5相比之前版本少 ...
- 前后端分离的用户验证原理及Spring Boot + JWT的框架搭建(附完整的框架代码)之一
Java Web项目开发方式 Java Web的开发有以下几种: 单纯JSP开发 结合模板引擎的JSP开发(比如Thymeleaf),模板引擎提供了更多页面和数据结合的组件,很大程度减轻了页面开发的工 ...
- java不同项目加token访问_利用JWT实现前后端分离的Token验证
写在前面:本篇文章的代码图片展示均使用carbon绘制,图片质量很高,如果图片过小可以点击查看原图.项目实例前端部分使用基于Angular的Ionic框架(TypeScript),使用Spring B ...
最新文章
- C++ 拷贝构造函数和重载赋值运算符的区别
- URL编码以及GET和POST提交乱码解决方案
- yii2.0验签组件(jwt)
- php5ts.dll 注册码,修复php5ts.dll
- Pytorch中图像预处理相关函数
- 乾坤大挪移:SAP CRM WebClient UI 和 SAP Fiori UI 混搭并存
- ajax修改按钮的html值,ajax - 在yii 1中使用ajax根据选定的单选按钮选项更新html字段值 - 堆栈内存溢出...
- ftp 追加远程文件_远程办公彻底火了,高效办公,拒绝卡顿,远程利器你选对了么?...
- CLOUD信用管理设置
- 【hive】如何设置hive以及MapReduce的压缩方式?
- C# Task 循环任务_taroco-scheduler 分布式定时任务调度
- 最常用的Linux命令大全
- 我认知的 DevOps 核心价值
- 货币等额换算_换算单位和货币的最佳免费程序和网站
- 计算机试题ab级,计算机等级考试一级模拟试题及答案(2套)
- 借助Granimjs制作绚丽的流体动画
- 西部世界科普时间:FIL将从4月15日开始减产? 谣言!
- Pytorch:基于转置卷积解码的卷积自编码网络
- rpm mysql 忘记密码_centos7 yum安装mysql5.7并在root密码忘记的情况下重设密码
- AP_应付税务预扣税Withholding Tax中付款时产生预扣税(案例)
热门文章
- web前端工程师热门岗位技能要求前瞻
- 实现CSS在线美化(格式化)、压缩、加密、解密、混淆工具-toolfk程序员工具网
- 阿里云如何实现海量短视频的极速分发?答案在这里!
- 基于scikit-learn机器学习库的分类预测
- 创建 overlay 网络 - 每天5分钟玩转 Docker 容器技术(50)
- illegal multibyte sequence python3
- 关于WannaCry勒索病毒 你需要知道的8个问题
- oslo.config资源
- python3 UnicodeEncodeError: 'ascii' 错误
- 做移动互联网App,你的测试用例足够吗?