基于OIDC（OpenID Connect）的SSO（纯JS客户端）

在上一篇基于OIDC的SSO的中涉及到了4个Web站点：

  1. oidc-server.dev：利用oidc实现的统一认证和授权中心，SSO站点。

  2. oidc-client-hybrid.dev：oidc的一个客户端，采用hybrid模式。

  3. oidc-client-implicit.dev：odic的另一个客户端，采用implicit模式。

  4. oidc-client-js.dev：oidc的又一个客户端，采用implicit模式，纯静态网站，只有js和html，无服务端代码。

其中hybrid和implicit这两个站点都是具有在服务端执行代码的能力的（1，登录需要在服务端做跳转；2，登录状态写入cookie；3，通过服务端的接口接收被动的退出通知）。而js这个客户端则是一个纯粹的静态网站，那么它是如何处理登录和退出的呢？

oidc-client-js.dev这个web站点对应的代码位于web.oidc.client.js这个文件夹中（https://github.com/linianhui/oidc.example/tree/master/src/web.oidc.client.js）：

JS Client 登录

我们知道在浏览器中的JS是可以直接进行页面跳转的，oidc的js客户端就是利用这个来直接构造认证请求的URL，然后进行登录跳转的（我们这里使用的是oidc-client.js这个开源的js库来处理oidc规范相关的一下操作的）。下图是打开oidc-client-js.dev后的页面：

JS Client 直接发起认证请求

我们点击下Login。

可以看到Client这边在对oidc-server.dev这个站点发起了2个请求之后就直接构造了一个认证请求的URL，并交给浏览器去发起了请求。

  1. /account/js：我自己扩展的，后面介绍其用途，目前暂时忽略它。

  2. /.well-known/openid-configuration：这个是之前介绍到的OIDC提供的Discovery服务，Client需要从这个服务返回的JSON中获取认证请求的接口地址以及其他的信息。

认证请求这里面包含的参数和上篇中的信息并没有什么差别，这里就不介绍了。

OIDC-Server 通过URL的#把数据传递给JS Client

浏览器会重定向到登录页面，我们登录一下，登录成功后会跳转上面所填写的redriect_uri参数指定的URL，并使用URL的#部分携带认证后的信息：

http://oidc-client-js.dev/oidc/login-callback.html#id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6ImI2MmE2YTVlZjNiNGJmOTlhNWU3M2FkZmI1OTQ3NjRjIiwidHlwIjoiSldUIn0.eyJuYmYiOjE1MTE3NTEyMjgsImV4cCI6MTUxMTc1MTUyOCwiaXNzIjoiaHR0cDovL29pZGMtc2VydmVyLmRldiIsImF1ZCI6ImpzLWNsaWVudCIsIm5vbmNlIjoiZGU5NGI1NGMzNDk1NGFjMjg0Y2I0NzlhY2M5ZGMxMjMiLCJpYXQiOjE1MTE3NTEyMjgsImF0X2hhc2giOiJ1QnJhckVLOHk4elhwR0pJOG1BaE1nIiwic2lkIjoiMWQ2ZWQwYWI0ZjdhNzI2MDUxMzBiYjBkYjNiOTdkY2MiLCJzdWIiOiIwMDAwMDEiLCJhdXRoX3RpbWUiOjE1MTE3NTEyMjgsImlkcCI6ImxvY2FsIiwiYW1yIjpbImV4dGVybmFsIl19.EUMT0R34OKDuE8AESEnRAASoRCP2NCAy7EEkMdM9vBwfz8BGnrCGXiDnKoUgbw3qK8ekoiwhSed6qE-Xh5QqnnwQTOc_D0nucbA3CVqKDhc9TFonEHoU60ETbX0i70bbOThZeoJdto9CkILbcewk2SLgfCQXZzsKERm6AS7m9LUN7cGjQJQm6Ht5DpIgjFu7s9V7qnUfu7hjvI51zPmYgJwLtvCXb9vAxXy17oBrVTmYunDLETRnfj9UXcsSROOW6Ac6sKSLOtFkY5ElZuIa5Za_1GJFDaoYyZwFT53WWBO9-LBdIHd8Cqx5fyw8tlpT3qmdwf0scSr256sVXykGQw&access_token=eyJhbGciOiJSUzI1NiIsImtpZCI6ImI2MmE2YTVlZjNiNGJmOTlhNWU3M2FkZmI1OTQ3NjRjIiwidHlwIjoiSldUIn0.eyJuYmYiOjE1MTE3NTEyMjgsImV4cCI6MTUxMTc1NDgyOCwiaXNzIjoiaHR0cDovL29pZGMtc2VydmVyLmRldiIsImF1ZCI6WyJodHRwOi8vb2lkYy1zZXJ2ZXIuZGV2L3Jlc291cmNlcyIsIm15LWFwaSJdLCJjbGllbnRfaWQiOiJqcy1jbGllbnQiLCJzdWIiOiIwMDAwMDEiLCJhdXRoX3RpbWUiOjE1MTE3NTEyMjgsImlkcCI6ImxvY2FsIiwic2NvcGUiOlsib3BlbmlkIiwicHJvZmlsZSIsIm15LWFwaSJdLCJhbXIiOlsiZXh0ZXJuYWwiXX0.BU65olTuhLSlyFHyRzSHKUaFw5v5qMg7qmutl3LCel0gtjD9ky9cyD3rUNNAkalVcHXg7znN_F2JB71ape9mSD_L66H8pTTwaiMTxbPz9_HMEz9w6GgmOrjMGP8unIpCOKom1DV4EiSQoDe8P30oh2mwmA5SLvZixlAln3_ycArTd7440SCUrUvnEa1CJyl-K-kkLvLyl3TRo6bDE-H47-AzHq1NtA22cwleVXNxUtOsMHk1Nsa2tOFW6B4t3fAvo_MWx2BFkJMBToy4ArepLXSaN5CQQxH8na1Havll3Ly3c9GOslNsm1krMvx9GYdFR6DgjoDvNbaVDkLdmO2T_w&token_type=Bearer&expires_in=3600&scope=openid%20profile%20my-api&state=96af404863044d49b6e14a5827862538&session_state=C33U-BpeYNeLhWhUuKLfup18cjKkKX54yCdL2fUOtV0.5ec877a6108fde6ad04e774a770d7ee1

