需求

多個(gè)應(yīng)用系統(tǒng)中，用戶只需要登錄一次就可以訪問所有相互信任的應(yīng)用系統(tǒng)。

A 網(wǎng)站和 B 網(wǎng)站是同一家公司的關(guān)聯(lián)服務(wù)。現(xiàn)在要求，用戶只要在其中一個(gè)網(wǎng)站登錄，再訪問另一個(gè)網(wǎng)站就會(huì)自動(dòng)登錄，請(qǐng)問怎么實(shí)現(xiàn)？

涉及到的關(guān)鍵點(diǎn)：

這里就涉及到了 跨域認(rèn)證 以及 前端頁(yè)面 JAVAScript 跨域 問題。

一、跨域認(rèn)證問題

互聯(lián)網(wǎng)服務(wù)離不開用戶認(rèn)證。一般流程是下面這樣。

• 用戶向服務(wù)器發(fā)送賬戶和密碼
• 服務(wù)器驗(yàn)證通過后，在當(dāng)前會(huì)話 （session）里保存相關(guān)數(shù)據(jù)，如用戶角色、用戶ID等
• 服務(wù)器向用戶返回一個(gè) session_id，寫入用戶 cookie
• 用戶之后的每一次請(qǐng)求，都會(huì)通過 Cookie 將 session_id 傳回服務(wù)器
• 服務(wù)器收到 session_id ，找到之前存儲(chǔ)的數(shù)據(jù)，由此得知用戶身份

下面以 登錄 A 站點(diǎn) 訪問 B 站點(diǎn) 為例

方案一： session 持久化

? 將 session 數(shù)據(jù)持久化，寫入數(shù)據(jù)庫(kù)或別的持久層。各種服務(wù)受到請(qǐng)求后，都向持久層請(qǐng)求數(shù)據(jù)。

這種方案，對(duì)于各種系統(tǒng)的代碼改動(dòng)量少，只要在權(quán)限驗(yàn)證的地方進(jìn)行判斷即可。

• A 登錄成功代碼
• 登錄成功后，將 session 存儲(chǔ)到 redis 持久化存儲(chǔ)，注意設(shè)置有效期
• tip：

Redis 以層級(jí)形式、目錄形式保存數(shù)據(jù)，最大四級(jí)，格式如下：

set('dir:dir:dir:key', 'value');

/**
 * 將 Session 存儲(chǔ)到 Redis
 * @param boolean $logout 是否退出登陸 默認(rèn)否
 * @return array
 */
public function sessionToRedis($logout = false) {
 try {
 if ($logout) {
 (new Redis())->del('Admin:session:' . session_id());
 }else{
 $userInfo = session('CH_ADMIN_LOGIN_STATUS');
 $res = (new Redis())->setex('Admin:session:' . session_id(), 28800, json_encode($userInfo, JSON_UNESCAPED_UNICODE));
 if ($res === false) throw new Exception('Redis 存儲(chǔ)失敗');
 return true;
 }
 } catch (Exception $e) {
 return false;
 }
 }
 </pre>

• 登錄成功后 訪問 B, B 進(jìn)行用戶身份認(rèn)證
• 注意 此時(shí) 訪問 B的鏈接URL 要攜帶參數(shù) sessionid！
• B 在處理請(qǐng)求- 身份驗(yàn)證時(shí)，先解析是否攜帶了sessionid參數(shù)，攜帶了則向 redis 中查詢相關(guān)數(shù)據(jù)，并將數(shù)據(jù)保存到當(dāng)前會(huì)話中。此時(shí)就成功 登錄 B 了。

/**
 * 通過其他后臺(tái)單點(diǎn)登陸
 * 傳遞session_id(用于session共享)
 */
$params = $request->param();
if (!empty($params) && isset($params['session_id'])) {
 session_id($params['session_id']);
 // 設(shè)置會(huì)話id
 $userInfo = Session::get('userinfo', 'admin');
 if (empty($userInfo)) {
 $userInfo = json_decode((new Redis())->get('Admin:session:'.$params['session_id']), true);
 Session::set('userinfo', $userInfo, 'admin');
 }
} else {
 $userInfo = Session::get('userinfo', 'admin');
}
</pre>

