都是本人理解嫩实，筆記大致概念刽辙，不詳細(xì)也并非完全正確，所以僅供參考舶赔。

什么是聯(lián)合登錄

因?yàn)楣井a(chǎn)品的發(fā)展扫倡，會(huì)與第三方的一些商戶進(jìn)行對(duì)接，商戶APP提供入口竟纳，進(jìn)入我們的H5頁(yè)撵溃，從而提供服務(wù)。

而商戶希望用戶在其APP進(jìn)行賬戶登錄后锥累，進(jìn)入H5頁(yè)不再進(jìn)行登錄缘挑，所以我們的H5需要拿到用戶在商戶的賬戶的標(biāo)識(shí)id（暫時(shí)稱之PartnerID），然后與我們的產(chǎn)品的賬戶標(biāo)識(shí)id（暫時(shí)稱之H5ID）進(jìn)行一個(gè)關(guān)聯(lián)桶略，這樣在用戶登錄APP后语淘，我們能夠通過(guò)PartnerID去查詢關(guān)聯(lián)的H5ID以獲取賬戶信息，這樣就可以保持登錄的同步了际歼。

解決方案

上述描述中的一個(gè)關(guān)鍵點(diǎn)是：如何拿到PartnerID

獲取PartnerID大體有以三種方案：

方案1：授權(quán)回調(diào)式惶翻，商戶提供授權(quán)頁(yè)面，H5頁(yè)面需要登錄時(shí)鹅心，先進(jìn)入商戶提供的授權(quán)頁(yè)吕粗，由用戶同意授權(quán)，進(jìn)而獲取PartnerID
方案2：APP接口式旭愧，商戶APP存在nativeAPI颅筋，H5頁(yè)面調(diào)用nativeAPI以獲取PartnerID
方案3：憑證解密式，商戶APP在H5的url的query上添加加密字符串输枯，H5頁(yè)面取之解密后獲取PartnerID

基本說(shuō)遇到的聯(lián)合登錄大多以上三種之一议泵，例如微信授權(quán)登錄，可以視微信為商戶桃熄，微信的unionid即PartnerID先口，微信使用的就是方案1。

另外實(shí)方案1是方案2的一個(gè)完善，商戶提供的授權(quán)頁(yè)上其實(shí)使用了方案2來(lái)獲取PartnerID池充，這樣可以保證自己APP的nativeAPI是由自己的H5頁(yè)所調(diào)用桩引，進(jìn)而增加安全性。

所以說(shuō)收夸，就安全性的排序?yàn)椋? > 2 > 3

越安全開(kāi)發(fā)即越復(fù)雜，所以血崭，開(kāi)發(fā)的復(fù)雜度也就是以上的排序卧惜。

聯(lián)合登錄的詳細(xì)步驟

代碼就不貼了，詳細(xì)步驟如下：

• 1：準(zhǔn)備進(jìn)入一個(gè)H5頁(yè)面夹纫，它需要登錄方可訪問(wèn)
• 2：在進(jìn)入之前先取PartnerID咽瓷，商戶APP未登錄則進(jìn)行APP登錄，再返回PartnerID
• 3：得到PartnerID舰讹，去查詢相應(yīng)的H5ID茅姜，有則存儲(chǔ)賬戶登錄信息進(jìn)入第5步，無(wú)關(guān)聯(lián)則進(jìn)入下一步
• 4：H5登錄頁(yè)進(jìn)行登錄月匣，登錄后得到H5ID钻洒，將H5ID與PartnerID進(jìn)行綁定，并且存儲(chǔ)賬戶登錄信息
• 5：此時(shí)已登錄锄开，進(jìn)入頁(yè)面中

獨(dú)立代碼

方案有三種素标，但有些代碼是必須得寫(xiě)的，總結(jié)如下：

• 配置文件：因?yàn)樯虘舨煌笺玻瑒t接入類型和配置參數(shù)不同头遭，假設(shè)有一個(gè) shanghu.js ，如下代碼：

