单点登录跨域iframe互相通信方案

最新推荐文章于 2024-06-25 11:02:53 发布

李小虾

最新推荐文章于 2024-06-25 11:02:53 发布

阅读量2.6k

点赞数 1

分类专栏：技术分享文章标签：单点登录 SSO 跨域 iframe

本文链接：https://blog.csdn.net/monkeyblog/article/details/109029023

版权

技术分享专栏收录该内容

63 篇文章 1 订阅

订阅专栏

最近公司要采用单点登录技术，又不想和传统的单点登录一样，比如说，A系统登录了，再进B系统会直接登录，但是这里有个不好的体验度就是B系统会有一个内部跳转的过程，会重定向到认证中心，再回来。所以这次我们就是要攻克这个跳转的过程，提高这个用户体验度。

废话不多说，开整~~！

先上一个架构时序图

这个方案网上也有大佬用过，算是借鉴了部分思路，但是正好这块是自己以前接触过的一个技术点，所以才想到用这种方式。

a.html页面的代码~~~~（我是后端原谅我写的丑~~~）

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Guns</title>
      <!-- 全局js -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>

<body class="gray-bg">

    <p>这是主页</p>
    <iframe src="http://www.bb.com:8083/sso/b.html" style="height: 100px;width: 100px;display: block;"></iframe>
   


</body>
<script  type="text/javascript">
    window.onload = () =>{
        var data=JSON.stringify({
            msg:'msg',
            token:'331'
        })
        document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*');
    }

    window.addEventListener('message',function(e){

        // 有消息从子级传来时 存贮 tokenData
//        if(e.source!=window.parent) return;
        console.log("==========a===========")
        //e.data即是我们从A传来的数据 这里使用localStorage进行存贮（请勿使用sessionStorage）
        localStorage.setItem("tokenData",e.data);
        console.log(e.data);


    },false);
</script>
</html>

b.html页面的代码（同上）

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Guns</title>
    
    <script src="js/jquery-3.3.1.min.js"></script>

    <script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>

<body class="gray-bg">

    <p>这是b页</p>

</body>
<script type="text/javascript">
 
    console.log(localStorage.getItem("tokenData"));
    
    window.addEventListener('message',function(e){
		console.log("==========b===========")
        // 有消息从父级传来时 存贮 tokenData
        if(e.source!=window.parent) return;

        //e.data即是我们从A传来的数据 这里使用localStorage进行存贮（请勿使用sessionStorage）
        localStorage.setItem("tokenData",e.data);
        console.log(e.data);
        var child = JSON.stringify(localStorage.getItem("tokenData"));
        window.parent.postMessage(child, '*');
    },false);
</script>
</html>

当然直接这样可能是不行的，还要配置hosts哦

127.0.0.1 www.aa.com
127.0.0.1 www.bb.com

然后部署起来就行啦。

访问测试

可以互相通信，单点登录的策略就能实现了，加油！奥力给~~！

源码下载：https://download.csdn.net/download/lj88811498/12919806

李小虾

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
单点登录跨域iframe互相通信方案

最近公司要采用单点登录技术，又不想和传统的单点登录一样，比如说，A系统登录了，再进B系统会直接登录，但是这里有个不好的体验度就是B系统会有一个内部跳转的过程，会重定向到认证中心，再回来。所有这次我们就是要攻克这个挑战的过程，提高这个用户体验度。废话不多说，开整~~！先上一个架构时序图这个方案网上也有大佬用过，算是借鉴了部分思路，但是正好这块是自己以前接触过的一个技术点，所以才想到用这种方式。a.html页面的代码...
复制链接

扫一扫

专栏目录