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

最新推荐文章于 2024-08-13 08:30:49 发布

dotNET跨平台

最新推荐文章于 2024-08-13 08:30:49 发布

阅读量7.8k

点赞数

本文链接：https://blog.csdn.net/sD7O95O/article/details/78694743

版权

本文介绍了纯JS客户端如何利用OIDC（OpenID Connect）进行单点登录（SSO）操作，包括JS Client直接发起认证请求、解析URL中的数据以保存登录状态，以及主动和被动登出的处理。此外，还提到了自动登录的实现机制，即通过扩展的JS脚本检测OIDC-Server的登录状态。整个过程不依赖服务端代码，仅使用浏览器的JS和HTML。

摘要由CSDN通过智能技术生成

在上一篇基于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.eyJuYmYiOjE1MTE3NTEyMjgsImV4cCI6MTUxMTc1MTUyOCwiaXNzIjoiaHR0cDovL29pZGMtc2Vyd