大廠技術(shù)  高級前端  Node進(jìn)階
點擊上方 程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群

前端登錄有很多種方式，我們來挑一些常見的方案先梳理一下，后續(xù)再補(bǔ)充更多的。

賬號密碼登錄

在系統(tǒng)數(shù)據(jù)庫中已經(jīng)有了賬號密碼，或者通過注冊渠道生成了賬號和密碼，此時可以直接通過賬號密碼登錄，只要賬號密碼正確就認(rèn)為身份合法，可以換到系統(tǒng)訪問的 token，用于后續(xù)業(yè)務(wù)鑒權(quán)。

驗證碼登錄

比如手機(jī)驗證碼，郵箱驗證碼等等。用戶首先提供手機(jī)號/郵箱，后端根據(jù)會話信息生成一個特定的碼下發(fā)到用戶的手機(jī)或者郵箱（通過運(yùn)營商提供的能力）。

用戶得到這個碼后填入登錄表單，隨手機(jī)號/郵箱一并發(fā)給后端，后端拿到手機(jī)號/郵箱、碼后，與會話信息做校驗，確認(rèn)身份信息是否合法。

如果一致就檢查數(shù)據(jù)庫中是否有這個手機(jī)號/郵箱，有的話就不用創(chuàng)建用戶了，直接通過登錄；沒有的話就說明是新用戶，可以先創(chuàng)建用戶，綁定好手機(jī)號/郵箱，然后通過登錄。

第三方授權(quán)

比如微信授權(quán)，github授權(quán)之類的，可以通過OAuth授權(quán)得到訪問對方開放API的能力。

OAuth 協(xié)議讀起來很復(fù)雜，其實本質(zhì)上就是：

• 我是開發(fā)者，有個自己的業(yè)務(wù)系統(tǒng)。
• 用戶想圖方便，希望通過一些常用的平臺（比如微信，支付寶等）登錄到我的業(yè)務(wù)系統(tǒng)。
• 但是這也不是你想用就能用的，我首先要去三方平臺登記一下我的應(yīng)用，比如注冊一個微信公眾號，公眾號再綁定我的業(yè)務(wù)域名（驗證所有權(quán)），可能還要交個費(fèi)做微信認(rèn)證之類的。
• 交了保護(hù)費(fèi)后（經(jīng)過上面的操作），我的業(yè)務(wù)系統(tǒng)就是某三方平臺的合法應(yīng)用了，就可以使用某三方平臺的開放接口了。
• 此時用戶來到我的業(yè)務(wù)系統(tǒng)客戶端，點擊微信一鍵登錄。
• 然后我的業(yè)務(wù)系統(tǒng)就會按照微信的規(guī)矩生成一些鑒權(quán)需要的信息，拉起微信的中間頁（如果是手機(jī)客戶端，那可能就是通過 SDK 拉起手機(jī)微信）讓用戶授權(quán)。
• 用戶同意授權(quán)，微信的中間頁鑒權(quán)成功后，就會給我的客戶端返回一個 code 之類的回調(diào)信息，客戶端需要把這個 code 傳給后端。
• 后端拿到這個 code 可以去微信服務(wù)器換取 access_token，基于這個 access_token，可以獲取微信用戶基本開放信息和幫助用戶實現(xiàn)基礎(chǔ)開放功能等。
• 后端也可以基于此封裝自定義的登錄態(tài)返給客戶端，如有必要，也可以生成用戶表中的記錄。
• 此時我就認(rèn)為這個用戶是通過微信合法登錄到我的系統(tǒng)中了。

有些字段或者信息之類的可能會描述得不夠精確，但是整個鑒權(quán)的思路大概就是這樣。

微信小程序登錄

wx.login + code2Session 無感登錄

如果你的業(yè)務(wù)系統(tǒng)需要鑒權(quán)大部分接口，但是又不想讓用戶一打開小程序就去輸入啥或者點啥按鈕登錄，那么無感登錄是比較適合的。

關(guān)鍵是找到能唯一標(biāo)識用戶身份的東西，openid 或者 unionid 就不錯。那么怎么無感得到這些？wx.login + code2Session 值得擁有。

小程序前端 wx.login 得到用戶登錄憑證 code（目前說的有效期是五分鐘），然后把 code 傳給服務(wù)端，服務(wù)端調(diào)用微信服務(wù)的 auth.code2Session，使用 code 換取 openid、unionid、session_key 等信息，session_key 相當(dāng)于是當(dāng)前用戶在微信的會話標(biāo)識，我們可以基于此自定義登錄態(tài)再返回給前端，前端拿著登錄態(tài)再訪問后端的業(yè)務(wù)接口。

getPhonenumber授權(quán)手機(jī)號登錄

當(dāng)指定 button 組件的 open-type 為 getPhoneNumber 時，可以拉起手機(jī)號授權(quán)，手機(jī)號某種程度上可以標(biāo)識用戶身份，自然也可以用來做登錄。