方案二：JWT（JSON Web Token）

服務(wù)器索性不保存 session 數(shù)據(jù)了，「用戶數(shù)據(jù)」加密保存到「客戶端」，每次請(qǐng)求都將數(shù)據(jù)發(fā)回服務(wù)器，服務(wù)器再進(jìn)行解析得到用戶身份信息數(shù)據(jù)。JWT 就是這種方案的一個(gè)代表。

JWT 原理

服務(wù)器認(rèn)證后，生成一個(gè) JSON 對(duì)象，發(fā)回給用戶，就像下面這樣。

{
 "姓名": "張三",
 "角色": "管理員",
 "到期時(shí)間": "2019年10月1日0點(diǎn)0分"
}

以后，用戶與服務(wù)端通信的時(shí)候，都要發(fā)回這個(gè) JSON 對(duì)象。服務(wù)器完全只靠這個(gè)對(duì)象認(rèn)定用戶身份。為了防止用戶篡改數(shù)據(jù)，服務(wù)器在生成這個(gè)對(duì)象的時(shí)候，會(huì)加上簽名（詳見后文）。

服務(wù)器就不保存任何 session 數(shù)據(jù)了，也就是說(shuō)，服務(wù)器變成無(wú)狀態(tài)了，從而比較容易實(shí)現(xiàn)擴(kuò)展。

JWT 的數(shù)據(jù)結(jié)構(gòu)

它是一個(gè)很長(zhǎng)的字符串，中間用點(diǎn)（.）分隔成三個(gè)部分。注意，JWT 內(nèi)部是沒有換行的，這里只是為了便于展示，將它寫成了幾行。

JWT 的三個(gè)部分依次如下。

• Header（頭部）
• Payload（負(fù)載）
• Signature（簽名）

寫成一行，就是下面的樣子。

Header.Payload.Signature

Header

Header 部分是一個(gè) JSON 對(duì)象，描述 JWT 的元數(shù)據(jù)，通常是下面的樣子。

{
 "alg": "HS256",
 "typ": "JWT"
}

上面代碼中，alg屬性表示簽名的算法（algorithm），默認(rèn)是 Hmac SHA256（寫成 HS256）；typ屬性表示這個(gè)令牌（token）的類型（type），JWT 令牌統(tǒng)一寫為JWT。

最后，將上面的 JSON 對(duì)象使用 Base64URL 算法（詳見后文）轉(zhuǎn)成字符串。

Payload

Payload 部分也是一個(gè) JSON 對(duì)象，用來(lái)存放實(shí)際需要傳遞的數(shù)據(jù)。JWT 規(guī)定了7個(gè)官方字段，供選用。

• iss (issuer)：簽發(fā)人
• exp (expiration time)：過期時(shí)間
• sub (subject)：主題
• aud (audience)：受眾
• nbf (Not Before)：生效時(shí)間
• iat (Issued At)：簽發(fā)時(shí)間
• jti (JWT ID)：編號(hào)

除了官方字段，你還可以在這個(gè)部分定義私有字段，下面就是一個(gè)例子。

{
 "sub": "1234567890",
 "name": "John Doe",
 "admin": true
}

注意，JWT 默認(rèn)是不加密的，任何人都可以讀到，所以不要把秘密信息放在這個(gè)部分。

這個(gè) JSON 對(duì)象也要使用 Base64URL 算法轉(zhuǎn)成字符串。

Signature

Signature 部分是對(duì)前兩部分的簽名，防止數(shù)據(jù)篡改。

首先，需要指定一個(gè)密鑰（secret）。這個(gè)密鑰只有服務(wù)器才知道，不能泄露給用戶。然后，使用 Header 里面指定的簽名算法（默認(rèn)是 HMAC SHA256），按照下面的公式產(chǎn)生簽名。

HMACSHA256(
 base64UrlEncode(header) + "." +
 base64UrlEncode(payload),
 secret)

算出簽名以后，把 Header、Payload、Signature 三個(gè)部分拼成一個(gè)字符串，每個(gè)部分之間用"點(diǎn)"（.）分隔，就可以返回給用戶。

