js基于cookie实现多域名单点登陆

最新推荐文章于 2022-09-29 14:43:59 发布

graceup

最新推荐文章于 2022-09-29 14:43:59 发布

阅读量5.7k

点赞数 1

分类专栏： js 文章标签： cookie jquery github

本文链接：https://blog.csdn.net/graceup/article/details/52106321

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本demo使用jQuery，也可以去掉（需要改写里面用的jQuery的方法）。
demo github地址：https://github.com/graceup/gu_js_lib/tree/master/js基于cookie实现多域名单点登陆

//写cookies
function setCookie(name,value,days)//两个参数，一个是cookie的名子，一个是值
{
    var exp  = new Date();    
    exp.setTime(exp.getTime() + days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";path=/;expires=" + exp.toGMTString();

}
function setCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
    var exp  = new Date();    
    exp.setTime(exp.getTime() + 15*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";path=/;expires=" + exp.toGMTString();

}
function getCookie(name)//取cookies函数        
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) {
         return unescape(arr[2]);
     }else{
          return null;
     }       

}

function delCookie(name)//删除cookie
{   
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";path=/;expires="+exp.toGMTString();    
}

登录操作

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>login</title> 
<meta name="author" content="lyn">

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <input id="username"><br>
 <input id="password"><br>
<button id="login">login</button>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="util-cookie.js"></script>
<script type="text/javascript" src="login.js"></script>


</body>
</html>

登录js

$(function() {
    var ssoToken=getCookie("ssoToken");
    if(ssoToken==null){
        ssoToken=getQueryString("ssoToken");
    }
    if(ssoToken==null){
        initNormalLogin();
    }else{
        loginBySso(ssoToken);
    }

});

/**
 * 获取url中的的参数
 */
function getQueryString(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null) {
                return  unescape(r[2]); 
            }
            return null;
}

/**
 * 单点登录
 */
function loginBySso(ssoToken){

    var parms = {
            "ssoToken" : ssoToken
        };

        var url = "/user/loginbysso";
        $.post(url, parms, function(data) {
            if (data) {
                var result = JSON.parse(data);
                if (result.code == "1") {
                    dumpIn();
                } else {
                    initNormalLogin();
                }
            }
        });

}
/**
 * 正常登录
 */
function initNormalLogin(){

    $('#login').click(function(){
        doLogin();
    });

}


/**
 * 初始化其它站点单点
 */
function initSsoSite(tempSsoToken){

    var  ssoIframeIndex=0;
    //单点登录的域名
    var  ssoIframeSrcArray=('https://a.com/sso.html?oper=in&ssoToken='+
                            '##'+
                            'http://b.com/sso.html?oper=in&ssoToken=').split('##');

    var tempIframeHtml='<iframe style="display: none;" id="ssoIframe" ></iframe>';
    $(document.body).append(tempIframeHtml);

    var ssoIframe = document.getElementById('ssoIframe');
    ssoIframe.src=ssoIframeSrcArray[ssoIframeIndex]+tempSsoToken;
    ssoIframeIndex++;
    ssoIframe.onload = ssoIframe.onreadystatechange = function() {
        if (this.readyState && this.readyState != 'complete'){
            return;
        }else {
            if(ssoIframeIndex<ssoIframeSrcArray.length){
                ssoIframe.src=ssoIframeSrcArray[ssoIframeIndex]+tempSsoToken;
                ssoIframeIndex++;
            }else{
                dumpIn();

            }
          }
    };

}


/**
 * 提交登录请求
 */
function doLogin() {

    var parms = {
        "username" : $('#username').val(),
        "password" : $('#password').val()
    };

    var url = "/user/login";
    $.post(url, parms, function(data) {
        if (data) {
            var result = JSON.parse(data);
            if (result.code == "1") {

                var tempSsoToken=result.ssoToken;

                setCookie("ssoToken",tempSsoToken,0.08);

                //5秒后跳转
                setTimeout('dumpIn()',5000);

                initSsoSite(tempSsoToken);

            } else { 
                //登录不成功
            }
        }
    });
}

/**
 * 跳转
 */
function dumpIn() {
    window.location = "/index.html";
}

登出操作

登出页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>logout</title> 
<meta name="author" content="lyn">

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

 <button id="logout">logout</button>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="util-cookie.js"></script>
<script type="text/javascript" src="logout.js"></script>
<script type="text/javascript">

$(function() {

    $('#logout').click(function(){
        logout();
    });

});

</script>

</body>
</html>

登出js

/**
 * 登出
 */
function logout() {
            var url = "/user/logout";
            $.post(url, null, function(data) {
                delCookie("ssoToken");
                // 调到登录页面
                setTimeout('dumpOut()',5000);
                deleteSsoSite();
            });
} 


/**
 * 删除其它站点单点
 */
function deleteSsoSite(){
    var  ssoIframeIndex=0;
    var  ssoIframeSrcArray=('https://a.com/sso.html?oper=leave'+
                            '##'+
                            'http://b.com/sso.html?oper=leave').split('##');

    var tempIframeHtml='<iframe style="display: none;" id="ssoIframe" ></iframe>';
    $(document.body).append(tempIframeHtml);

    var ssoIframe = document.getElementById('ssoIframe');
    ssoIframe.src=ssoIframeSrcArray[ssoIframeIndex];
    ssoIframeIndex++;
    ssoIframe.onload = ssoIframe.onreadystatechange = function() {
        if (this.readyState && this.readyState != 'complete'){
            return;
        }else {
            if(ssoIframeIndex<ssoIframeSrcArray.length){
                ssoIframe.src=ssoIframeSrcArray[ssoIframeIndex];
                ssoIframeIndex++;
            }else{
                dumpOut();
            }
          }
    };
}

/**
 * 跳转
 */
function dumpOut(){
    window.location = "/login.html";
}

其它域名下的sso.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>grace-up</title> 
<meta name="author" content="lyn">

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="util-cookie.js"></script>
<script type="text/javascript">
/**
 * 获取url中的的参数
 */     
function getQueryString(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null) {
                return  unescape(r[2]); 
            }
            return null;
}

var oper=getQueryString('oper');
if(oper=='leave'){
    delCookie("ssoToken");
}else if(oper=='in'){
    var ssoToken=getQueryString("ssoToken");
    setCookie("ssoToken",ssoToken);
}
</script>
</body>
</html>

graceup

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js基于cookie实现多域名单点登陆

本demo使用jQuery，也可以去掉（需要改写里面用的jQuery的方法）。 demo github地址：https://github.com/graceup/gu_js_lib/tree/master/js基于cookie实现多域名单点登陆cookie util//写cookiesfunction setCookie(name,value,days)//两个参数，一个是cookie的名子，一
复制链接

扫一扫