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

  • 时间:
  • 浏览:2

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

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

大家点击下Login。

这个地址checksession的地址是oidc-server.dev的地址,没人这个地址返回的html页面中,就都前要通过js来检查去存储在cookie中的session信息的否有占据 变化。这个通过H5中新增的postMessage来把这个变化传递给js client这边。js client再去检查一下否有机会登出了。机会机会登出,则会清理自身的登录情況来完成被动的登出操作。

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

这个静态的网站就都前要利用account这个变量来决定否有再打开网站的过后就自动去登录(机会这个站点机会登陆过了,没人oidc-server.dev站点会自动携带登录后的信息的再次跳转回来)。

都前要看过Client这边在对oidc-server.dev这个站点发起了5个请求过后就直接构造了5个认证请求的URL,并交给浏览器去发起了请求。

认证请求这里面蕴含的参数和上篇中的信息并没哪些差别,这里就不介绍了。

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

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

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

退出操作和这个类型的客户端一致,也是先清理此人 保存的Session Storage,这个通知oidc-server.dev进行登出,这里就不删剪解释了。

大家知道在浏览器中的JS是都前要直接进行页面跳转的,oidc的js客户端却说利用这个来直接构造认证请求的URL,这个进行登录跳转的(大家这里使用的是oidc-client.js这个开源的js库来处里oidc规范相关的一下操作的)。下图是打开oidc-client-js.dev后的页面:

其中hybrid和implicit这5个站点都会具有在服务端执行代码的能力的(1,登录前要在服务端做跳转;2,登录情況写入cookie;3,通过服务端的接口接收被动的退出通知)。而js这个客户端则是5个纯粹的静态网站,没人它是怎么处里登录和退出的呢?

读者都前要打开浏览器,先打开oidc-client-implicit.dev这个站点这个登录,这个再打开oidc-client-js.dev这个站点的过后,就会发现它会自动的登录成功了。

 本篇介绍了再浏览器中运行的纯静态的HTML网站使怎么使用OIDC服务进行单点登录,统一登出,登录情況监控,以及附加的怎么让JS Client自动登录的原理。这里所使用的例子使传统的HTML+JS的型态。机会你使采用的Vue,Angular机会React的类事前端框架一句话,没人其本质上的原理也是删剪一样的,机会不管使采用的哪些框架,最终输出给浏览器的还是HTML+JS而已。

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

比如下图。我再oidc-client-implicit.dev点击登出的过后,会触发oidc-server.dev清理此人 的cookie,这个js-client中使用check_session_iframe这个隐藏的iframe都前要检测到这个变化,从而使得js-client都前要得知用户机会再这个的client退出登录。

oidc-client-js.dev这个web站点对应的代码占据 web.oidc.client.js这个文件夹中(https://github.com/linianhui/oidc.example/tree/master/src/web.oidc.client.js):

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

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

大家知道在SSO中,除了自身主动退出登录之外,还有这个的Client退出的过后,这里的JS Client也要被动的登出。机会JS Client没人服务端在服务端执行代码的能力,其登录情況也是保占据 客户端这边的,没人它就没土方式接收像这个的客户端一样接收到登出的通知了。这个过后就前要客户端此人 主动去oidc-server.dev检查登录情況了。这个次责在OIDC中都会标准规范,体现在OIDC的Discovery服务中的check_session_iframe字段中。

前面提到JS Client会加载5个oidc-server.dev/account/js的JS脚本文件,这个是我此人 扩展出来的5个脚本。它会在这个纯静态的网站在一结速打开的过后告诉客户端oidc-server.dev否有机会登录了。