关于前端SSO的一些实践经验

背景：

最近公司做了一套前台门户，我作为前端开发参与其中，将过程中的一些经验记录下来，供自己以后参考。

现在有a，b，c，d 4个系统，每个系统有单独的登录接口，获取token的方式，以及各自的业务逻辑。

现在需要新开发一套portal系统，使得a，b，c，d都使用iframe嵌入到portal中，并且可以实现自动登录。

实现原理：

通过设置相同domain的cookie，来实现前端自动登录。

实现方式：

1、先登录portal系统，获取到portal的cookie，portal将cookie种到前端，cookie-name: PORTALCOOKIE，设置http-only

2、前端打开a系统，由于是相同的domain，可以直接使用portal的cookie，正常调用接口，原系统接口，有可能是在header中设置Authorization，也有可能是使用系统自己的cookie进行登录验证，因此调用a系统接口时，a系统发现没有Authorization参数，原逻辑是跳转登录页，新逻辑是：获取PORTALCOOKIE，如果PORTALCOOKIE也没有，再跳转登录页，如果有PORTALCOOKIE，则通过PORTALCOOKIE调用portal系统的接口，换取登录用户的信息，如userId等。a获取到userId，在本系统进行登录，生成自己的token，通过设置 Access-Control-Allow-Headers: token，使前端能获取到token参数，a系统前端将token按照正常登录获取的token存起来，sso登录完成，之后a系统的其他操作和原来逻辑一样不需要修改。

3、b，c，d系统逻辑类似。

4、如果不是相同的domain，以上方案不适用，就需要使用通用的auth2方案，比如微信登录，简单描述一下：

a系统需要新增一个auth2登录的页面，portal系统打开a系统auth2登录地址的时候，生产一个随机的code放到url的参数上，包含用户信息等，a系统获取code后，使用code调用a系统的后端接口，a系统后端拿到code之后，加上appid，screct等参数，调用portal接口，获取个人信息，获取之后进行正常登录，返回token给前端，前端其他的逻辑照旧。

最后上一张大佬的图片，画的比较清晰