你這個(gè)需求是「小程序端與網(wǎng)頁(yè)端打通同一個(gè)微信用戶體系」,也就是用戶無(wú)論在網(wǎng)頁(yè)掃碼還是小程序使用,都能統(tǒng)一到一個(gè)唯一的賬號(hào)。實(shí)現(xiàn)思路是:用微信的 unionid 作為唯一標(biāo)識(shí)
,通過(guò)掃碼登錄建立關(guān)聯(lián)。下面給你拆解成具體步驟:
一、整體思路
- 小程序端:獲取用戶 openid、unionid 并在你后臺(tái)創(chuàng)建用戶。
- 網(wǎng)頁(yè)端(PC/H5):通過(guò)掃碼授權(quán)獲取 openid、unionid。
- 后臺(tái)系統(tǒng):以 unionid 為唯一用戶主鍵,把小程序和網(wǎng)頁(yè)端的登錄綁定到同一個(gè)賬號(hào)。
- 掃碼場(chǎng)景:網(wǎng)頁(yè)端生成帶參數(shù)二維碼 → 小程序掃碼 → 小程序回調(diào)后臺(tái) → 網(wǎng)頁(yè)端完成登錄。
二、實(shí)現(xiàn)步驟
1. 小程序端賬號(hào)初始化
- 用戶在小程序登錄時(shí),調(diào)用: wx.login({ success: res => { // res.code 發(fā)給后臺(tái) } })
- 后臺(tái)調(diào)用 code2session 接口換取 openid 和 unionid: https://api.weixin.qq.com/sns/jscode2session ?appid=APPID &secret=SECRET &js_code=CODE &grant_type=authorization_code
- 后臺(tái)以 unionid 作為用戶表的唯一 ID(沒有 unionid 時(shí)先用 openid 占位,后續(xù)補(bǔ)全)。
2. 網(wǎng)頁(yè)端掃碼登錄
- 在 PC/H5 網(wǎng)頁(yè)中嵌入微信官方掃碼登錄二維碼(適用微信開放平臺(tái)網(wǎng)站應(yīng)用,或者用公眾號(hào)網(wǎng)頁(yè)授權(quán))。
- 掃碼后,用戶授權(quán) → 后臺(tái)拿到網(wǎng)頁(yè)端的 openid/unionid。
- 后臺(tái)用 unionid 去匹配小程序端用戶表,若存在則直接登錄同一賬號(hào)。
3. 小程序掃碼網(wǎng)頁(yè)二維碼的場(chǎng)景(常用)
- 網(wǎng)頁(yè)端生成一個(gè)「臨時(shí)登錄二維碼」,參數(shù)為 login_token(隨機(jī)字符串),寫到數(shù)據(jù)庫(kù)狀態(tài)為未登錄。 二維碼可用 微信小程序碼 或者 普通二維碼。
- 用戶打開小程序掃碼: 小程序獲取到 login_token,并攜帶自己的 openid/unionid 調(diào)用后臺(tái)接口:/api/scanLoginConfirm。 后臺(tái)標(biāo)記 login_token 已綁定某用戶 ID。
- 網(wǎng)頁(yè)端輪詢或 WebSocket 查詢 login_token 狀態(tài): 一旦被綁定 → 返回登錄成功 → 寫入用戶 session/cookie。 整個(gè)掃碼登錄流程完成。
4. 賬號(hào)唯一性保障
- 關(guān)鍵點(diǎn)在 unionid: 同一微信用戶在同一微信開放平臺(tái)下(小程序 + 公眾號(hào) + 網(wǎng)頁(yè)應(yīng)用),unionid 是相同的。 以 unionid 為主鍵,保證小程序端與網(wǎng)頁(yè)端是同一個(gè)用戶。
- 數(shù)據(jù)庫(kù)表設(shè)計(jì): user ( id bigint pk, unionid varchar unique, openid_mp varchar, -- 公眾號(hào) openid openid_mini varchar, -- 小程序 openid openid_web varchar, -- 網(wǎng)頁(yè)端 openid ... )
三、流程圖(簡(jiǎn)化版)
網(wǎng)頁(yè)端 → 生成二維碼 (login_token)
↓
用戶用小程序掃碼 → 小程序帶用戶信息調(diào)用后臺(tái)綁定 login_token
↓
后臺(tái) → 確認(rèn) login_token 與用戶ID綁定
↓
網(wǎng)頁(yè)端 → 檢測(cè)到 login_token 已綁定,完成登錄