这里相比上一篇中返回的信息多了一个access_token是因为我们的认证请求的response_type设置为了“id_token token”，故而oidc-server.dev把id_token和access_token一并给到了客户端。

JS Client 解析#中的数据，保存自己的登录状态

解析#后面的数据也是通过oidc-client.js 这个开源的库来实现的。解析后的数据呈现在页面上是如下这个样子。

其中登录后用户的信息保存在浏览器的SessionStorage中：

JS Client 主动登出

退出操作和其他类型的客户端一致，也是先清理自己保存的Session Storage，然后通知oidc-server.dev进行登出，这里就不详细解释了。

JS Client 被动登出

我们知道在SSO中，除了自身主动退出登录之外，还有其他的Client退出的时候，这里的JS Client也要被动的登出。由于JS Client没有服务端在服务端执行代码的能力，其登录状态也是保存在客户端这边的，那么它就没办法接收像其他的客户端一样接收到登出的通知了。这个时候就需要客户端自己主动去oidc-server.dev检查登录状态了。这一部分在OIDC中也有标准规范，体现在OIDC的Discovery服务中的check_session_iframe字段中。

这个地址checksession的地址是oidc-server.dev的地址，那么这个地址返回的html页面中，就可以通过js来检查去存储在cookie中的session信息的是否发生变化。然后通过H5中新增的postMessage来把这种变化传递给js client这边。js client再去检查一下是否已经登出了。如果已经登出，则会清理自身的登录状态来完成被动的登出操作。

比如下图。我再oidc-client-implicit.dev点击登出的时候，会触发oidc-server.dev清理自己的cookie，然后js-client中使用check_session_iframe这个隐藏的iframe可以检测到这种变化，从而使得js-client可以得知用户已经再其他的client退出登录。

自动登录

前面提到JS Client会加载一个oidc-server.dev/account/js的JS脚本文件，这个是我自己扩展出来的一个脚本。它会在这个纯静态的网站在一开使打开的时候告诉客户端oidc-server.dev是否已经登录了。

然后静态的网站就可以利用account这个变量来决定是否再打开网站的时候就自动去登录（由于其他站点已经登陆过了，那么oidc-server.dev站点会自动携带登录后的信息的再次跳转回来）。

读者可以打开浏览器，先打开oidc-client-implicit.dev这个站点并且登录，然后再打开oidc-client-js.dev这个站点的时候，就会发现它会自动的登录成功了。

总结

 本篇介绍了再浏览器中运行的纯静态的HTML网站使如何使用OIDC服务进行单点登录，统一登出，登录状态监控，以及附加的如何让JS Client自动登录的原理。这里所使用的例子使传统的HTML+JS的结构。如果你使采用的Vue，Angular或者React的这类前端框架的话，那么其本质上的原理也是完全一样的，因为不管使采用的什么框架，最终输出给浏览器的还是HTML+JS而已。

参考

