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

本文主要讲解通过微信小程序实现扫码登录网站的功能，首先你可以访问这个网站体验一下效果。
体验网站地址：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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

微信小程序实现扫码登录网站相关推荐

SSM通过微信小程序实现扫码登录及绑定
需求:用户进入后台个人中心,可扫码绑定微信小程序,后续不再需要输入密码,可直接扫码登录后台扫码登录:用户微信扫码进入小程序,选择已绑定的账号登录进入正题 --------------------- ...
微信小程序实现扫码一键连wifl
微信小程序一键扫码连接WiFi 实例: // pages/connect/connect.js Page({ /*** 页面的初始数据*/ data: {wifiname:'wifi商家',ssid: ...
微信小程序订单扫码结算的步骤
微信小程序订单扫码结算的步骤,在小程序结算中,如果用户下单后到店自提或货到付款的方式,这种情况用户可以提现下单或预定下单,下单成功后,用户到店里自提或等待商家配送到家,在收到订单产品之后,商家扫码用 ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
微信小程序手机扫码上传图片报错500
报错截图如下: **错误产生环境:**微信小程序手机扫描二维码上传图片,一直是正常使用,没有做任何修改,突然有一天扫码上传图片的时候报错. **项目环境:**前后端分离,图片传到后端服务器. 找到问题 ...
自己实现微信小程序实现扫码点餐
本人自己实现的一套小程序扫码点餐例子,如图: 1.登录时首页获得用户的权限: 2.首页,现只有扫码点餐,预约订餐功能未做! 3.点击扫码点餐时,调用扫码功能,识别餐做二维码,既可以访问相册,也可以直接 ...
微信小程序-实现扫码自动连接wifi(android)
项目实路饭店,商铺存在共享的wifi的地方,只需要贴出二维码,用户扫描后自动连接小程序缺点:android6版本 ios11版本图片演示实现代码(IOS没看懂文档说明只简单的带过希望能实 ...
微信小程序自定义扫码界面
选择框架:wepy框架调用微信扫码的api时, wx.scanCode({success (res) {console.log(res)} }) 这个界面是不支持在扫码界面做自定义界面功能的.解决方 ...
微信小程序—调用扫一扫功能，通过扫描二维码连接蓝牙模块
使用微信小程序的扫码功能连接蓝牙,具体操作如下实现流程图 Created with Raphaël 2.2.0准备好二维码小程序调用扫码功能小程序获取到二维码内容(我这里为蓝牙的名字)小程序通过搜索 ...
通过微信扫码登录网站流程
通过微信扫码登录网站微信开放平台文档地址:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Author ...

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

微信小程序实现扫码登录网站相关推荐

最新文章

热门文章