SSO單點登入、跨域重定向、跨域設定Cookie、京東單點登入例項分析
最近在研究SSO單點登入技術,其中有一種就是通過js的跨域設定cookie來達到單點登入目的的,下面就已京東商城為例來解釋下跨域設定cookie的過程
涉及的關鍵知識點:
1、jquery ajax跨域重定向,要理ajax解跨域重定向,先要了解瀏覽器對重定向的處理。正常我們請求一個地址,如果server返回302,那麼瀏覽器會再發起一次重定向後的http請求;用jquery ajax發起一次非同步請求,server返回302,如果重定後url的域名跟ajax請求的域名是同一個域名的話,瀏覽器會再發起一次重定向後的http請求,請求成功會呼叫ajax的success函式,如果重定向後url的域名跟ajax請求的域名不是同一個域名,也就是跨域重定向(跨域redirect),這個時候瀏覽器看到返回的response的Location跨域了就不會再發起請求,請求被攔截了,ajax請求失敗會呼叫error方法
那麼如果我們非要做跨域重定向呢?這也是可以實現的,普通的ajax請求不行,我們需要通過jsonp的方式,而且需要設定crossDomain:true,可以參考https://api.jquery.com/jQuery.ajax/ 關於jquery.ajax方法的crossDomain 引數的說明
跨域redirect例項:
test.html
跟test.html同域名下的test.php<script src="jquery.js"></script> <script type="text/javascript"> var res=$.ajax({ type:"get", dataType:"jsonp",/*-----------------------*/ url: "http://api.luojisiwei-inc.com/test/test.php?callback=?", crossDomain:true,/*-----------------------*/ success: function(data){ alert("success:"+data.name); }, beforeSend:function(){ }, complete:function(data,status){ } }); </script>
<?php
header("Location:http://video.luojisiwei-inc.com/");//跨域重定向
http://video.luojisiwei-inc.com/index.php
echo "aaaaaaaaaa";
setcookie("vtest","ooooooooooo");//跨域設定cookie
die;
訪問test.html,在firebug下看到請求的結果
客戶端先給test.php發ajax請求,然後被重定向到http://video.luojisiwei-inc.com下,並且返回一個Set-Cookie的Response,這樣就實現了跨域重定向和跨域設定Cookie
然後瀏覽器中訪問http://video.luojisiwei-inc.com,發現該域名下確實有了個叫vtest的Cookie
京東商城跨域設定Cookie實現SSO單點登陸過程
可以先看下這邊文章:http://blog.chinaunix.net/uid-25508399-id-3431705.html1、點選首頁的登陸按鈕跳轉到京東的登陸中心https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F,然後輸入使用者名稱、密碼驗證,驗證通過跳轉到ReturnUrl指定的地址,也就是京東首頁
2、首頁通過Jquery.getJSON()方法發起http://passport.jd.com/new/helloService.ashx請求,跨域獲取需要跨域設定登陸cookie的應用列表,返回一個Json資料
3、js遍歷sso,通過jQuery.ajax()方法對其中的每條資料發起跨域的jsonp請求,我猜測京東的js程式碼大概是這麼寫的
<script type="text/javascript">
$.ajax({
type:"get",
dataType:"jsonp",/*-----------------------*/
url: "http://sso.jd.com/setCookie?t=sso.minitiao.com&callback=?",/*-----------------------*/
crossDomain:true,/*-----------------------*/
success: function(data){
},
beforeSend:function(){
},
complete:function(data,status){
}
});
</script>
請求的結果是這樣的:
4、瀏覽器發起sign請求跨域設定Cookie,請求和返回結果如下
返回的Response header中含有Set-Cookie項,這樣就在sso.minitiao.com域名下設定了Cookie,可以開啟sso.minitiao.com發現確實有了ceshi3.com這樣一個Cookie