来点高逼格的,使用前端Sendmessage实现SSO
阅读原文时间:2023年07月15日阅读:2

关于什么叫SSO(单点登录),这个概念具体的信息我就不详述了,网上一搜一大把,总的来说,它是一种可以控制各个独立的系统经过它的授权后,

可以用同一个帐号体系登录不同的系统,达到一处登录,多处使用的效果。

最近的项目中就需要用到这个SSO,对我来说,我了解和接触的最早的SSO系统应该是康盛的Ucenter和PHPCMS的phpsso。还记得当时第一次看到它能在不同系统间实现同步

登录、同步退出这功能时,感觉好牛呀。技术人的思维就是想扒开看看,到底怎么做的?无奈当时技术能力有限,由于没怎么看懂,就没深入研究了,只要会用就行了。

当然了,现在再看上去已经没什么神秘的了,但在当时还是很震撼我这个小白的。

SSO其实明白了原理,不管如何变化,它的基本核心是不会变了。我们要实现的就是如何保持登录状态,如何判断你在各个系统有无登录?这个如果在单体应用中,那是再简单不过了

可以存在Cookie中,存在Session中等,那么SSO中应该如何去实现呢?其实,总的思路也是一样的,通过COOKIE在单独的服务器保留登录凭证,各系统之间独立去控制自已系统的状态。

看过淘宝,京东,百度,新浪等实现的SSO,一来看上去有点麻烦,需要在网址间跳来跳去,再者,它好像不太好满足我的项目。这些系统比如登录页一般都是有一个统一的登录页,但是

我这里要求每个登录页地址和风格可以不一样,甚至登录页有弹框和页面两种。这种情况下,其实用这种方式就不太好弄了。

于是,我和同事在考虑了一些方案,然后做了一些小demo后,决定使用前端实现SSO,就是说通过API接口的方式来实现。这种方案有个好处就是前后端是分离的,后端只需要实现

SSO的功能,前端去实现什么时候调用接口就行,没有页面跳转。就能达到不管你登录页怎么变,凡正后端接口和数据一样,至于展示就是前端的事了。

好了,方案定下来了,现在说说怎么实现吧??我这里可能会侧重于服务端一些,因为前端我不太熟悉,前端是由另一个同事实现的。

首先我们在网站A上嵌入一段隐藏的Iframe.

<div style="display:none>
<iframe src="https://dev.sso.com/auth" id="sso" width="0" height="0" frameborder="0" scrolling="0"></iframe>
</div>

dev.sso.com/auth这个页里面是一些与网站和后端通讯的代码。前端主要使用sendmessage在框架内外通讯。这个域名也是SSO单独认证的域名,就是说各个需要接入SSO功能的系统

都是通过这个域名来验证的。

通讯流程如下:

**1)打开网站A,前端通过sendmessage通讯,查看网站A有没有在dev.sso.com这个SSO服务器存在登录凭证(cookie存储)**
**2)如果不存在,直接出登录页面,**
**如果存在,则继续调用dev.sso.com/validate接口,这个接口会验证登录凭证的有效性,有效则表示登录了,同 时返回一个访问token(如果请求接口时,带上了token则验证合法后,**
**返回这个token,如果token不合法,提示要重新登录,并清除单点上的登录凭证。如要没有带上,则生成一个新的),这个token用于后续网站其它接口的访问; 无效渲染出登录页。**
**3)前端将返回的token存在本地,后续的接口都带上这个token就行了**

4) 打开网站B,前端通过sendmessage通讯,发现在SSO服务器上有登录凭证。于是调用dev.sso.com/validate验证后,和第2步一样,返回访问token。服务端需要将这个访问token和用户

token作关联,表示是同一个用户。

5) 网站B通过这个访问token就能访问后续接口了。

至此,整个通讯就完成了,我们发现通过这样的方式,还是蛮简单的,也确实省去了很多步骤。而且一些安全性什么的在接口也可以一并处理了。没有暴露太多信息给前端。只有一个token

当然了,目前这种方案因为前端没有保存登录状态,每次都要实时去验证,这样对服务器是有一些性能消耗的。如果用户太多,那就问题更大了。而且,服务端缓存中存的绑定信息,如果用户太多

估计也会有不小的问题。

目前也只是实现了这样的SSO功能,其实SSO真要做起来也是一个很复杂的东西,除了登录,还有鉴权等,我们用户基数目前还没有这么大。这些问题暂时没有提到议程上来。这个方案也只是提供了一些思路,

SSO其实没有什么标准,完成可以通过自已项目中需要什么样的去开发就好。能保持状态,能判断登录就行。也不用限定语言,我们项目中使用的是Golang.

我这里贴一部分,服务端用到的部分缓存结构

//sso存的cookie缓存
1 sso_cookie:111111 {
 "user_token":"123456"
 "type":"USER.SSO.COOKIE"
}

//访问token与用户token对应关系
2 Login_User_token:888888 {
  user_token:123456
  service:"a.com"
}

Login_User_token:999999 {
  user_token:123456
  service:"b.com"
  "type":"USER.ACCESS_TOKEN"

}

//用户token
3 Token:123456 {
   "userid":"111111"
   "username”:”test"
   "type":"USER.REGULAR"
}

如上,用户在网站A,B上的访问token(888888,999999)都对应到用户token(123456)这个用户上面

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器