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

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

什麼是聯合登入

上述描述中的乙個關鍵點是:如何拿到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,走正常的聯合登入流程。

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

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

H5 微信 APP之間的區別

劣勢 功能受到限制,長期運營角度看還存在2個弊端。效果遞減 入口過深 html5手機 優勢 開發技術簡單,研發周期短,使用者接觸成本低,h5的優勢是相容性好,用h5的技術開發出來的應用用在各個平台都適用,且可以在網頁上直接進行除錯和修改,開發和維護的成本較低 開發周期短。h5不足的地方表現在軟體執行...

app內嵌H5遇到的部分坑

1.input元件 input設定type number 鍵盤彈出為數字 問題 1 input的maxlength屬性失效 只能通過輸入事件來對輸入的值進行限制 2 樣式問題 在部分的android手機上面出現樣式問題,需要去掉input的預設樣式 2.select元件 select設定問題 1 禁...

H5跳轉app本地的規則定義

跳轉規則用來進行應用內跳轉,比如跳轉到某個頁面,或者呼叫客戶端提供的相關服務等。url由以下幾個部分組成 a.協議 scheme b.host c.path d.query e.fragment 示例如下 pahaofang view webview?url http 3a 2f 2fwww.bai...