多域名实现单点登录详解

news2024/9/22 1:10:50

Hi I’m Shendi

多域名实现单点登录详解

简介

在很久以前给自己的网站制作了登录系统，但因为个人备案等原因没有需要用到登录的地方，于是就没有特意去完善这部分功能，仅仅是将用户部分抽取出来作为一个微服务

最近编写一个转换工具，调后端接口，为了避免被恶意调用，除了使用验证码外，还需要登录才能使用

因为是微服务，项目是多个，为了保证良好的体验，于是将单项目登录更改为单点登录

因为这部分我没有做过，于是首先从网络上查阅相关信息来借鉴，在我n次搜索尝试后，终于放弃了，大抵都是废话一大片，甚至还有的在误导他人，比如不同域名之间使用session做单点登录…毫无收获，只能自己琢磨，于是在这里记录下来

单点登录(SSO)

传统登录在一个项目登录后，在另一个项目状态是未登录，而单点登录是在一个项目登录，所有项目都为登录

例如有两个项目，a.com 与 b.com

用户在 a.com 登陆后，直接访问 b.com，b.com的状态也是登录

可以进入我的网站体验一下效果

目前我自己尝试在一个项目登陆后其他项目也都登录，一个项目退出登陆后所有项目都退出登录，如果发现bug可以通过发送email至shendi@sdpro.top提醒我一下~

sdpro.top
tool.sdpro.top

思路

在之前，我是通过点击按钮的方式切换项目登录，这种方式不是单点登录，但可以在项目跳到另一个项目时保持登录状态

后面我思来想去发现要实现单点登录只能使用中间页的方式，主要重心在前端的存储数据部分，只要能够多个项目可以共享登录数据，那就实现了单点登录了

对于浏览器来说，存储数据大致只有 cookie，storage

如果将多个项目都放在一个域名下的话（单域名），那可以使用cookie，和传统登录没啥太大的区别

一个域名的子域名貌似也能共享Cookie，不过对我来说，我已经弃用了cookie（因为有的小程序不支持cookie），使用的Token，于是只能使用 storage，而localstorage的作用域是在当前域名，域名不一致就拿不到数据。

于是制作一个页面作为中间页，将登陆注册操作都放到这个页面。

那么如何判断是否登录？这就需要做很多操作，其他项目的页面在一开始要跳到中间页，在中间页内判断是否登陆，登录就传递一些信息回去…

最开始我想到的是使用iframe，因为iframe可以使用parent来修改父窗口的内容，在iframe加载中间页，是登录的话调用父窗口的某函数或更改属性值告诉父窗口状态为登陆…但经过尝试，这样只能在域名相同的情况下使用，域名不同就会爆跨域

最后只能使用重定向的方式，重定向传递参数只能通过url传递…

总的来说就是通过一个中间页存储登录信息，其余项目通过中间页来获取登录信息

这里画一个简陋的图来描述一下意思

在这里插入图片描述

其中用户微服务与中间页相当于中央认证系统CAS（Center Authentication Service）

实现

为了确定可行性，我首先制作了个demo示例，两个页面放在不同域名下，主要是前端不同项目之间的数据共享实现

项目页面（url包含info代表已登录，未登录跳中间页）

<html>
<body>
    wqeqweqwe
<script>
    if (location.href.indexOf("info") != -1) {
        console.log("已登录");
    } else {
        location.href = "中间页?url=" + location.href;
    }
</script>
</body>
</html>

中间页

<html>
<body>
<script>
    location.href = location.href.substring(location.href.indexOf("url=")+4,location.href.length) + "?info=123";
</script>
</body>
</html>