什么是单点登录（SSO）前端用 iframe 实现单点登录超详细说明！！

桥志三

已于 2024-03-04 14:37:59 修改

阅读量1.6k

点赞数 12

分类专栏： javascript Vue 文章标签：前端 javascript

于 2024-03-04 14:34:46 首次发布

本文链接：https://blog.csdn.net/akkigg/article/details/136450552

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

本文介绍了单点登录的概念以及如何通过iframe解决不同域名系统间的跨域问题，展示了如何在用户登录一个系统后自动登录其他关联系统的过程，包括创建iframe、postMessage通信和处理接收到的token信息。

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

什么是单点登录？

使用 iframe 实现单点登录

什么是单点登录？

单点登录的英文名叫做：Single Sign On（简称SSO）。

单点登录是一种身份验证过程，允许用户通过一次登录验证即可访问多个应用程序或服务。SSO的关键好处是提高了效率，减少了用户记住多个密码的负担，同时也简化了用户管理。

比如阿里系的淘宝和天猫，很明显地我们可以知道这是两个系统，但是你在使用的时候，登录了天猫，淘宝也会自动登录。

使用 iframe 实现单点登录

对于存在不同域名的系统，我们可以借助iframe的src属性解决跨域问题，然后用iframe的dom元素的contentWindow的postMessage向iframe内嵌的网页传递数据，再在被内嵌的网页的代码中添加message事件截取消息，然后去保存token。

需要单点登录系统的域名

// 需要单点登录的目标系统
export const SSOUrl = ["http://localhost:8080","http://localhost:3000","http://localhost:7777"];

系统中点击跳转的回调函数

export const LoginByUsernameHandler = ({ commit }, userInfo) => {
      return new Promise(resolve => {
        // 登录接口
        loginByUsername(userInfo).then(result => {
          var res = result.data;

          const data = res.data;

          SSOUrl.forEach(item => {
            // 创建子域的iframe, 用于传送数据
            const iframe = document.createElement("iframe");

            // 需要单点登录系统的域名
            iframe.src = `${item}/localstorage.html`;

            // 设置 ifream 为不可见
            iframe.style.display = "none";

            // 在节点的最后一个子节点之后插入节点，同时将节点中的字符串替换为等效的 Text 节点。
            document.body.append(iframe);

            // 使用 postMessage() 发送数据到子系统
            setTimeout(function() {
              let info = {
                userInfo: data.UserInfo,
                token: data.Token
              };
              iframe.contentWindow.postMessage(info, item);
            }, 2000);

            // 成功后销毁iframe
            setTimeout(function() {
              iframe.remove();
            }, 4000);
          });
        });
      });
    }

需要实现免登录的系统下的单点登录文件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<title></title>
  
</head>
<body>
<noscript>
	<strong>抱歉，javascript被禁用，请开启后重试。</strong>
</noscript>
<div >1111111</div>
</body>

  <script>
    // 在这个iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage
  window.addEventListener('message', function (event) {
    console.log("子系统接受消息",event)
    let tokenCache = { content:event.data.token,dataType : 'string' , datetime : new Date().getTime()}
      localStorage.setItem('avue-token', JSON.stringify(tokenCache))

      let userCache = { content:event.data.userInfo,dataType : 'string' , datetime : new Date().getTime()}
      localStorage.setItem('avue-userInfo', JSON.stringify(userCache))
      
      
      // console.log("coke",getCookie("Authorization"))
      // setCookie("Authorization",event.data,60)
  }, false);
  </script>
</html>

桥志三

关注

12
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
什么是单点登录（SSO）前端用 iframe 实现单点登录超详细说明！！

单点登录的英文名叫做：Single Sign On（简称SSO单点登录是一种身份验证过程，允许用户通过一次登录验证即可访问多个应用程序或服务。SSO的关键好处是提高了效率，减少了用户记住多个密码的负担，同时也简化了用户管理。比如阿里系的淘宝和天猫，很明显地我们可以知道这是两个系统，但是你在使用的时候，登录了天猫，淘宝也会自动登录。
复制链接

扫一扫