舊版方案中，getPhonenumber得到的 e 對象中有 encryptedData, iv 字段，傳給后端，根據(jù)解密算法^[1]能得到手機(jī)號和區(qū)號等信息。手機(jī)號也相當(dāng)于是一種可以唯一標(biāo)識用戶的信息（雖然一個人可以有多個手機(jī)號，不過寬松點來說也可以用來標(biāo)識用戶），自然可以用來生成用戶表記錄，后續(xù)再與其他信息做關(guān)聯(lián)即可。

但是舊版方案已經(jīng)不建議使用了，目前 getPhonenumber得到的 e 對象中有 code 字段，這個 code 和 wx.login 得到的 code 不是同一回事。我們把這個 code 傳給后端，后端再調(diào)用 phonenumber.getPhoneNumber^[2]得到手機(jī)號信息。

接著再封裝登錄態(tài)返回給前端即可。

微信公眾號登錄

首先分析一下渠道，在微信環(huán)境中，用戶可能會直接通過鏈接訪問 H5，也可能通過公眾號菜單進(jìn)入 H5。

微信公眾號網(wǎng)頁提供了授權(quán)方案，具體可以參考這個網(wǎng)頁授權(quán)^[3]文檔。

授權(quán)有兩種形式，snsapi_base 和 snsapi_userinfo。

這個授權(quán)是支持無感的，具體見這個解釋。

關(guān)于特殊場景下的靜默授權(quán)

上面已經(jīng)提到，對于以snsapi_base為 scope 的網(wǎng)頁授權(quán)，就靜默授權(quán)的，用戶無感知；

對于已關(guān)注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進(jìn)入本公眾號的網(wǎng)頁授權(quán)頁，即使是 scope 為snsapi_userinfo，也是靜默授權(quán)，用戶無感知。

這基本上就是說，如果是 snsapi_base 方式，目的主要是取 token 和 openid，用來做后續(xù)業(yè)務(wù)鑒權(quán)，那就是無感的。

如果是 snsapi_userinfo 方式，除了拿鑒權(quán)信息，還要要拿頭像昵稱等信息，可能需要用戶授權(quán)，不過只要關(guān)注了該公眾號，也可以不出現(xiàn)授權(quán)中間頁，也是無感的。

下面說下具體的交互形式。

snsapi_base 場景下，需要綁定一個回調(diào)地址，交互形式是：

1. 根據(jù)標(biāo)準(zhǔn)格式提供鏈接：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

2. 你可以在公眾號菜單跳轉(zhuǎn)這個標(biāo)準(zhǔn)鏈接，或者通過其他網(wǎng)頁跳轉(zhuǎn)這個鏈接。這個鏈接是個微信鑒權(quán)的中間頁，如果鑒權(quán)沒問題就會回調(diào)到 REDIRECT_URI 對應(yīng)的業(yè)務(wù)系統(tǒng)頁面，也就是用戶真正前往的網(wǎng)頁，用戶能感知到的就是網(wǎng)頁的進(jìn)度條加載了兩次，然后就到目標(biāo)頁面了，基本上是無感的。

3. 頁面在回調(diào)時會在 querystring 上攜帶 code 參數(shù)。前端在這個頁面拿到 code 后，可以傳給后端，后端就可以調(diào)下面這個接口得到 token 信息，然后封裝出登錄態(tài)返給前端。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

具體實現(xiàn)時，不一定要在頁面層級上完成 code 換 token 的操作，也可以在應(yīng)用層級上實現(xiàn)。

4. 后續(xù)可以根據(jù)需要進(jìn)行 refreshToken。

snsapi_userinfo 場景下，也是跳一個標(biāo)準(zhǔn)鏈接。與 snsapi_base 場景相比，除了 scope 參數(shù)不一樣，其他都一樣。跳轉(zhuǎn)這個標(biāo)準(zhǔn)鏈接時會根據(jù)有沒有關(guān)注公眾號決定是否要拉起授權(quán)中間頁面。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

接著也可以根據(jù) code 換 token，進(jìn)行必要的 refreshToken。

最重要的是，在 scope=snsapi_userinfo 場景下，還可以發(fā)起獲取用戶信息的請求，這才是它與 snsapi_base 的本質(zhì)區(qū)別。如果 scope 不符合要求，則無法通過調(diào)用下面的接口得到用戶信息。

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

還有一些公告調(diào)整內(nèi)容要注意一下：

• 微信網(wǎng)頁授權(quán)能力調(diào)整公告^[4]

結(jié)語

好了，前端常見的一些登錄方式先整理到這里，實際上還有很多種方案還沒提到，比如生物認(rèn)證登錄，運(yùn)營商驗證登錄等等，后面再補(bǔ)充，只要是雙方互相認(rèn)可的方案，并且能標(biāo)識用戶身份，不管是嚴(yán)格的還是寬松的，都可以拿來做認(rèn)證使用，具體還要根據(jù)你的業(yè)務(wù)特性決定。

參考資料