本文源代码：https://github.com/linianhui/oidc.example

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

相关文章：

  • 基于OIDC（OpenID Connect）的SSO

  • 学习Identity Server 4的预备知识

  • 使用Identity Server 4建立Authorization Server (1)

  • 使用Identity Server 4建立Authorization Server (2)

  • 使用Identity Server 4建立Authorization Server (3)

  • 使用Identity Server 4建立Authorization Server (4)

  • 使用Identity Server 4建立Authorization Server (5)

  • 使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

  • IdentityServer4（10）- 添加对外部认证的支持之QQ登录

原文：http://www.cnblogs.com/linianhui/p/oidc-in-action-sso-with-js-client.html

.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/322733.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mybatis源码阅读(七) ---ResultSetHandler了解一下

mybatis源码阅读(七) ---ResultSetHandler了解一下

转载自 mybatis源码阅读(七) ---ResultSetHandler了解一下 1、MetaObject MetaObject用于反射创建对象、反射从对象中获取属性值、反射给对象设置属性值，参数设置和结果封装，用的都是这个MetaObject提供的功能。 public static MetaObject forObject…
阅读更多...
nssl1299-选做作业【最大流,最小割,最大子权闭合图】

nssl1299-选做作业【最大流,最小割,最大子权闭合图】

正题 题目大意 有nnn个任务，完成需要先决条件，然后有完成价值。选择一些任务完成，求最大价值。 解题思路 首先，如果有环，那么这些环是不可能完成的。所以先用拓扑排序找环。 然后考虑最大子权闭合图，对于…
阅读更多...
IIS中的 Asp.Net Core 和 dotnet watch

IIS中的 Asp.Net Core 和 dotnet watch

在基于传统的.NET Framework的Asp.Net Mvc的时候，本地开发环境中可以在IIS中建立一个站点，可以直接把站点的目录指向asp.net mvc的项目的根目录。然后build一下就可以在浏览器里面刷新到最新的修改了，也可以附加到w3wp的进程进行调试。但是在…
阅读更多...
mybatis源码阅读(八) ---Interceptor了解一下

mybatis源码阅读(八) ---Interceptor了解一下

