使用微信的掃碼功能實現網站和小程序端用戶賬號統一

前言

上一篇文章(使用小程序內的掃碼功能實現網站和小程序端用戶賬號統一)發表後,微信開放社區大佬楊泉拾憶分別給出了改進建議,總結兩人的建議,就有了用戶體驗更好的方法,直接使用微信掃碼來實現網站和小程序端用戶賬號統一。

先說一下前提,這次的方法都要用到掃普通鏈接二維碼打開小程序來實現功能。在小程序後臺完成相關配置後,直接用微信掃碼就會打開小程序指定頁面個並將網址直接通過參數q帶給頁面。

小程序掃碼登錄網站

在小程序後臺配置中,將二維碼規則設置爲附帶登錄碼的網址(比如:http://www.abc.com/?loginCode=),小程序功能頁面建議設置爲需要登錄才能訪問的頁面,小程序中這個頁面直接訪問時需要判斷是否登錄,未登錄狀態要觸發登錄功能,登錄後原樣返回。

網頁端業務邏輯不變,要登錄時先生成一個唯一的登錄碼,比如:1234,然後放在小程序後臺配置的二維碼規則網址中,比如:http://www.abc.com/?loginCode=1234,然後把這個網址生成二維碼展示。

用戶使用微信掃碼後會自動打開小程序對應頁面,並將二維碼對應網址通過參數q帶給頁面,在onLoad事件中提取q參數並提取出其中的登錄碼,提交到後端接口,後端接口查詢該登錄碼綁定的用戶返回後在小程序端完成登錄。網頁端在展示二維碼後,開啓一個輪詢,定時訪問後端接口查詢該登錄碼的登錄狀態,在該登錄碼和小程序已登錄用戶綁定後完成網站上的用戶登錄。

小程序掃碼登錄小程序

小程序後臺配置和上一個情況一致,網頁端流程略有不同。網頁上用戶登錄後展示帶登錄碼的網址對應的二維碼,同時將當前登錄用戶和登錄碼綁定。微信掃碼打開小程序後提取出登錄碼,提交到後端接口,後端接口查詢該登錄碼綁定的用戶返回後在小程序端完成登錄。還可以配合wx.login綁定當前用戶的openid,實現自動登錄。

網頁端展示二維碼後使用輪詢查看登錄碼的登錄狀態,到期或者已登錄後在網頁端銷燬二維碼。小程序端也需要對當前是否已登錄做一個判斷並做好切換用戶的相關功能。

總結

總結下來,這個方法就是以登錄碼爲媒介,通過在某一端將登錄碼和登錄用戶綁定後,在另一端實現同一用戶的登錄,實際使用中還需要考慮登錄碼的有效期等。

以上方法流程不知道會有什麼風險,歡迎大家的討論。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章