H5嵌入APP的聯(lián)合登錄

什么是聯(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后，我們能夠通過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

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

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

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

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

獨(dú)立代碼

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

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

module.exports = { id: 'a', // 商戶名稱 type: 1, // 接入方案類型}復(fù)制代碼

• 方案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í)寫吧。

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

通用代碼

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

說是最復(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上傳遞回來，通過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，這些由我們自己開發(fā)，分別是：

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

---

其他比較特殊的登錄

靜默登錄

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

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

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

• 通過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，接口開發(fā)人員可以根據(jù)商戶名進(jìn)行操作。

例如：平臺(tái)cmb需要靜默登錄，則后端開發(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è)可以獲取用戶在開放平臺(tái)unionid，在進(jìn)行嵌入開發(fā)時(shí)，有時(shí)候需要拿到unionid和H5的賬戶進(jìn)行綁定。

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

封裝

web組件可以使用：

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

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

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

故可以在web組件監(jiān)聽 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)合登錄流程。

標(biāo)題名稱：H5嵌入APP的聯(lián)合登錄
網(wǎng)站地址：http://www.muchs.cn/news16/98966.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)、虛擬主機(jī)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)