Base64URL

前面提到，Header 和 Payload 串型化的算法是 Base64URL。這個(gè)算法跟 Base64 算法基本類似，但有一些小的不同。

JWT 作為一個(gè)令牌（token），有些場(chǎng)合可能會(huì)放到 URL（比如 api.example.com/?token=xxx）。Base64 有三個(gè)字符+、/和=，在 URL 里面有特殊含義，所以要被替換掉：=被省略、+替換成-，/替換成_。這就是 Base64URL 算法。

JWT 的使用方式

客戶端收到服務(wù)器返回的 JWT，可以儲(chǔ)存在 Cookie 里面，也可以儲(chǔ)存在 localStorage。

此后，客戶端每次與服務(wù)器通信，都要帶上這個(gè) JWT。你可以把它放在 Cookie 里面自動(dòng)發(fā)送，但是這樣不能跨域，所以更好的做法是放在 HTTP 請(qǐng)求的頭信息Authorization字段里面。

Authorization: Bearer <token>

另一種做法是，跨域的時(shí)候，JWT 就放在 POST 請(qǐng)求的數(shù)據(jù)體里面。

JWT 的幾個(gè)特點(diǎn)

（1）JWT 默認(rèn)是不加密，但也是可以加密的。生成原始 Token 以后，可以用密鑰再加密一次。

（2）JWT 不加密的情況下，不能將秘密數(shù)據(jù)寫入 JWT。

（3）JWT 不僅可以用于認(rèn)證，也可以用于交換信息。有效使用 JWT，可以降低服務(wù)器查詢數(shù)據(jù)庫(kù)的次數(shù)。

（4）JWT 的最大缺點(diǎn)是，由于服務(wù)器不保存 session 狀態(tài)，因此無(wú)法在使用過程中廢止某個(gè) token，或者更改 token 的權(quán)限。也就是說(shuō)，一旦 JWT 簽發(fā)了，在到期之前就會(huì)始終有效，除非服務(wù)器部署額外的邏輯。

（5）JWT 本身包含了認(rèn)證信息，一旦泄露，任何人都可以獲得該令牌的所有權(quán)限。為了減少盜用，JWT 的有效期應(yīng)該設(shè)置得比較短。對(duì)于一些比較重要的權(quán)限，使用時(shí)應(yīng)該再次對(duì)用戶進(jìn)行認(rèn)證。

（6）為了減少盜用，JWT 不應(yīng)該使用 HTTP 協(xié)議明碼傳輸，要使用 HTTPS 協(xié)議傳輸。

二、JavaScript 跨域

單點(diǎn)登錄難免會(huì)遇到窗口之間 JS 跨域問題，此時(shí)的解決方案是 postMessage

postMessage 是html5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

a.） 頁(yè)面和其打開的新窗口的數(shù)據(jù)傳遞

b.） 多窗口之間消息傳遞

c.） 頁(yè)面與嵌套的iframe消息傳遞

d.） 上面三個(gè)場(chǎng)景的跨域數(shù)據(jù)傳遞

用法：postMessage(data,origin) 方法接受兩個(gè)參數(shù)

data： html5規(guī)范支持任意基本類型或可復(fù)制的對(duì)象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。

origin： 協(xié)議+主機(jī)+端口號(hào)，也可以設(shè)置為"*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script> 
 var iframe = document.getElementById('iframe');
 iframe.onload = function() {
 var data = {
 name: 'aym'
 };
 // 向domain2傳送跨域數(shù)據(jù)
 iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
 };
 // 接受domain2返回?cái)?shù)據(jù)
 window.addEventListener('message', function(e) {
 alert('data from domain2 ---> ' + e.data);
 }, false);
</script>

2.）b.html：(http://www.domain2.com/b.html)

<script>
 // 接收domain1的數(shù)據(jù)
 window.addEventListener('message', function(e) {
 alert('data from domain1 ---> ' + e.data);
 var data = JSON.parse(e.data);
 if (data) {
 data.number = 16;
 // 處理后再發(fā)回domain1
 window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
 }
 }, false);
</script>