微信小程序实现扫码登录网站

最新推荐文章于 2025-10-08 12:52:02 发布

转载最新推荐文章于 2025-10-08 12:52:02 发布 · 1w 阅读

18 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/852e3fc98945

文章标签：

#小程序

本文主要讲解通过微信小程序实现扫码登录网站的功能，首先你可以访问这个网站体验一下效果。
体验网站地址：https://q.pangsuan.com/

在这里插入图片描述
注意：这里是需要先扫码打开微信小程序，然后在小程序里面有个扫码登录的按钮，再去扫描右侧的二维码实现登录。

实现原理

1、打开网站生成一个带参数的二维码；
2、打开微信小程序后扫描刚生成的二维码；
3、小程序将该微信用户的openID，二维码上的参数发送到后台，此时后台如果没有该用户就创建用户，并更新openID和参数，有用户信息直接更新二维码上的参数即可。
4、打开的网站页面去轮询后台数据，看是否有更新的二维码。
5、如果有二维码的参数在后台数据中，就登录成功。
6、如果到了一定时间还没有轮询到数据，就结束轮询，提示用户重新操作。

在这里插入图片描述
微信小程序端

在页面或者菜单栏增加一个按钮，bindtap里面绑定维修扫码，去扫描网站给出的二维码，获取相关参数。

scan: function () {
    wx.scanCode({
      success: (res) => {
        console.log(res)

        }
        else {

        }
      }
    })

扫码后将二维码参数和自己的微信openID提交到后台去。

网站后台实现原理

首先我们生成一个带参数的二维码，这样微信扫码的时候就可以获取到这个参数，用户通过小程序扫码成功后，会发送用户的openID和二维码上的参数给后台，后台接收到数据后根据openID判断是否有该用户，如果有就更新参数即可，如果没有，可以创建一个新用户，并更新参数。
在网站的扫码页面，可以做一个轮询，去检查数据库是否有网站生成的二维码上的参数，如果有就表示用户扫码成功，网站也跳到登录成功的状态，如果没有到一定时间后结束轮询，提示二维码过期。

作者：胖蒜网
链接：https://www.jianshu.com/p/852e3fc98945
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。