文章详情
更多工具
微信小程序扫码登录第三方网站怎么弄？原来这个接口就能实现
1、扫码登录的实现逻辑与适用场景
网站后端先生成一个带参数的二维码,参数里包含小程序路径和自定义标识。用户用微信扫这个码,会自动跳转到你的小程序。小程序获取用户授权后,把登录凭证(code)和参数一起发回网站服务器。服务器拿code去微信接口换取用户的openid和unionid,验证通过就给用户颁发登录态。
这里的关键是UnionID。同一个用户在不同应用(小程序、公众号、网站)里的openid都不一样,但unionid是唯一的。只要把小程序和网站应用绑定到同一个开放平台账号下,就能通过unionid识别出是同一个人。
如果你已经有小程序,又想让PC端用户快速登录,这个方案就很合适。在线教育平台的学员可以在电脑上看课程,用手机扫码就能登录;企业内部系统的员工用企业微信小程序扫码,既安全又方便。电商网站也常用这个功能。用户在电脑上浏览商品,扫码登录后购物车、收藏记录都能同步过来,下单流程会顺畅很多。
2、接口对接的具体步骤
先去微信开放平台注册账号,创建一个"网站应用",填写网站域名、回调地址等信息。审核通过后会拿到AppID和AppSecret,这两个参数后面要用。然后把你的小程序也绑定到这个开放平台账号下。在开放平台管理中心找到"绑定小程序"入口,输入小程序的AppID完成绑定。这一步很重要,绑定后才能获取到unionid。
网站后端需要调用接口生成二维码。二维码内容包含小程序路径(比如pages/login/login)和自定义参数。参数里要带一个state字段,用随机字符串填充,防止CSRF攻击。生成的二维码展示在网站登录页面,同时启动一个定时器,每隔几秒向服务器查询登录状态。因为微信二维码默认5分钟过期,前端最好做个倒计时提示,快过期时自动刷新二维码。如果不想自己处理二维码生成和过期逻辑,可以用八木屋二维码这类工具。它支持在小程序端直接生成二维码,上传文件、图片、视频、音频都能快速转成码,还能设置有效期和扫码次数限制,省去不少开发工作。
用户扫码后,小程序的onLoad生命周期函数会接收到参数。这时调用wx.login获取临时登录凭证code,再用wx.request把code和state一起发送到网站服务器。服务器收到请求后,先校验state是否匹配,防止伪造请求。然后用code调用微信接口换取session_key、openid和unionid。拿到unionid后,在数据库里查询或创建用户记录,生成网站的登录token返回给小程序。小程序收到成功响应后,给用户一个明确提示:"登录成功,请返回电脑继续操作"。网站端的轮询检测到登录态变化,自动跳转到用户中心或之前浏览的页面。
3、常见问题解决与体验优化
如果接口返回的数据里没有unionid字段,先检查小程序和网站应用是否绑定到同一个开放平台。没绑定的话,微信不会返回unionid。还有一种情况是用户从来没在你的小程序里授权过。可以在小程序里加一个授权引导页,让用户点击"允许"按钮,调用wx.getUserProfile获取用户信息。授权过一次后,后续扫码登录就能正常拿到unionid了。
state参数必须用强随机算法生成,长度建议16位以上。服务器收到请求时,要验证state是否存在且未使用过,验证通过后立即标记为已使用。code也只能用一次,使用后要立即失效。如果检测到同一个code被重复使用,说明可能存在重放攻击,应该拒绝请求并记录日志。整个通信过程建议用HTTPS加密,防止登录凭证在传输中被截获。敏感参数不要放在URL里,用POST请求的body传输更安全。
扫码成功后,网站端不要让用户干等着。可以用WebSocket建立长连接,小程序回传数据后立即通知网站端,比轮询更实时。如果用户扫码后没有授权就关闭了小程序,网站端应该给出提示:"检测到您取消了授权,请重新扫码"。二维码过期时,提示文案可以改成"二维码已失效,点击刷新",配一个刷新按钮。移动端访问网站时,可以判断是否在微信浏览器里,如果是就直接跳转到小程序,不用再扫码。如果你的需求是快速生成二维码,不想深度对接微信接口,八木屋二维码提供了小程序端的便捷方案。上传文件、图片、视频、音频都能一键生成码,支持从本地、微信聊天、相册等多种方式选择内容,适合运营人员和中小企业快速上手使用。
