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

 

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

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

 

 

<?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.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代码大概是这么写的

 

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

 

请求的结果是这样的：

能够看到返回一个重定向的Response，并且是跨域的重定向，因为发起的是跨域的jsonp请求，因此浏览器会根据返回的重定向url发起一次请求，也就是最后的跨域设置Cookie的请求

四、浏览器发起sign请求跨域设置Cookie，请求和返回结果以下

 

 

返回的Response header中含有Set-Cookie项，这样就在sso.minitiao.com域名下设置了Cookie，能够打开sso.minitiao.com发现确实有了ceshi3.com这样一个Cookie

 

五、至此京东就完成了单点登陆的全过程