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