module.exports = {
  id: 'a', // 商戶名稱
  type: 1, // 接入方案類型
}

• 方案1：“調(diào)用進(jìn)入商戶授權(quán)頁(yè)”和“調(diào)用商戶API獲取PartnerID”的兩個(gè)函數(shù)
• 方案2：“調(diào)用nativeAPI獲取PartnerID”的函數(shù)
• 方案3：“解密字符串得到PartnerID”的函數(shù)

這些根據(jù)商戶不同代碼也是不同的癣诱，做不到統(tǒng)一解決方案计维，so，老老實(shí)實(shí)寫(xiě)吧撕予。

不過(guò)有些代碼可以做成通用的鲫惶，開(kāi)發(fā)完成則后續(xù)接入可以不用再管了。

通用代碼

方案1：授權(quán)回調(diào)式

說(shuō)是最復(fù)雜的方案嗅蔬，其實(shí)通用代碼就兩個(gè)路由：

前往授權(quán) /toAuth：前往需要登錄的頁(yè)面時(shí)（假設(shè)地址為A）剑按，則先前往此路由，此路由接收一個(gè)回調(diào)地址（A）并存儲(chǔ)在 session 中澜术，然后此路由進(jìn)入商戶授權(quán)頁(yè)（此時(shí)調(diào)用獨(dú)立代碼中進(jìn)入商戶授權(quán)頁(yè)的函數(shù)）

授權(quán)回調(diào) /authBack：必須提供給商戶的回調(diào)路由艺蝴，當(dāng)商戶授權(quán)頁(yè)面中用戶授權(quán)后，會(huì)返回此路由鸟废，用戶的token亦會(huì)在query上傳遞回來(lái)猜敢，通過(guò)token去換取PartnerID，即執(zhí)行聯(lián)合登錄的3、4步后（此時(shí)調(diào)用獨(dú)立代碼中調(diào)用商戶API獲取PartnerID的函數(shù)）缩擂，則取出session中的回調(diào)地址（例子中的A）并進(jìn)入

方案2：APP接口式

這個(gè)方案的通用代碼其實(shí)就是一個(gè)前端函數(shù)：

根據(jù)商戶調(diào)用其特定的獨(dú)立函數(shù)：前端能得到PartnerID鼠冕，所以在需要登錄之前，先調(diào)用該商戶的獨(dú)立代碼中的調(diào)用nativeAPI獲取PartnerID的函數(shù)胯盯，得到PartnerID懈费，再執(zhí)行聯(lián)合登錄的3、4步博脑，最后完成登錄操作憎乙。

方案3：憑證解密式

這個(gè)方案最簡(jiǎn)單，只是在入口的路由加一個(gè)操作：

存儲(chǔ)加密憑證字符串：在入口路由上叉趣，將加密憑證存入session中泞边，在需要登錄前，則調(diào)用該商戶的獨(dú)立代碼中的解密字符串得到PartnerID的函數(shù)疗杉，得到PartnerID阵谚，再執(zhí)行聯(lián)合登錄的3、4步烟具，最后完成登錄操作梢什。

查詢接口

聯(lián)合登錄的第3步中，會(huì)存在兩個(gè)api净赴，這些由我們自己開(kāi)發(fā)绳矩，分別是：

• 查詢綁定賬戶：通過(guò)PartnerID查詢關(guān)聯(lián)的H5ID，若存在玖翅，則返回賬戶的登錄信息翼馆，若不存在，則返回?zé)o綁定關(guān)系金度，前端根據(jù)api結(jié)果判斷是否進(jìn)入H5的登錄頁(yè)
• 進(jìn)行賬戶綁定：將PartnerID和H5ID進(jìn)行綁定应媚，返回賬戶的登錄信息

其他比較特殊的登錄

靜默登錄

在上面的過(guò)程中，中間會(huì)有一層綁定的操作猜极，此時(shí)需要內(nèi)部H5頁(yè)進(jìn)行一次登錄中姜，而這樣會(huì)出現(xiàn)兩次登錄的情況：APP登錄后，首次進(jìn)入H5跟伏，H5中登錄并綁定丢胚。

