最簡單的web單點登錄(SSO)

單點登錄示例地址【GitHub】

Fay Sso

(單點登錄如此的簡單,本示例支持IE9+,IE8也可以實現)

運行示例代碼需要安裝node.js環境

Test

讓我們直接先來測試這個例子,然後看下我實現的想法,你會發現它是如此的簡單!

下載這個例子,你需要下載整個fay-sso文件夾,因爲fay-uc中的lib被fay-admin中的main.js使用了(當然也可以單獨打包給fay-admin使用,因爲我們項目中經常會涉及與服務端的對接代碼,所以每次更換地址都要重新打包很麻煩,於是直接引用了),所以我需要添加package.json在fay-admin和fay-uc的父級目錄,當然我們需要再fay-sso目錄下執行npm install

進入fay-admin目錄下,然後npm start,進入fay-uc,然後npm start

fay-admin的服務默認端口8000,fay-uc的服務默認端口爲8100,你也可以修改它。

啓動成功後,打開瀏覽器,進入http://127.0.0.1:8000/ 如果你沒有登錄,將跳轉到登錄頁面,然後隨便輸入賬號密碼,點擊回車將跳轉至主頁面,這時你可以在右上角看到你登錄後的用戶名。

安全是相對的,session是基於cookie的,這樣我們爲什麼使用session來實現sso,我們完全可以很簡單地使用cookie實現sso,請求服務端的時候帶入token(你可以使用jwt實現你的token)。

裝逼時刻

let us test this example,then see my idea,you will find it is so simple!

download this example,you need down all of fay-sso,because lib of fay-uc is used by main.js of fay-admin,so I need to add package.json in father of fay-admin and fay-uc,of course,we need npm install under fay-sso。

npm install under fay-sso and fay-admin and fay-uc

cd fay-admin and npm start,then cd fay-uc and npm start

The fay-admin’s server port default is 8000, the fay-uc’s server port default is 8100,you can also change it.

All ready,you could open the browser,look for 127.0.0.1:8000,if you not login,it returns to login page,then you input any word to login.You will find it returns to home page and look top right corner.

let’s change fay-admin’s server port to 8001,and open 127.0.0.1:8001 in your browser,you can find it has logined.Yeah,this is sso.

Safety is relative,session is based on cookie,so why we use session achieve sso?We use cookie completely,then request server with token(you can use jwt).

fay-uc/src/目錄下有一個config.json文件

 
{
"location": "http://127.0.0.1:8100",
"postMessageDomain": "http://127.0.0.1:8100",
"cookieMaxAge": "604800",
"allowedDomain": [
"127.0.0.1:8000",
"*"
],
"secure": "false"
}

location是fay-uc的域,postMessageDomain是fay-admin利用postMessageDomain發送給指定的域(也就是fay-uc啦),cookieMaxAge是記住密碼保存的時間,allowedDomain是允許那麼域使用fay-uc進行sso,這裏的*就是通配。secure是實現https需要使用到的,代碼裏暫時沒涉及。

How

首先先上兩張圖,主要是根據這兩張圖實現,你會發現就是這麼簡單!
fay-sso

這裏寫圖片描述

我簡單描述下:比如現在有a.com、b.com、uc.com;a.com和b.com中利用iframe嵌套uc.com,利用html5跨域通訊postMessage將在a.com中登錄的信息告知uc.com,然後uc.com將需要保存的信息存入cookie,a.com也將需要保存的信息存入cookie;此時訪問b.com時,b.com中的iframe中的uc.com會將cookie中的登錄信息通過postMessage告知b.com這些信息,然後b.com將這些信息存入cookie中,此時b.com就是已登錄狀態了,無需再登錄,這樣便實現了單點登錄。以上反之則是未登錄。

上一種方式對於安全性較高的Safari和Opera瀏覽器是不可行的,不同之處在於這些瀏覽器不允許iframe中跨域存儲cookie,此時解決方案是在a.com中登錄後將信息存入cookie,然後跳轉至利用iframe嵌套a.com的uc.com,a.com將cookie中的登錄信息傳遞給uc.com,這樣uc.com就獲取到了登錄信息,然後存儲進cookie,然後利用瀏覽器路徑替換方式進入a.com,這樣便實現了單點登錄。

需要注意一點:postMessage只將信息發送給約定好的域,iframe只被約定好的域嵌套!

Why I do it

以前我項目凡是涉及到單點登錄的時候都是基本需要用到cas等這些框架,繁瑣的很,改源碼又很麻煩,主要是實現各種彈出框登錄、指定跳轉、前後端分離等會難以控制。服務端控制前端用戶信息基本就是session,而session又是基於cookie的,那爲什麼我們不直接用cookie。以前沒有H5的年代,光有cookie很難實現單點登錄,如今使用H5的postMessage很容易實現了。於是我決定在前端實現了單點登錄。我的代碼都很基礎,非常簡單,坦白了說沒什麼東西。但是從無到有的那段時間讓我很糾結。不要相信第三方實現單點登錄的框架多安全,安全這東西很透明的,都是相對的,最好是自己內部定義一套安全的標準以防止被攻擊。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章