跨域 SSO 單點登入

目錄

• 第一次請求ClientA
• • • 時序圖語句
• 第二次請求ClientA
• • • 時序圖語句
• 第一次請求ClientB
• • • 時序圖語句
• 參考文章

這些跨域域名往往都是一個公司的。可以通過内部的反向代理（比如nginx）将任何域名下的路徑自由路由到任何的服務端。

隻要業務域名下預留一個/passport 路徑用來轉發給ServerSSO就行了。或者也可以不用預留，采用在sso系統配置的形式也可以。該path用來拿着ticket換取sessionKey。

是以如果有兩個應用都使用了sso。比如a.com 和b.com 都可以配置path：

location ~ ^/passport/ {

proxy_pass http://sso_backend;

}

将/passport 請求直接轉發到sso server

圖中的service表示表示業務方所需要的回調位址。

時序圖繪畫工具可以采用以下兩個工具，文法差不多

https://www.websequencediagrams.com/

http://webchart.ihuhai.cn/index.html

第一次請求ClientA

時序圖語句

Note left of User: 第一次請求ClientA
User->ClientA: 1,get a.com
ClientA->ServerA: 2,詢問是否有登入态
ServerA->ServerA: 3,檢查a.com的cookie
ServerA-->ClientA: 4,沒有登入态, 跳轉 302 Location=\nsso.com/check_login?service=a.com
ClientA->ServerSSO:5, sso.com/check_login?service=a.com
ServerSSO-->ClientA:6, 沒有登入态
ClientA->ClientSSO: 7, 登入頁面sso.com/service=a.com\n GET挂起 web/模态框
ClientSSO->ClientSSO:8, 各種驗證\n 短信/驗證碼
ClientSSO->ServerSSO:9, sso.com/quick_login?app_id=1&\nservice=a.com&moblie=xx&code=xx\n 電話/驗證碼
Note right of ServerSSO: 登入成功，在sso域下種下cookie。\n并生成ticket
ServerSSO-->ClientSSO: 10, 登入成功
ClientSSO-->ClientA:11, 302 Location=a.com/passport/?next=a.com&ticket=abc
ClientA->Nginx:12, a.com/passport/?next=a.com&ticket=abc
Nginx->ServerSSO:13, 代理轉發
Note right of ServerSSO: 驗證ticket成功，擷取到使用者資訊，在 a 域下種下cookie
ServerSSO-->Nginx:14, 302 Location=a.com
Nginx-->ClientA:15, 302 Location=a.com
ClientA->ServerA:16, get a.com
ServerA->ServerA:17, 檢查a.com的cookie，有登入态
ServerA-->ClientA:18, 傳回頁面内容
ClientA-->User:19, 傳回内容
           

3 中根據場景不同，這裡a應用可以自己儲存自己的session，或者直接拿sso 給的sessionId去ServerSSO擷取session。

3 中 service 參數是原使用者通路的位址，是希望在登入完成以後跳回來的位址

6 中ServerSSO需要根據SSO域下的cookie校驗使用者的登入态

10 中 sso域種下的cookie一般叫做 sessionKey，sessionId之類的

11 中next參數就是之前的service參數

13 中浏覽器通路的是 a.com/passport/ 這個域下的 /passport/ 路徑被配置為轉發到ServerSSO，而不是 ServerA，之後ServerSSO響應的時候帶上了 Set-COOKIE，種下sessionKey或者sessionId。這是在客戶域下種cookie的關鍵。

第二次請求ClientA

時序圖語句

Note left of User: 第二次請求ClientA
User->ClientA: get a.com/page2
ClientA->ServerA: get a.com/page2
ServerA->ServerA: 檢查a.com的cookie，有登入态
ServerA-->ClientA: 傳回頁面内容
ClientA-->User: 傳回内容

           

第一次請求ClientB

時序圖語句

Note left of User: 第一次請求ClientB
User->ClientB: 1,et b.com
ClientB->ServerB: 2,get b.com
ServerB->ServerB: 3,檢查b.com的cookie
ServerB-->ClientB: 4,沒有登入态, 跳轉 302 Location=\nsso.com/check_login?service=b.com
ClientB->ServerSSO:5, sso.com/check_login?service=b.com
ServerSSO-->ClientB:6,已登入 302 Location=\nb.com/passport/?next=b.com&ticket=efg
ClientB->Nginx:7, b.com/passport/?next=b.com&ticket=efg
Nginx->ServerSSO:8,代理轉發
Note right of ServerSSO: 驗證ticket成功，擷取到使用者資訊，在 b 域下種下cookie
ServerSSO-->Nginx:9, 302 Location=b.com
Nginx-->ClientB:10, 302 Location=b.com
ClientB->ServerB: 11,get b.com
ServerB->ServerB: 12,檢查b.com的cookie，有登入态
ServerB-->ClientB: 13,傳回頁面内容
ClientB-->User: 14,傳回内容B
           

參考文章

漫談單點登入（SSO）

SSO 單點登入

單點登入（SSO）看這一篇就夠了