1、什么是jsonp
说到jsonp这门技术，我们先来了解下javascript中的同源策略。
同源策略
同域名（或ip）、同端口、同协议视为同一个域；一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。
是不是感觉很懵逼？下面我们用几个问答，来详解下同源策略。
1.1、 怎么辨别同一个域
http://www.baidu.com 与 https://www.baidu.com
协议不同，所以不是同一个域
http://127.0.0.1:8080 与 http://127.0.0.1:8081
端口不同，所以不是同一个域
http://www.tmall.com与http://www.taobao.com
域名不同，所以不是同一个域
http://blog.csdn.net/column.html与http://blog.csdn.net/experts.html
域名（blog.csdn.net）、端口（80）、协议（http）三个都相同，所有是用一个域。
1.3、怎么理解本域脚本只能读取本域内的资源
我们自己的网站可以读写自己域名的Cookie，可不可以读取其他网站域名的Cookie呢？
我们自己的网站域名可以直接向自己发送ajax请求，可不可以直接向其他网站域名发送ajax请求呢？
如果你代码写的比较少，马上试验一下吧！
下面这段代码，在html页面中我们不知道写过多少遍。 ‘//’开头表示自适应其它网站协议 ；‘/’开头表示从自己网站域名的根目录
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js" type="application/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/static/js/common/artDialog/dialog-plus-min.js" type="application/javascript" charset="utf-8"></script>
<script src="/static/js/common/base.js" type="application/javascript" charset="utf-8"></script>
<script src="/static/js/common/ajax.js" type="application/javascript" charset="utf-8"></script>
<link href="/static/js/common/artDialog/dialog.css" type="text/css" rel="stylesheet"/>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">看到这个标题和这段代码，你或许会有这样的疑惑；同源策略不是说只能读取本域的资源，这怎么可以读取bootcss域的资源呢！其实你的疑惑是对的，这是因为浏览器给同源策略开了个“后门”，可以通过这三个html标签从其它域读取资源。而我们的jsonp技术正是利用了这个“后门”才给今天的互联网开发带来了福音。
jsonp简单来说就是：javascript动态的在html页面中生成一个‘script’标签，把我们要发送给其他域名的参数用GET方式带在src的url后面，其他域名把处理好的数据用js函数调用的方式包装放回给我们的网站域名
请看网络请求的分类，不是xhr类型而是js类型；返回的数据像个js函数调用，其实就是函数调用。
2、什么是单点登入
一般公司业务做大之后，都会有很多独立域名的业务系统，随着业务系统数量的增多，系统之间的相互协调变的更加多，用户的一个操作往往都会涉及到几个业务系统。例如：我们在淘宝买东西，加入购物车、提交订单、再跳转到支付宝支付，然后在回到淘宝订单系统。我们肯定只希望登入一次，就可以随意的在这些系统之间来回跳转。
单点登入简单说就是：用户访问一组域名网站，只需要登入一次，就可以随意的访问其他成员网站，直到用户点击退出系统或会话超时。
3、技术实现详解
我们从上面的流程图可以看出，不管访问那个域名网站，后台检查到未登入时，浏览器都会重定向到用户中心的登入页http://www.ssouser.com:8080/login.html?redirectUrl=http://www.domain1.com:8081/，登入成功后，浏览器又会重定向回原地址redirectUrl。
整个sso单点登入的技术核心就是jsonp，搞定了jsonp就想当于完成了技术实现方案的第一步。会话生命周期的同步，目前我想到了三个解决方案。
方案一：
不同的域名公用一个相同的JSESSIONID的Cookie，这样不管访问哪一个域名，后端做好session共享（Redis），会话生命周期会自动“同步”其他域名。想好是美好的，现实是残酷的。我们自己定义的JSESSIONID无法覆盖tomcat生成的。而浏览器中我们定义的JSESSIONID覆盖了tomcat生成的。其结果就很悲剧了，浏览器Cookie当中存在一个服务器不认可的sessionid。
方案二：
在用户登入（密码与ssoToken两种方式）系统后，保存userid和JESSIONID的映射关系，然后在每次接口调用过程中，依次同步其他域名会话生命周期。这种方案带来的开销是非常大，随着系统流量的增大，对session共享存储会带来很大的压力。
方案三：
浏览器做定时的刷新，依次向其他的域名发送jsonp请求，这样就保证了用户会话生命周期的同步。相对前面两个方案来说，技术实现难度最简单，性能损耗是最小的。
3.1、后端技术详解
springmvc 4.x开始支持jsonp操作了，所有后端稍微做点扩展就OK了。
springmvc扩展核心代码
@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
public @interface JsonpSign {}import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
//只要配置好扫描JsonpAdviceHandler这个类就OK了。
@ControllerAdvice(annotations = JsonpSign.class)
public class JsonpAdviceHandler extends AbstractJsonpResponseBodyAdvice {
public JsonpAdviceHandler(){
super("callback","jsonp","jsonpcallback");
}
}用户中心核心代码
@RestController
public class UserController {
private static final Logger log = LoggerFactory.getLogger(UserController.class);
@Autowired
private RedisRepository redisRepository;
// 密码登入接口，返回ssoToken和需要登入的域名，然后js通过jsop在依次去登入其他的网站
@RequestMapping(value = "/user/login", method = {RequestMethod.POST, RequestMethod.GET})
public ResBody login(int cellphone, String passWd){
if(StringUtils.isEmpty(cellphone) || StringUtils.isEmpty(passWd)){
throw new BizException(SysErrorCode.PARAM_ERROR);
}
String host = SessionUtil.getRequest().getServerName();
int port = SessionUtil.getRequest().getLocalPort();
host = port == 80 ? host : host + ":" + port;
String ssoToken = UUIDUtil.getUuid();
// ssoToken 有效期10秒
redisRepository.set("ssotoken:" + ssoToken, cellphone + "", 10, TimeUnit.SECONDS);
SessionUtil.setSessionUserId(cellphone);
LoginRes res = new LoginRes();
res.setSsoToken(ssoToken);
List<String> domains = DomainGroupConfig.getDomainGroup(host);
domains.remove(host);
res.setSsoUrls(domains);
return ResBody.buildSucResBody(res);
}
// 退出，清空当前session的userid
@RequestMapping(value = "/user/logout", method = RequestMethod.POST)
@AuthSign
public ResBody logout(){
redisRepository.set(SessionUtil.getSessionUserId() + "", "");
return ResBody.buildSucResBody();
}
}业务域名登入核心代码
//@JsonpSign 目前只对class生效，也就是不支持当个方法支持jsonp操作。
@RestController
@JsonpSign
public class SsoController {
private static final Logger log = LoggerFactory.getLogger(SsoController.class);
@Autowired
private RedisRepository redisRepository;
//业务站点通过jsonp技术结合sso-web-user授权的token登入
//对请求做http head refence校验，防止别人窃取token
@RequestMapping(value = "/sso/login", method = RequestMethod.GET)
public ResBody login(String token){
String cellphone = redisRepository.get("ssotoken:" + token);
if(StringUtils.isEmpty(cellphone)){
throw new BizException(SysErrorCode.PARAM_ERROR);
}
SessionUtil.setSessionUserId(Integer.parseInt(cellphone));
return ResBody.buildSucResBody(cellphone);
}
//用来检测业务站点是否登入
@RequestMapping(value = "/sso/isLogin", method = RequestMethod.GET)
@AuthSign
public ResBody isLogin(){
if(SessionUtil.getSessionUserId() == null){
throw new BizException(SysErrorCode.PERMISSION_EXPIRED);
}
return ResBody.buildSucResBody();
}
//退出登入
@RequestMapping(value = "/sso/logout", method = RequestMethod.POST)
public ResBody logout(){
SessionUtil.cleanSessionInfo();
return ResBody.buildSucResBody();
}
}3.2、前端技术详解
由于jquery直接支持对jsonp的操作，但是为了更好的处理系统通用的业务操作，我还是对jquery的ajax操作进行了封装。
jsonp请求封装
/**
* 发送jsonp（GET）请求，用url带参的方式编码请求数据，返回JSON数据类型
* @param url 请求的url
* @param req 请求的json对象
* @param bizSuccessCallBack 业务成功回调函数
* @param bizFailCallBack 业务失败回调函数
* @param head Http请求头
*/
function getJsonp(url, req, bizSuccessCallBack, bizFailCallBack, head) {
var _settings = {};
if(req != null || req != undefined){
_settings.data = req;
}
if(head != null || head != undefined){
if(head.async != null || head.async != undefined){
_settings.async = head.async;
}
}
_settings.type = "GET";
_settings.contentType = "application/x-www-form-urlencoded; charset=UTF-8";
_settings.cache = false;
_settings.crossDomain = true;
_settings.dataType = "jsonp";
_settings.scriptCharset = "utf-8";
_settings.jsonp = "jsonpcallback";
_settings.success = function (res) {
if(commonCodeFilter(res)){
return;
}
if(res.code == "common-base-1"){
if(bizSuccessCallBack != null || bizSuccessCallBack != undefined){
bizSuccessCallBack(res.data, res.page);
}
else{
minShow(JSON.stringify(res));
}
}
else{
if(bizFailCallBack != null || bizFailCallBack != undefined){
bizFailCallBack(res.code);
}
else{
minShow(JSON.stringify(res));
}
}
}
_settings.error = function (res) {
alert(JSON.stringify(res));
}
$.ajax(url, _settings);
}postForm请求封装
/**
* 发送post请求，用application/x-www-form-urlencoded编码请求数据，返回JSON数据类型
* @param url 请求的url
* @param req 请求的json对象
* @param bizSuccessCallBack 业务成功回调函数
* @param bizFailCallBack 业务失败回调函数
* @param head Http请求头
*/
function postForm(url, req, bizSuccessCallBack, bizFailCallBack, head) {
var _settings = {};
if(req != null || req != undefined){
_settings.data = req;
}
if(head != null || head != undefined){
if(head.async != null || head.async != undefined){
_settings.async = head.async;
}
}
_settings.async = true;
_settings.type = "POST";
_settings.contentType = "application/x-www-form-urlencoded; charset=UTF-8";
_settings.dataType = "json"
_settings.success = function (res) {
if(commonCodeFilter(res)){
return;
}
if(res.code == "common-base-1"){
if(bizSuccessCallBack != null || bizSuccessCallBack != undefined){
bizSuccessCallBack(res.data, res.page);
}
else{
minShow(JSON.stringify(res));
}
}
else{
if(bizFailCallBack != null || bizFailCallBack != undefined){
bizFailCallBack(res.code);
}
else{
minShow(JSON.stringify(res));
}
}
}
_settings.error = function (res) {
alert(JSON.stringify(res));
}
$.ajax(url, _settings);
}登入核心代码
ssoCount = 0;
$('#submit').click(login);
function login() {
postForm("/user/login", {
cellphone: $('#userName').val(),
passWd: $('#password').val()
}, ssoLogin, null, {async: false});
}
function ssoLogin(data) {
for(var i = 0; i < data.ssoUrls.length; i++){
getJsonp("http:\/\/" + data.ssoUrls[i] + "/sso/login", {
token: data.ssoToken
}, function (res2) {
ssoCount ++;
console.log(JSON.stringify(res2));
}, null, {async: false});
}
// 这里的ajax同步执行，我感觉有问题。所以这里加了个while循环等待。
while(ssoCount == data.ssoUrls.length){
break;
}
redictBackUrl();
}本案例的demo已托管到Github上，我会继续完善该Demo，有兴趣的同学可以去下载
4、总结
最初在给系统做sso单点登入方案时，我和大多数想到的都是用cas方案，可能是我个人学习能力不是很强，看了下cas的资料，久久没有搞明白是怎么回事。所以才找到了用jsonp的方式来做这个sso单点登录解决方案。首先我觉得这个方案有以下的有点：
- 业务系统集成简单
- 使用起来非常简单
当能这个解决方案还是有缺点的，在前面我们已经讲到，目前还没有实现正真的会话生命周期同步。但是我个人觉得，有办法总比没办法好，曲线救国也是救国嘛。
最后我想说的是，不要为了学习技术而学习技术，要学会和已有的技术做结合，创造出新的技术。
2367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
