你这个需求是「小程序端与网页端打通同一个微信用户体系」,也就是用户无论在网页扫码还是小程序使用,都能统一到一个唯一的账号。实现思路是:用微信的 unionid 作为唯一标识
,通过扫码登录建立关联。下面给你拆解成具体步骤:
一、整体思路
- 小程序端:获取用户 openid、unionid 并在你后台创建用户。
- 网页端(PC/H5):通过扫码授权获取 openid、unionid。
- 后台系统:以 unionid 为唯一用户主键,把小程序和网页端的登录绑定到同一个账号。
- 扫码场景:网页端生成带参数二维码 → 小程序扫码 → 小程序回调后台 → 网页端完成登录。
二、实现步骤
1. 小程序端账号初始化
- 用户在小程序登录时,调用: wx.login({ success: res => { // res.code 发给后台 } })
- 后台调用 code2session 接口换取 openid 和 unionid: https://api.weixin.qq.com/sns/jscode2session ?appid=APPID &secret=SECRET &js_code=CODE &grant_type=authorization_code
- 后台以 unionid 作为用户表的唯一 ID(没有 unionid 时先用 openid 占位,后续补全)。
2. 网页端扫码登录
- 在 PC/H5 网页中嵌入微信官方扫码登录二维码(适用微信开放平台网站应用,或者用公众号网页授权)。
- 扫码后,用户授权 → 后台拿到网页端的 openid/unionid。
- 后台用 unionid 去匹配小程序端用户表,若存在则直接登录同一账号。
3. 小程序扫码网页二维码的场景(常用)
- 网页端生成一个「临时登录二维码」,参数为 login_token(随机字符串),写到数据库状态为未登录。 二维码可用 微信小程序码 或者 普通二维码。
- 用户打开小程序扫码: 小程序获取到 login_token,并携带自己的 openid/unionid 调用后台接口:/api/scanLoginConfirm。 后台标记 login_token 已绑定某用户 ID。
- 网页端轮询或 WebSocket 查询 login_token 状态: 一旦被绑定 → 返回登录成功 → 写入用户 session/cookie。 整个扫码登录流程完成。
4. 账号唯一性保障
- 关键点在 unionid: 同一微信用户在同一微信开放平台下(小程序 + 公众号 + 网页应用),unionid 是相同的。 以 unionid 为主键,保证小程序端与网页端是同一个用户。
- 数据库表设计: user ( id bigint pk, unionid varchar unique, openid_mp varchar, -- 公众号 openid openid_mini varchar, -- 小程序 openid openid_web varchar, -- 网页端 openid ... )
三、流程图(简化版)
网页端 → 生成二维码 (login_token)
↓
用户用小程序扫码 → 小程序带用户信息调用后台绑定 login_token
↓
后台 → 确认 login_token 与用户ID绑定
↓
网页端 → 检测到 login_token 已绑定,完成登录