前端单点登录（SSO）实现方法（二级域名与主域名）

　　1.单点登录介绍

　　　　单点登录 SSO 全称 Singn Sign On 。SSO 是指在多个应用系统中，用户只需要登录一次用户系统，就可以访问其他互相信任的应用系统。例如：在网易官网登录账户，那么再进入网易邮箱等其他业务的时候会自动登录。另外还有一个好处就是在一定时间内可以不用重复登录账户。

　　2.域名与跨域

　　　　域名：网络中的一个门牌号。如：www.baidu.com 就是一个域名。

　　　　域名分析：

　　　　跨域：不同域名之间的通信。

　　　　跨域分析：

　　　　同源策略：在同一域名下，文件是可以互相访问的。在跨域情况下，由于 JavaScript 的保护机制，会规定一个同源策略。同源策略就是限制一个源中加载文本或脚本与来自其他源中的资源的交互方式。同源：域名，协议，端口相同。在非同源情况下，在请求数据时会报错。

　　　　读写操作：

　　　　　　　　同域：可以进行任何的读写操作。
　　　　　　　　跨域：1、通常允许写操作，例：表单提交、重定向
         　　　　　　　　2、外链接资源
            　　　　　　　　a、css: <link ...>
            　　　　　　　　b、js: <script ...> //错误信息，只会在同源脚本中打印出来
            　　　　　　　　c、img: <image ..>
            　　　　　　　　d、html5视频、音频 : <vedio> <audio>
            　　　　　　　　e、<object> <embed> <applet>
            　　　　　　　　f、@font-face //不同浏览器支持不同，有的支持跨域字体，有的仅支持同源字体
            　　　　　　　　g、<frame> <iframe>  站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。
         　　　　　　　　3、通常不允许读操作

　　　　解决跨域通信的方法：

　　　　　　1. html5 possagemessage 　　　　2. jsonp 　　　　　　3.window.name

　　　　　　4.window.name　　　　　　　　　5.location.hash　　　6.cookie

　　3.单点登录实现一（二级域名情况）

　　　　二级域名单点登录情况：

　　　　　　例如：需要在 bbb.a.com 和 ccc.a.com 实现单点登录

　　　　解决方法：

　　　　　　对于二级域名的单点登录，可以通过共享 cookie 来实现。当在 bbb.a.com 页面登录成功后，将一个可以验证已登陆的信息添加到 Cookie 当中。当然不能把密码账号添加到上面，不安全，不过也可以将密码与帐号先进行加密。需要注意设置 cookie 属性的 domain 为顶级域名，即 a.com 。对 cookie 设置不熟悉的可以使用 js-cookie 库来设置 cookie 。设置 cookie 后，在 ccc.a.com 中就可以检测是否登录过并获取 cookie 中先前设置好的属性来进行操作，进行发送请求验证等实现登录功能，直接完成 ccc.a.com 的登录。

　　　　操作流程：

　　　　　　1.用户在 bbb.a.com 登录。

　　　　　　2.将需要的身份验证信息存储到 cookie 中（cookie 的 domain 属性设置顶级域名）。

　　　　　　3.用户进入 ccc.a.com 页面。

　　　　　　4.获取存储在 cookie 中的数据。:

　　　　　　5.ccc.a.com 将数据发送到后台服务器验证。

　　　　　　6.ccc.a.com 自动登录成功。

　　4.单点登录实现二（主域名）

　　　　主域名单点登录情况：

　　　　　　例如：需要再 www.aaa.com 和 www.bbb.com 实现单点登录

　　　　　　这种情况下不能共享 cookie 。这时需要利用 html5 中的 postMessage() 方法进行跨域传信息。

　　　　postMessage 简单使用介绍：

　　　　　　语法： otherWindow.postMessage(message, targetOrigin, [ transfer ])

　　　　　　参数： otherWindow: 需要传递参数的另一个窗口。

　　　　　　　　　 message: 要发送到另一个窗口的数据。

　　　　　　　　　 targetOrigin: 要发送数据的目标 url 。使用 * 代表任意目标。最好写完整协议，主机名，域名，端口。安全考虑。

　　　　　　　　　 transfer: 可选。是Transferable使用消息传送的一系列对象。不常用。

　　　　　　使用：例：父窗口(http://www.aaa.com)嵌套 iframe 子窗口(http://www.bbb.com)。

　　　　　　　　父窗口： window.frames[0].postMessage(message, "http://www.bbb.com");

　　　　　　　　　子窗口： window.addEventListener("message", function(event){ if(event.origin !== "http://www.aaa.com") return; XXXX其他代码 }, false)；

　　　　　　　　　接受到 event 的参数： event.data: 从另一个端口传递来的数据。

　　　　　　　　　　　　　　　　　　　 event.origin: 发送信息的来源。一般需要判断来源。安全考虑。

　　　　　　　　　　　　　　　　　　　 event.source: 引用发送信息的对象。可以使用 event.source.postMessage() 向发送信息来的网站传递信息。

　　　　解决方法：使用一个中转网站用来转接数据。如使用 www.collect.com 来中转数据。将中转网站 www.collect.com 使用 iframe 嵌套进需要实现单点登录的网站（这里的嵌套没必要展示就设为 display: none）。这里需要实现的网站为 www.aaa.com 和 www.bbb.com 。当在 www.aaa.com 中登录帐号，将需要的验证信息存进 cookie 中，同时也将这些信息使用 postMessage 传递给子窗口即 www.collect.com 。www.collect.com 网站接受到这些信息后也存进 cookie 中。当在登录 www.bbb.com 时，嵌套的子窗口 www.collect.com 检测 cookie 信息若存在登录信息就使用 postMessage 传递这些 cookie 信息给父窗口 www.bbb.com 。www.bbb.com 收到信息就可以进行发送请求验证等实现登录功能，直接完成 www.bbb.com 的登录，同时也需要将这些信息存进 cookie 以给使用。

　　　　操作流程：　　

　　　　　　1.将 www.collect.com 嵌套进 www.aaa.com 和 www.bbb.com 中。　　　

　　　　　　1.用户在 www.aaa.com 登录。

　　　　　　2.将需要的身份验证信息存储到 cookie 中。同时使用 postMessage 传给 www.collect.com。

　　　　　　3. www.collect.com 收到信息储存到 cookie 中，需要时调用。

　　　　　　3.用户进入 www.bbb.com 页面。

　　　　　　4.www.collect.com 获取存储在 cookie 中的数据，使用 postMessage 传给 www.bbb.com。

　　　　　　5.www.bbb.com 将数据发送到后台服务器验证。并将数据存进 cookie 。

　　　　　　6.www.bbb.com 自动登录成功。

　　参考文章：

　　　　1.postMessage：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

　　　　2.跨域：http://www.qdfuns.com/notes/17659/bb090a096034a8074332a5060e9b6a3c.html

　　　　3.cookie：http://blog.csdn.net/fangaoxin/article/details/6952954/

　　　　4.7种跨域方法：http://blog.csdn.net/super_yang_android/article/details/53992114

　　　　5.单点登录：http://blog.csdn.net/fay462298322/article/details/54963716