文章目录
一文大白话讲清楚单点登录
1. 单点登录产生的实际需求背景
-假设我们公司现在有三个网站产品，网站A，网站B，网站C,用户使用我们网站的时候，如果打开A网站，就得登录A网站；如果打开B网站，就得登录B网站，反正要用那个就得登录哪个。很麻烦，明明都是一家公司的产品，有没有可能只要A登录了，BC就不用登录，直接能用呢。可以，这就是单点登录
2. 单点登录（single sign On,简称SSO）
- SSO的定义是，在多个应用系统中，用户只需要登陆一次，就可以访问所有相互信任的应用系统。
- 这样有一个问题，我们的网站可能是同一个主域名，然后不同的二级域名；也有可能压根是不同的主域名
- 我们试想一下，同一个主域名下的不同二级域名肯定好处理么，因为毕竟是一家人，有天然的信任度。
- 而不同的域名之间，就比较麻烦了，谁不认谁，没有信任度，怎么办，只能找一个中间人，咱们都信任他。这就样就可以
- 下面两种情况分开说
3. 相同主域名，不同二级域名下的单点登录
- 既然咱两都在同一个主域名下，只不过是二级域名不一样，相当于咱两有一个共同的爹。那咱要共享登录信息就很简单。
- 你我他，只要是一家人，登录就告诉咱爹，让咱爹记着咱们的登录信息，这样如果剩下有谁需要登录信息，找咱爹拿就行。
- 那怎么告诉咱爹呢，或者说咱们爹怎么才能保存咱们的登录信息呢
- 那就用得用到cookie，不了解cookie的，看这篇文章 https://blog.csdn.net/xiaobangkeji/article/details/144744545
- cookie的domain属性设置为当前域名的主域名，并且主域名的cookie会被所有子域名所共。path属性默认为web应用的上下文路径。
- 这就简单了，我们只要需要登录信息放在主域名的cookie下，这样大家就可以共享了
4. 不同域名下的单点登录
4.1利用认证中心
- 我们刚才说了，相同主域名能简单实现单点登录，是因为有共同的爹。现在不同的域名没有共同的爹，怎么办，那就给他们设置一个中间人，大家都信任他就行，他就是爹。
- 这个爹，就是一个认证中心，专门用于处理登录请求的独立的web服务。
- 那接下来就是咱们跟咱爹交互的问题了，我们需要一套规则，一套流程
1.用户统一在认证中心登录，登录成功后，认证中心记录用户的登录状态，并将token写入cookie，此时的cookie是认证中心的，应用系统访问不到
2.应用系统检查当前请求有没有Token，如果没有，说明没有登录，那么就将页面跳转至认证中心
3.由于这个操作会将认证中心的cookie自动带过去，因此认证中心根据cookie知道用户是否已经登陆过了
4.如果尚未登录，则返回登录页面，等待用户登录
5.如果用户已经登陆过了，就不会再次登录，而是会跳转回目标的URL，并且在跳转前生成一个Token，拼接在URL的后面，回传给应用系统
6.应用系统拿到Token之后，还需要向认证中心确认一下Token的合法性，防止被人改。确认无误后，应用系统将Token写入cookie，然后本次访问放行。
7.当用户再次访问应用系统时，会自动带上这个Token，应用系统验证Token发现已经登录，就不会再去找认证中心了。 - 这就是一个完整的认证系统的流程
4.2利用iframe+postMessage实现单点登录
- 这个是啥意义，一句话，就是我登录，拿到了登录标志token，然后我想办法把这个token告诉你们，这样你们不是也都有token了么，就相当于都登陆了
- 那我怎么告诉你们呢，就是利用iframe+postMessage
- 啥意思，我拿到token，然后在我的页面创建你们对应的iframe，把你们叫过来，然后通过postMessage向你们发送token数据，你们收到以后保存一下 OK
- 上代码
let token=cookie.token;//回去到token
//创建你们的iframe
let iframe=document.createElement('iframe')
iframe.src='你们的地址'
document.body.append(iframe)
setTimeout(function (){
iframe.contentWindow.postMessage(token,'url')
},4000)
setTimeout(function (){
iframe.remove()
},6000)
window.addEventListener('message',function (event){
localStorage.setItem('token',event.data)
},false)