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