转载自 mybatis源码阅读(八) ---Interceptor了解一下 1 Intercetor MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用。默认情况下，MyBatis允许使用插件来拦截的方法调用包括： Executor (update, query, flushStatements, commit, rollba…
阅读更多...
foreach方法使用

foreach方法使用

用法 foreach方法主要是针对数组而言的，对数组中的每个元素可以执行一次方法 var array [a, b, c, e]; array.forEach((a)> {console.log(a); });属性 foreach方法主要有三个参数，分别是数组内容、数组索引、整个数组 var array [a, b, c, e]; arra…
阅读更多...
ssl提高组周六模拟赛【2019.3.2】

ssl提高组周六模拟赛【2019.3.2】

前言 Rank1Rank1Rank1耶 成绩 RankRankRank是有算别人的 只放前Rank10Rank10Rank10 RankRankRankPersonPersonPersonScoreScoreScoreAAABBBCCCDDD111meselfmeselfmeself340340340808080100100100100100100606060222XXYXXYXXY250250250808080707070100100100000333LWLWLW2502502…
阅读更多...
.NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions

.NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions

.NET Core 控制台程序没有 ASP.NET Core 的 IWebHostBuilder 与 Startup.cs ，那要读 appsettings.json、注依赖、配日志、设 IOptions 该怎么办呢？因为这些操作与 ASP.NET Core 无依赖，所以可以自己动手，轻松搞定。 1、读 appsett…
阅读更多...
Object.keys方法拿到对象的key值

Object.keys方法拿到对象的key值

项目中的高级搜索选项用到了Object.keys方法， 那么它是用来干嘛的呢：删除某个子对象里的数据 var anObj { aaa: kejin,bbb: shenxian,ccc: yuanshan };let params {...anObj,ddd: luanwu } console.log(params) console.log(Object.keys(anObj)); // …
阅读更多...
jsdiff 比较文本内容差异

jsdiff 比较文本内容差异

翻译自 jsdiff JavaScript文本内容差异实现。 基于"An O(ND) Difference Algorithm and its Variations" (Myers, 1986) 中提出的算法 。 安装 npm install diff --save API Diff.diffChars(oldStr, newStr[, options]) -区分两个文本块，逐字符比较。…
阅读更多...
Net Core下多种ORM框架特性及性能对比

Net Core下多种ORM框架特性及性能对比

在.NET Framework下有许多ORM框架，最著名的无外乎是Entity Framework，它拥有悠久的历史以及便捷的语法，在占有率上一路领先。但随着Dapper的出现，它的地位受到了威胁，本文对比了在.NET Core下 两种框架的表现以及与原生…
阅读更多...
P3275-[SCOI2011]糖果【差分约束,负环】

P3275-[SCOI2011]糖果【差分约束,负环】

正题 题目大意:https://www.luogu.org/problemnew/show/P3275 题目大意 对于nnn个值&#xff0c;给出一系列不等式。求每个值的最小正整数。 解题思路 差分约束 codecodecode #include<cstdio> #include<queue> #include<cstring> #define MN 300005 usi…
阅读更多...
ssh免密登陆失败原因总结（Linux）

ssh免密登陆失败原因总结（Linux）

转载自 ssh免密登陆失败原因总结&#xff08;Linux&#xff09; 1. SSH公钥认证&#xff08;免密码&#xff09;配置 登录到本机服务器A&#xff0c;切换到响应的操作系统用户&#xff0c;执行命令&#xff0c;生成秘钥文件【按照提示直接回车】 ssh-keygen -t rsa 将公钥传送…
阅读更多...
FormData的使用

FormData的使用

声明 创造一个空对象 var formData new FormData();或者在里面放入一个表单 var form document.getElementById("kForm"); var formData new FormData(form);赋值 如果想在里面赋值&#xff0c;可以用append方法 添加&#xff1a; formData.append(k1,kejin)…
阅读更多...
从ThoughtWorks 2017技术雷达看微软技术

从ThoughtWorks 2017技术雷达看微软技术

ThoughtWorks在每年都会出品两期技术雷达&#xff0c;这是一份关于技术趋势的报告&#xff0c;它比起一些我们能在市面上见到的其他各种技术行情和预测报告&#xff0c;更加具体&#xff0c;更具可操作性&#xff0c;因为它不仅涉及到新技术大趋势&#xff0c;比如云平台和大数…
阅读更多...
Spark入门（一）单主standalone安装

Spark入门（一）单主standalone安装

一、集群安装条件前置 实验spark安装在【Hadoop入门&#xff08;二&#xff09;集群安装】机器上&#xff0c; 已完成安装jdk,hadoop和ssh、网络等配置环境等。 spark所依赖的虚拟机和操作系统配置 环境&#xff1a;ubuntu14 spark-2.4.4-bin-hadoop2.6jdk1.8ssh 虚拟机&a…
阅读更多...
POJ1201-Intervals【差分约束,负环,SPFA】

POJ1201-Intervals【差分约束,负环,SPFA】

正题 题目链接:http://poj.org/problem?id1201 题目大意 求一个最少数量的数字集合满足 在li∼ril_i\sim r_ili​∼ri​的范围的数字至少是cic_ici​个 解题思路 设sis_isi​表示0∼i0\sim i0∼i的范围内数字个数。然后其实条件就是sr−si≥cs_r-s_i\geq csr​−si​≥c。…
阅读更多...
laravel使用migrate操作数据库迁移

laravel使用migrate操作数据库迁移

数据库表单预创建 1、生成php文件 php artisan make:migration create_articles_table2、执行php文件操作数据库 php artisan migrate --force回滚上一个 php artisan migrate:rollback回滚初始状态 php artisan migrate:reset$table->increments(id); $table->strin…
阅读更多...
AutoMapper在asp.netcore中的使用

AutoMapper在asp.netcore中的使用

automapper 是.net 项目中针对模型之间转换映射的一个很好用的工具&#xff0c;不仅提高了开发的效率还使代码更加简洁&#xff0c;当然也是开源的&#xff0c;https://github.com/AutoMapper&#xff0c;这不多做介绍&#xff0c;详细看&#xff0c;官网下面是介绍它在 .net c…
阅读更多...
Hadoop生态Zookeeper安装

Hadoop生态Zookeeper安装

一、安装条件前置 实验zookeeper安装在【Hadoop入门&#xff08;二&#xff09;集群安装】机器上&#xff0c;已完成安装jdk,hadoop和ssh配置环境等。 zookeeper所依赖的虚拟机和操作系统配置 环境&#xff1a;ubuntu14 apache-zookeeper-3.5.6-bin.tar jdk1.8ssh 虚拟机…
阅读更多...
jzoj3054-祖孙询问【LCA】

jzoj3054-祖孙询问【LCA】

正题 题目大意 求两个点的祖孙关系。 解题思路 直接LCALCALCA&#xff0c;然后暴力判断。 codecodecode #include<cstdio> #include<algorithm> #include<queue> #include<cmath> #define N 41000 using namespace std; struct line{int to,next,w;…
阅读更多...
最新文章

Copyright @ 2022~2023