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

首先先上兩張圖，主要是根據這兩張圖實現，你會發現就是這麼簡單！

我簡單描述下：比如現在有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很容易實現了。於是我決定在前端實現了單點登入。我的程式碼都很基礎，非常簡單，坦白了說沒什麼東西。但是從無到有的那段時間讓我很糾結。不要相信第三方實現單點登入的框架多安全，安全這東西很透明的，都是相對的，最好是自己內部定義一套安全的標準以防止被攻擊。