論H5嵌入APP的聯合登入的解決方案

2022-04-11 18:07:33 字數 1816 閱讀 8739

什麼是聯合登入

上述描述中的一個關鍵點是:如何拿到partnerid

獲取partnerid大體有以三種方案:

就開發複雜度由繁到簡的排序如下:1 > 2 > 3

越複雜自然越安全,所以,安全性也就是以上的排序。

**就不貼了,詳細步驟如下:

獨立**

方案有三種,但有些**是必須得寫的,總結如下:

module.exports = 

這些根據商戶不同**也是不同的,做不到統一解決方案,so,老老實實寫吧。

不過有些**可以做成通用的,開發完成則後續接入可以不用再管了。

通用**

方案1:授權**式

說是最複雜的方案,其實通用**就兩個路由:

前往授權 /toauth:前往需要登入的頁面時(假設地址為a),則先前往此路由,此路由接收一個**地址(a)並儲存在 session 中,然後此路由進入商戶授權頁(此時呼叫獨立**中進入商戶授權頁的函式)

授權** /authback:必須提供給商戶的**路由,當商戶授權頁面中使用者授權後,會返回此路由,使用者的token亦會在query上傳遞回來,通過token去換取partnerid,即執行聯合登入的3、4步後(此時呼叫獨立**中呼叫商戶api獲取partnerid的函式),則取出session中的**地址(例子中的a)並進入

這個方案的通用**其實就是一個前端函式:

根據商戶呼叫其特定的獨立函式:前端能得到partnerid,所以在需要登入之前,先呼叫該商戶的獨立**中的呼叫nativeapi獲取partnerid的函式,得到partnerid,再執行聯合登入的3、4步,最後完成登入操作。

方案3:憑證解密式

這個方案最簡單,只是在入口的路由加一個操作:

儲存加密憑證字串:在入口路由上,將加密憑證存入session中,在需要登入前,則呼叫該商戶的獨立**中的解密字串得到partnerid的函式,得到partnerid,再執行聯合登入的3、4步,最後完成登入操作。

查詢介面

聯合登入的第3步中,會存在兩個api,這些由我們自己開發,分別是:

靜默登入

這種樣的解決方案其實很簡單,在查詢的兩個介面中,存在查詢繫結賬戶的介面,這個介面的功能是:

如果需要滿足上述需求,實際是這個介面永遠返回登入資訊,包括首次登入,如此簡單即可。

因為在呼叫介面時,會傳遞商戶名稱和partnerid,介面開發人員可以根據商戶名進行操作。

例如:平臺cmb需要靜默登入,則後端開發人員在查詢繫結賬戶介面接收引數 partnername,若 partnername === 'cmb',則靜默註冊一個賬號並登入,返回登入資訊,其餘的則正常流程。

而對於多個商戶都有此類需求,可以維護一個 array ,符合array內的條目,進行進行靜默註冊並登入,不符合則走正常的步驟。

快應用的嵌入

快應用頁可以獲取使用者在開放平臺unionid,在進行嵌入開發時,有時候需要拿到unionid和h5的賬戶進行繫結。

封裝web元件可以使用:

內部h5可以使用:

故可以在web元件監聽 onmessage ,得到網頁 system.postmessage 傳送的登入請求時,在快應用層去呼叫登入api,得到partnerid後,再由web元件的 postmessage 將partnerid傳遞給內部h5頁面,而h5則得到partnerid,走正常的聯合登入流程。

個人特別不建議針對一個商戶就寫一套方案,浪費時間且大量重複**,不利於**維護。

雖說有多種情況,但大部分都是可以圍繞三種方案進行延伸拓展,有其他情況再補充,現在就寫到這裡。。

APP內嵌網頁使用微信或支付寶的H5支付

httpheaders headers new httpheaders headers add host wx tenpay com hea...

H5開發基礎 移動端1畫素邊框問題的解決方案

自從喬幫主提出retina屏以來。可練就了不少前端兄弟的畫素眼,有強迫症的夥伴們日子可就煎熬了。為了畫出真正的1畫素邊框,前端猿們也是受盡各...