【vue】使用手机app扫描二维码登录

【背景描述】

传统用户名+密码+验证码的登录模式已经令人厌烦了，手机APP扫码登录才是顺应潮流，原本以为很复杂，查了一些资料，后来发现其实实现逻辑很简单，特此记录一下，以后可能会经常用到。

【实现方案】

1. PC端生成二维码

2. 用户使用手机app扫描二维码，跳转授权登录页面

3. 用户点击“确认登录”，后台插入记录

4.与此同时，PC端不断轮询后台接口check用户登陆已否

5.登录成功后，PC端跳转页面到主页，结束

【准备工作】

安装二维码插件vue-qr：https://github.com/Binaryify/vue-qr#readme

【代码实现】

1. 在页面上引入vue-qr插件并完成注册

  import vueQR from 'vue-qr'

components: {'vue-qr': vueQR
},

2. 绘制二维码区域

 <div class="yzl-qrcode-tips"><vue-qr v-if="showQRCode" :text="QRCodeLoginUrl" :size="200" /><el-imagev-elsestyle="width: 200px; height: 200px":src="img_src"fit="cover"@click="initYzlQRLoginCode"/>
</div>

data () {return {// 二维码刷新图片img_src: require('../../assets/img/click_flush.png'),QRCodeLoginUrl: '', // 二维码url地址showQRCode: false, // 是否显示二维码timer: null, // 初始定时器变量名为nullyzl_code: null // 判断用户扫码登录的UUID}
},

这里放置了两个控件，一个是用于渲染二维码的<vue-qr>，一个是用于二维码过期后提示用户点击刷新的图片。二维码不能一直展示给用户，需要设定一个过期时间，一般1分钟，提示用户重新点击获取新的二维码。

3. 页面初始化时便自动加载二维码

created () {// 初始化登录二维码this.initYzlQRLoginCode()
},
methods: {initYzlQRLoginCode () {const _this = thisthis.yzl_code = this.getUUID() // 获取一个随机ID用于登录用户标识const url = 'myappQRCodeGenerateAddress?sys_code=xxxx&yzl_code=' + this.yzl_code // 手机扫码后跳转地址getLoginQRCode(url).then(res => {this.QRCodeLoginUrl = res.qrcode // 二维码URLthis.showQRCode = true// ==== 二维码获取成功 ====// 1.开启轮询接口判断用户是否已完成扫码登录_this.start()// 2. 开启1分钟倒计时setTimeout(function () {_this.QRCodeLoginUrl = ''_this.showQRCode = false_this.end() // 手动停止定时器}, 60000)})}
}

4. initYzlQRLoginCode

二维码实际上是一串手机app可识别的URL地址，当手机扫码后会跳转到一个页面去执行后续的操作，这个函数的目的就是为了获取二维码显示的URL地址。

这里是调用了一个api来获取具体的跳转地址，请注意实际情况会根据APP的不同而有所不同，重点在于需要生成一串手机app可识别的URL地址。

需要注意到这个跳转地址携带了两个参数，sys_code用于区别登录系统，一般是固定的字符串，yzl_code则是用户登陆标识，是一串随机数，用户每刷新一次二维码，这个值也会跟着变化，不是固定的，有效期为1分钟。

5. 手机扫码后一般会出现一个用户授权登录页面

当用户点击确认登录以后，这里会调用一个后台接口，向数据库插入一条用户完成登录的记录，主要字段是sys_code和yzl_code，还要记录登录时间，判断是否过期。

此时前端并没有闲着，当二维码生成以后，前端每隔一段时间就向后台发送一次请求，判断当前用户是否已完成扫码登录，这个过程也体现在initYzlQRLoginCode里

initYzlQRLoginCode除了获取二维码，还干了两件事

1=>开启轮询接口判断用户

前端在生成二维码后就开启了轮询，每隔一段时间向后台发送请求，check当前用户是否已完成扫码登录，如果已经完成登录，会跳转到主页

2=>开启1分钟倒计时

将二维码屏蔽掉，换成提示用户点击刷新的图片，并手动停止定时器，停止轮询请求

// 1.开启轮询接口判断用户是否已完成扫码登录
_this.start()
// 2. 开启1分钟倒计时
setTimeout(function () {_this.QRCodeLoginUrl = ''_this.showQRCode = false_this.end() // 手动停止定时器
}, 60000)

start () {// 将定时器名字赋值到变量中this.timer = setInterval(() => {console.log('开始轮询接口----')const yzl_code = this.yzl_codecheckUserLogin(yzl_code).then(res => {if (res.code === 200) { // 登录成功-200 | 登录失败-203this.end() // 停止轮询 this.$router.push('/home') // 跳转到主页}})}, 2000)
},
end () {clearInterval(this.timer)this.timer = null // 这里最好清除一下，回归默认值// 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行console.log('结束轮询接口----')
}

最后记得在页面销毁的时候定时器销毁

beforeDestroy () {clearInterval(this.timer) // 清除定时器
}

【参考】

92行代码！！！解密哔哩哔哩扫码登陆【超级详细】_哔哩哔哩_bilibili

二维码扫码登录是什么原理

vue中使用setInterval()循环定时器的注意事项 - 知乎

vue页面的定时刷新setInterval()_u013158317的博客-CSDN博客_vue定时器定时刷新

【vue】使用手机app扫描二维码登录相关推荐

WebSocket实现app扫描二维码登录
后台框架采用SpringMVC,不同的框架可根据逻辑更改即可: [思路]- PC端生成二维码,二维码包含uuid(全局唯一标识符),且打通websocket通道,等待服务器返回登录成功信息:APP扫描 ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的腾讯网(www.qq.com)有一个扫码登录功能很有意思, 点击首页一键登录按钮,就会展现一个二维码,用手机qq扫描此二维码就可以使当 ...
电脑版和手机版QQ都要手机版QQ扫描二维码登录？
是的,电脑版和手机版 QQ 都需要使用手机版 QQ 扫描二维码登录.这是因为扫描二维码登录是 QQ 的安全认证方式之一.
App 扫描二维码登陆网站
App 扫描二维码登陆网站 +-----------+-----------+-----------+ | App | Web | Server | +-----------+-----------+ ...
浅谈扫描二维码登录微信网页版与摇一摇传图的实现原理
前言:简单体验了下微信网页版通过二维码登录和摇一摇传图功能,从技术角度看,网上专家吹捧的 [隔空取物]其实并不神秘,我先简单分析一下. 1. 微信移动端扫描二维码登录(C-S-C模式) CSC模式为: ...
百度网盘PC端扫描二维码登录时无法加载二维码问题解决方法
问题: 今天在PC端扫描登录百度网盘时,二维码无法加载出来,具体情况如图: 解决方法: 1.打开IE浏览器 2.打开工具 3.打开Internet选项 4.打开高级选项,重置IE设置 5.点击确定,打 ...
图示扫描二维码登录原理
想要了解手机端扫描二维码登录原理,首先我们要了解二维码和token认证机制两个内容,接下来我们将用图示的方法来直观感受这个面试时候的paper tiger. (第一次用visio画图,用熟练之后就感觉 ...
vue实现调用摄像头扫描二维码
安装依赖:vue-qrcode-reader npm install vue-qrcode-reader -s 直接上代码 <template><div><div cla ...
Teams App 扫描二维码
上篇文章我们讲了如何在app的manifest里设置设备的权限,这篇文章我们来实际操作开发一个可以扫描二维码的teams app. 首先,我们先到app studio里,创建一个teams app,然 ...

【vue】使用手机app扫描二维码登录

【vue】使用手机app扫描二维码登录相关推荐

最新文章

热门文章