基于OIDC(OpenID Connect)的SSO(纯JS客户端)
在上一篇基于OIDC的SSO的中涉及到了4个Web站点:
oidc-server.dev:利用oidc实现的统一认证和授权中心,SSO站点。
oidc-client-hybrid.dev:oidc的一个客户端,采用hybrid模式。
oidc-client-implicit.dev:odic的另一个客户端,采用implicit模式。
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,并交给浏览器去发起了请求。
/account/js:我自己扩展的,后面介绍其用途,目前暂时忽略它。
/.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
基于OIDC(OpenID Connect)的SSO(纯JS客户端)相关推荐
- jws webservice 跳过https认证_基于OAuth2的OIDC (OpenId Connect)身份认证
OIDC协议 OIDC(OpenID Connect)是在OAuth2上构建了一个身份层,是一个基于OAuth2协议的身份认证标准协议. OAuth2协议 OAuth2是一个授权协议,它无法提供完善的 ...
- 基于OIDC实现单点登录SSO、第三方登录
OIDC联合身份认证机制 背景概念 1 OIDC身份认证协议 2 基于OIDC实现SSO 2.1 统一登录 2.1.1 流程 2.1.2 RP相关接口 2.1.3 OP相关接口 2.2 统一登出 2. ...
- 使用OAuth 2 / OpenID Connect的SSO的Spring Boot 2本机方法
这篇文章是3篇系列文章的最后一部分,该系列文章探讨了如何为基于Spring Boot 2的应用程序启用OAuth2提供程序SSO. 3个帖子是: 引导兼容OpenID Connect的OAuth2授权 ...
- IdentityServer4 实现 OpenID Connect 和 OAuth 2.0
关于 OAuth 2.0 的相关内容,点击查看:ASP.NET WebApi OWIN 实现 OAuth 2.0 OpenID 是一个去中心化的网上身份认证系统.对于支持 OpenID 的网站,用户不 ...
- OpenID Connect:OAuth 2.0协议之上的简单身份层
OpenID Connect是什么?OpenID Connect(目前版本是1.0)是OAuth 2.0协议(可参考本人此篇:OAuth 2.0 / RCF6749 协议解读)之上的简单身份层,用 A ...
- 微服务openid等_使用OpenID Connect在Quarkus中保护微服务
微服务openid等 This is the fourth part in a series on building a microservice from the ground up with Qu ...
- 基于OIDC(OpenID Connect)的SSO
在[认证授权]系列博客中,分别对OAuth2和OIDC在理论概念方面进行了解释说明,其间虽然我有写过一个完整的示例(https://github.com/linianhui/oidc.example) ...
- [认证授权] 5.OIDC(OpenId Connect)身份认证授权(扩展部分)
[认证授权] 5.OIDC(OpenId Connect)身份认证授权(扩展部分) 原文:[认证授权] 5.OIDC(OpenId Connect)身份认证授权(扩展部分) 在上一篇[认证授权] 4. ...
- OIDC(OpenId Connect)身份认证
1 什么是OIDC? 看一下官方的介绍(http://openid.net/connect/): OpenID Connect 1.0 is a simple identity layer on to ...
最新文章
- IDEA IntelliJ/ DataGrip 修改自动补全快捷键
- JavaScript 异步编程--Generator函数、async、await
- Python-EEG工具库MNE中文教程(2)-MNE中数据结构Epoch及其创建方法
- we自动化po模式_Web自动化测试—PO设计模式(一)
- cad缩放_CAD两种缩放技巧,你喜欢那个?
- Python 抓取钢铁价格 ==> 计算季度平均价格
- linux 8t的硬盘格式化,linux 新添加的硬盘格式化并挂载到目录下
- CoAP协议学习——CoAP基础
- 诺基亚NBU备份文件名片导出程序 vCard助手
- vue项目引入并使用svg格式图标文件
- 如何将图片转换、合并为PDF文件?
- 微信小程序-天气预报1.0版本
- idea中vue文件 游览器图标_vue项目中icon图标的完美引入
- Arrays类——Arrays.asList()方法使用
- 连不上虚拟机的mysql_主机连不上虚拟机数据库
- 甲虫之王怀旧服新开的服务器是否自动开门,魔兽世界怀旧服:不刷虫皮也能当甲虫之王,钻漏洞可量产黑虫子...
- Laravel 使用视图合成器 view composer 实现视图变量共享
- VVC代码阅读 xCheckModeSplit()函数 (中间CABAC还没看)最后代码还没看完
- matlab频谱校正方法,离散频谱的比值校正法
- Matlab转Python问题之二维数组单索引寻值
热门文章
- 知物由学 | 干货!一文了解安卓APP逆向分析与保护机制
- 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
- 限制nginx仅能域名访问,不可用ip访问
- 【转】《从入门到精通云服务器》第六讲—OpenStack基础
- oracle用户名密码过期引起的网站后台无法登录
- TinyUI组件开发示例
- Task.Factory.StartNew 和 Task.Run 到底有什么区别?
- 可能是.NET领域性能最好的对象映射框架——Mapster
- NodeJs .net core connect Azure service bus
- 正式发布!Azure Functions OpenAPI Extension