[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)

  • 时间:
  • 浏览:3

浏览器会重定向到登录页面,有些人儿登录一下,登录成功都不 跳转里面所填写的redriect_uri参数指定的URL,并使用URL的#次要携带认证后的信息:

读者能只能打开浏览器,先打开oidc-client-implicit.dev有些站点可是登录,可是再打开oidc-client-js.dev有些站点的之后,就会发现它会自动的登录成功了。

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

有些地址checksession的地址是oidc-server.dev的地址,没办法 有些地址返回的html页面中,就能只能通过js来检查去存储在cookie中的session信息的算是 处于变化。可是通过H5中新增的postMessage来把有些变化传递给js client这边。js client再去检查一下算是 机会登出了。机会机会登出,则会清理自身的登录清况 来完成被动的登出操作。

这里相比上一篇中返回的信息多了五个 多access_token是机会有些人儿的认证请求的response_type设置为了“id_token token”,故而oidc-server.dev把id_token和access_token一同给到了客户端。

在上一篇基于OIDC的SSO的中涉及到了五个 多Web站点:

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

oidc-client-js.dev有些web站点对应的代码处于web.oidc.client.js有些文件夹中(https://github.com/linianhui/oidc.example/tree/master/src/web.oidc.client.js):

其中登录后用户的信息保处于浏览器的SessionStorage中:

认证请求这里面包含的参数和上篇中的信息并没办法 那此差别,这里就不介绍了。

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

前面提到JS Client会加载五个 多oidc-server.dev/account/js的JS脚本文件,有些是我另一方扩展出来的五个 多脚本。它会在有些纯静态的网站在一现在现在刚开始 打开的之后告诉客户端oidc-server.dev算是 机会登录了。

退出操作和有些类型的客户端一致,也是先清理另一方保存的Session Storage,可是通知oidc-server.dev进行登出,这里就不全版解释了。

比如下图。我再oidc-client-implicit.dev点击登出的之后,会触发oidc-server.dev清理另一方的cookie,可是js-client中使用check_session_iframe有些隐藏的iframe能只能检测到有些变化,从而使得js-client能只能得知用户机会再有些的client退出登录。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意还要保留此段声明,且在文章页面明显位置给出原文连接,可是保留追究法律责任的权利。

能只能看得人Client这边在对oidc-server.dev有些站点发起了五个 多请求之后就直接构造了五个 多认证请求的URL,并交给浏览器去发起了请求。

可是静态的网站就能只能利用account有些变量来决定算是 再打开网站的之后就自动去登录(机会有些站点机会登陆过了,没办法 oidc-server.dev站点会自动携带登录后的信息的再次跳转回来)。

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

 本篇介绍了再浏览器中运行的纯静态的HTML网站使如何使用OIDC服务进行单点登录,统一登出,登录清况 监控,以及附加的如何让JS Client自动登录的原理。这里所使用的例子使传统的HTML+JS的特征。机会你使采用的Vue,Angular机会React的累似 前端框架语录,没办法 其本质上的原理也是全版一样的,机会不管使采用的那此框架,最终输出给浏览器的还是HTML+JS而已。

有些人儿知道在SSO中,除了自身主动退出登录之外,还有有些的Client退出的之后,这里的JS Client也要被动的登出。机会JS Client没办法 服务端在服务端执行代码的能力,其登录清况 也是保处于客户端这边的,没办法 它就没最好的依据接收像有些的客户端一样接收到登出的通知了。有些之后就还要客户端另一方主动去oidc-server.dev检查登录清况 了。有些次要在OIDC中都不 标准规范,体现在OIDC的Discovery服务中的check_session_iframe字段中。

有些人儿知道在浏览器中的JS是能只能直接进行页面跳转的,oidc的js客户端可是利用有些来直接构造认证请求的URL,可是进行登录跳转的(有些人儿这里使用的是oidc-client.js有些开源的js库来处理oidc规范相关的一下操作的)。下图是打开oidc-client-js.dev后的页面:

其中hybrid和implicit有些个多站点都不 具有在服务端执行代码的能力的(1,登录还要在服务端做跳转;2,登录清况 写入cookie;3,通过服务端的接口接收被动的退出通知)。而js有些客户端则是五个 多纯粹的静态网站,没办法 它是如何处理登录和退出的呢?

有些人儿点击下Login。