所以，有些商戶有這樣的需求：APP已登錄受扳，則在H5內(nèi)部無(wú)需登錄携龟，即首次進(jìn)入H5也無(wú)需在H5進(jìn)行登錄綁定就可以有登錄狀態(tài)。

這種樣的解決方案其實(shí)很簡(jiǎn)單勘高，在查詢的兩個(gè)接口中峡蟋，存在查詢綁定賬戶的接口坟桅，這個(gè)接口的功能是：

• 通過(guò)PartnerID查詢關(guān)聯(lián)的H5ID，若存在蕊蝗，則返回賬戶的登錄信息仅乓，若不存在，則返回?zé)o綁定關(guān)系蓬戚，進(jìn)入H5的登錄頁(yè)

如果需要滿足上述需求夸楣，實(shí)際是這個(gè)接口永遠(yuǎn)返回登錄信息，包括首次登錄子漩，如此簡(jiǎn)單即可裕偿。

因?yàn)樵谡{(diào)用接口時(shí)，會(huì)傳遞商戶名稱和PartnerID痛单，接口開(kāi)發(fā)人員可以根據(jù)商戶名進(jìn)行操作。

例如：平臺(tái)cmb需要靜默登錄劲腿，則后端開(kāi)發(fā)人員在查詢綁定賬戶接口接收參數(shù) partnerName旭绒，若 partnerName === 'cmb'，則靜默注冊(cè)一個(gè)賬號(hào)并登錄焦人，返回登錄信息挥吵，其余的則正常流程。

而對(duì)于多個(gè)商戶都有此類需求花椭，可以維護(hù)一個(gè) array 忽匈，符合array內(nèi)的條目，進(jìn)行進(jìn)行靜默注冊(cè)并登錄矿辽，不符合則走正常的步驟丹允。

快應(yīng)用的嵌入

快應(yīng)用頁(yè)可以獲取用戶在開(kāi)放平臺(tái)unionid，在進(jìn)行嵌入開(kāi)發(fā)時(shí)袋倔，有時(shí)候需要拿到unionid和H5的賬戶進(jìn)行綁定雕蔽。

首先，快應(yīng)用提供了API以獲取用戶唯一身份標(biāo)識(shí)宾娜，其次批狐，快應(yīng)用本身應(yīng)該視為一個(gè)輕量APP的開(kāi)發(fā)，而快應(yīng)用也提供了一些方法前塔，我們可以封存一些方法和接口嚣艇，由H5以nativeAPI的方式進(jìn)行調(diào)用和開(kāi)發(fā)，故而快應(yīng)用的聯(lián)合登錄應(yīng)該是方案2：APP接口式华弓。

封裝

web組件可以使用：

• postMessage：向內(nèi)部H5推送一個(gè)消息
• onmessage：監(jiān)聽(tīng)內(nèi)部H5的消息

內(nèi)部H5可以使用：

• system.postMessage：向外部web組件推送一個(gè)消息
• system.onmessage：監(jiān)聽(tīng)外部web組件傳遞的消息

故可以在web組件監(jiān)聽(tīng) onmessage 食零，得到網(wǎng)頁(yè) system.postMessage 發(fā)送的登錄請(qǐng)求時(shí)，在快應(yīng)用層去調(diào)用登錄API该抒，得到PartnerID后慌洪，再由web組件的 postMessage 將PartnerID傳遞給內(nèi)部H5頁(yè)面顶燕，而H5則得到PartnerID，走正常的聯(lián)合登錄流程冈爹。

END

個(gè)人特別不建議針對(duì)一個(gè)商戶就寫(xiě)一套方案涌攻，浪費(fèi)時(shí)間且大量重復(fù)代碼，不利于代碼維護(hù)频伤。

雖說(shuō)有多種情況恳谎，但大部分都是可以圍繞三種方案進(jìn)行延伸拓展，有其他情況再補(bǔ)充憋肖，現(xiàn)在就寫(xiě)到這里因痛。。