SSO單點登陸、跨域重定向、跨域設置Cookie、京東單點登陸實例分析

最近在研究SSO單點登陸技術，其中有一種就是經過js的跨域設置cookie來達到單點登陸目的的，下面就已京東商城爲例來解釋下跨域設置cookie的過程

涉及的關鍵知識點：

一、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

 

[html] view plain copy

1. <script src="jquery.js"></script>  
2. <script type="text/javascript">  
3. var res=$.ajax({  
4.   type:"get",  
5.   dataType:"jsonp",/*-----------------------*/  
6.   url: "http://api.luojisiwei-inc.com/test/test.php?callback=?",  
7.   crossDomain:true,/*-----------------------*/  
8.   success: function(data){  
9.                 alert("success:"+data.name);  
10.           
11.         },  
12.   beforeSend:function(){  
13.         },  
14.   complete:function(data,status){  
15.         }  
16. });  
17.   
18. </script>  

跟test.html同域名下的test.php

 

 

[php] view plain copy

1. <?php  
2. header("Location:http://video.luojisiwei-inc.com/");//跨域重定向  

http://video.luojisiwei-inc.com/index.php

 

 

[html] view plain copy

1. echo "aaaaaaaaaa";  
2. setcookie("vtest","ooooooooooo");//跨域設置cookie  
3. 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.html

 

一、點擊首頁的登錄按鈕跳轉到京東的登錄中心https://passport.jd.com/new /login.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F，而後輸入用戶名、密碼驗證，驗證經過跳轉到 ReturnUrl指定的地址，也就是京東首頁

 

二、首頁經過Jquery.getJSON()方法發起http://passport.jd.com/new/helloService.ashx請求，跨域獲取須要跨域設置登錄cookie的應用列表，返回一個Json數據

三、js遍歷sso，經過jQuery.ajax()方法對其中的每條數據發起跨域的jsonp請求，我猜想京東的js代碼大概是這麼寫的

 

[javascript] view plain copy

1. <script type="text/javascript">  
2. $.ajax({  
3.   type:"get",  
4.   dataType:"jsonp",/*-----------------------*/  
5.   url: "http://sso.jd.com/setCookie?t=sso.minitiao.com&callback=?",/*-----------------------*/  
6.   crossDomain:true,/*-----------------------*/  
7.   success: function(data){  
8.         },  
9.   beforeSend:function(){  
10.         },  
11.   complete:function(data,status){  
12.         }  
13. });  
14.   
15. </script>  

 

請求的結果是這樣的：

能夠看到返回一個重定向的Response，並且是跨域的重定向，因爲發起的是跨域的jsonp請求，因此瀏覽器會根據返回的重定向url發起一次請求，也就是最後的跨域設置Cookie的請求

四、瀏覽器發起sign請求跨域設置Cookie，請求和返回結果以下

 

 

返回的Response header中含有Set-Cookie項，這樣就在sso.minitiao.com域名下設置了Cookie，能夠打開sso.minitiao.com發現確實有了ceshi3.com這樣一個Cookie

 

五、至此京東就完成了單點登陸的全過程