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

本文主要讲解通过微信小程序实现扫码登录网站的功能,首先你可以访问这个网站体验一下效果。
体验网站地址:https://q.vfaxian.com/
共享轻单
注意:这里是需要先扫码打开微信小程序,然后在小程序里面有个扫码登录的按钮,再去扫描右侧的二维码实现登录。

实现原理

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

微信小程序端

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

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

        }
        else {
         
        }
      }
    })

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

网站后台实现原理

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