场景描述
现有一需求,需要实现用户扫描二维码即可登录管理后台,常规的登录方式就是使用账号和密码,用户只要输入正确的账号和密码就可以登录,那么个人网站怎么实现呢,简单分析一下就是由服务端签发一个密钥给PC端用于生成二维码,这时我能还不知道谁会扫这个码,由用户主动扫码后携带密钥和谁扫的后服务端通知PC端谁扫了我,知道谁扫了我就可以登录了。这里用户涉及到电脑端、微信小程序由于需要主动推送信息给PC端,PC端拿到谁扫的信息即可实现登录。
如果觉得抽象,可以想象成开房问题。首先让WEB随机生唯一成门牌号,用户扫码得到门牌号,这里不用担心用其他扫描得到门牌号,因为我们只知道门牌号没要钥匙,没有钥匙这是没用的,还不能打开房间的门,当用户扫一扫就拿到门牌号就相当于打电话告诉老板你要这个房间,这时老板也就得到你的信息也就是说谁扫了二维码!好了现在知道是谁了。老板就知道谁要了这个房间然后给他钥匙就可以打开房门!
先看一下效果:
由于需要主动推送信息给pc端,所以用到了WebSocket ,简单介绍一下WebSocket是一种支持双向通讯网络通信协议。
意思就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息
属于服务器推送技术的一种.
特点:
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据(blob对象或Arraybuffer对象)
(5)收到的数据类型 可以使用binaryType 指定, 显式指定收到的二进制数据类型
(6)没有同源限制,客户端可以与任意服务器通信。
(7)协议标识符是ws(握手http)(如果加密,则为wss(tcp +TLS)),服务器网址就是 URL。
开始今天的教学,首先我们需要生成二维码,第一步安装qrcode
npm i qrcode
安装完毕后在login.vue中import qrcode from 'qrcode'
初始化WebSocket,主要onmessage负责服务端发送过来的密钥key,这里就不多赘述。
var options = new Object() as any;
options.with = 500;
options.height = 500;
qrcode.toCanvas(canvas.value, r.data, options);
那么后端只要是需要支持WebSocket,这里用的ehcache作为缓存60秒
配置缓存,30秒或者60秒这里可根据需要配置,新增一个MyCacheEventListener类继承CacheEventListener,当缓存过期通知Pc端更新二维码。
核心代码参考:
我这里用的是微信小程序(uniapp)参考
小程序效果如下:
更多参考源码端(java):webosforjava
小程序端源码(Vue3 +Typescript):webosapp
前端基于(Vue3 + Typescript):vuewebos