仿微信扫码登录系统的实现与改进
扫描二维码
随时随地手机看文章
引 言
扫码登录作为一种新的登录方式,它不仅更为便捷,其不需再次输入用户信息直接扫码登录的方式更意味着减少了账户泄密的风险,相比传统登录方式而言更加安全。同时,登录方式的改变也必将影响到我们生活的点点滴滴,时至今日, 扫码登录已经走进了千家万户。
1 扫码登录的原理
扫码登录的基本原理是手机客户端扫描二维码并从中解析出数据,然后把数据发送给服务器,服务器收到手机客户端发送来的数据后,对数据进行验证匹配,浏览器根据服务器的响应进行相应操作。我们以网页版微信为例,借助浏览器调试工具,简略介绍扫码登录的实现原理。
1.1 扫码登录的操作过程
扫码登录的操作过程分为如下几步:
(1) 打开浏览器,在地址栏输入 https://wx.qq.com/。
(2) 登录微信手机客户端,点击 扫一扫 ,扫描网页上的二维码。
(3) 浏览器与手机客户端界面几乎同时跳转,手机客户端跳转到网页版微信登录确认界面,电脑上显示出用户头像并提示扫描成功。
(4) 手机客户端点击 确认登录 ,网页跳转到用户的微信操作界面。
1.2 扫码登录原理分析
每次打开微信网页版时,网页都会生成一个二维码,虽然二维码的外观相似,但每个二维码里携带的信息均不相同, 且具有一个全局唯一的身份标识符,以确定页面的身份并保证登录用户的唯一性。我们连续三次刷新微信登录界面,使用二维码解析工具解析网页上的二维码,得到的解析结果如下:
https://login.weixin.qq.com/l/oaRRaUdeBw==
https://login.weixin.qq.com/l/IaCQ2k3D-g==
https://login.weixin.qq.com/l/wbnZahDs-w==
由此可以证实我们的推测,每次生成的网页标识符是唯一的,由此网页身份也就确定下来。
页面除了每次生成一个唯一的随机 ID 外,还会每隔一定时间就请求服务器来确定该二维码的扫描状态,判断用户是否进行了扫码登录操作。打开浏览器的调试工具,我们可以获得图 1 所示的信息。
由图 1 可以简单推断出页面的请求周期大约为 27 s。当手机客户端扫码二维码时,把得到的 ID 信息与登录该手机客户端的账号信息绑定,并将该绑定信息上传给服务器。当页面查询到服务器上该 ID 对应的扫描状态发生变化时,获取该 ID 对应的相关数据,然后页面跳转,这样用户就可以进行后续操作了。
2 扫码登录的实现过程
扫码登录的实现过程分为如下几步:
(1) 用户访问页面时,服务器会生成一个全局唯一的 ID, 并将该信息保存到页面的二维码中。
(2) 用户打开并登录手机客户端,扫码二维码。
(3) 手机客户端将扫描到的二维码中的信息和登录该客户端的用户信息发送到服务器。
(4) 服务器收到手机客户端发过来的信息后建立相应的映射关系。
(5) 当页面请求到本页面对应的ID扫描状态改变时,从服务器中取出相应的数据并加载至页面。
40 物联网技术 2016年 / 第12期
完成上述五个步骤之后,扫码登录基本实现,其业务流程如图 2 所示。
3 改 进
在分析扫码登录的基本原理时可以发现,以微信为代表的扫码登录采用HTTP 请求的方式来感知页面的扫描状态。每隔一定时间就发起一次HTTP GET 请求,一直持续到页面的扫描状态发生变化。这样的处理方式虽然简单便捷,但当页面的扫描状态长时间未发生变化时,会有大量 HTTP 请求出现,不仅会造成带宽浪费,还在一定程度上影响到系统的性能。不仅如此,假如请求周期设计不合理,页面往往不能及时响应用户的扫码操作,造成操作失败,严重影响用户体验。传统 HTTP 请求响应交互图如图 3 所示。
既然页面主动感知自己的扫描状态如此困难,那么是否 可以由服务器主动通知页面它的扫描状态已发生变化呢?答案 是肯定的,传统的 HTTP 请求仅能实现单向通信,即页面向服 务器发起请求获取数据,而不能由服务器主动将数据传递给 页面。但在 HTML5 时代,利用 WebSocket 技术可以轻松实 现这个操作。WebSocket 请求响应交互图如图 4 所示。
通过 WebSocket 技术可以更好地优化扫码登录流程。当 服务器接收到手机客户端发过来的扫描数据时,无需等待下 一次页面请求便可直接将数据推送到页面,推动页面进行后 续操作,实现真正意义上的同步跳转。改进后的扫码登录流 程如图 5 所示。
4 结 语
总体而言,在扫码登录时,浏览器获得一个独一无二的 全局性临时身份标识符,手机客户端通过扫描二维码获取该 标识符,并将该标识符与登录用户形成的映射关系发送到服务器,服务器接收到手机端发送的数据后通知浏览器展示相 应信息,并进行随后的交互过程。随着科学技术的发展,登 录方式的改变在给人们带来更加安全便捷的生活体验的同时, 也逐渐改变着人们的生活习惯。相信在不久的未来,随着各种 新技术的应用,我们的明天会更好。