实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析

曙光XK 曙光XK     2022-08-03     615

关键词:

转自:http://www.cnblogs.com/fengyun99/p/3541249.html

关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份。

这两天,先实现一套关于web微信扫描二维码页面登录的试验,因为这种模式在我们的很多业务场景里大有前途。

首先介绍一下web微信登录的过程

  1. 手机必须运行微信,并且合法登录
  2. 打开web微信的页面,展示一个二维码
  3. 用手机微信的扫描功能扫描该二维码
  4. 页面立即显示手机已扫描
  5. 手机显示是否确认登录,点击确认
  6. 页面登录

这个过程将传统的web登录转到手机上,并且通过扫描二维码这种流行的形式展现。必须确认,这种方式很好玩也很方便,另外也很安全。

手机,作为一个个人物品,类似密保卡,已经被广泛应用在生成登录验证码的业务中。

 

为了实现整个过程,我们先把整个过程涉及到的业务点分析一下,下面是一张思维导图

通过分析,我们发现主要需要解决的问题是:

手机扫描之后,页面怎么能实时显示,如果我打开多个浏览器,手机扫一个,服务器怎么通知哪个浏览器

如果你还有其他问题,那么不妨先看下去,说不定你的问题不是问题。

开始我说过,手机客户端是一个已经登录的程序,至于这个客户端怎么登录,采用什么方式登录,我们暂且不讨论。总之,登录之后手机必须要获得登录成功的凭证,这个凭证我称为身份token,在服务器端也必须保存这个token已证明用户手机是登录的。

手机客户端通常并不会每次在启动程序的时候都要求你输入密码,例如手机微信或者手机QQ,可能会有过期的机制,但是在短时间内,只要你登录成功过,下次运行就不再需要登录了。那么我们假设token在过期之前没有变化,就算有变化,也一定和服务器是同步的。

那么回到刚才的问题上,服务器怎么通知手机扫描的那个页面进行相应的展示,例如:已扫描

关键问题现在已经找到,其实就是web页面和服务器之间的通信必须是维持的长连接。

通过对微信的web页面数据分析,我们发现,在没有任何操作的时候,web微信维持了一个27秒的request

为什么一个请求会长达27秒呢?难道服务器这么差劲么,当然不是。这个就是我们将要实现的http long polling。

虽然我们有很多种方式实现web和服务器实现长连接,但是除了long polling之外,其他的都或多或少需要一些额外的支持。例如:

客户端轮询,这个完全不考虑,因为不能时时刻刻都去轮询,有时间片差,体验不够好,而且对服务器负载造成很大浪费;

利用flash的socket能力,这个是可以的,不过你不能保证所有浏览器都支持flash,而且也有可能会有防火墙的限制,不过这种解决方案也可以备选;

利用html5的websocket实现,这个也是可以的,不过你也不能保证所有的浏览器都支持html5。

所以我们还是打算使用纯js脚本实现long polling,这样兼容性最好。

下面我来解释一下整个流程的通信过程:

随便说一下,在家没用Mac ,windows上装了visio 2013,体验的确不错,很喜欢。

通过这张图,我们应该确定实现扫描二维码登录页面是可以实现的,我们只要很好的解决long polling,基本上就没有瓶颈了。

结合之前我介绍的XMPP相关技术,如果这里不是web server,而是一个XMPPserver。

比如我的手机客户端就是xmpp客户端,通过xmpp和服务器通信,也没有问题,一方面,XMPP服务器提供BOSH的模式,而BOSH本身就是long polling的服务器实现,对于客户端来说,我们可以选择基于flash的strophe.js(这货看起来是js,其实还是用的flash),或者干脆,我们就用jquery来实现。

为了让我们的实现更具普遍性,我们将采用nodejs来实现服务器端,web客户端采用jquery,而手机客户端就用http协议提交

今天我们先把业务简单分析一下,下一篇,我就带着大家一步一步实现这个精彩的例子。

实现手机扫描二维码页面登录,类似web微信-第四篇,服务器端

...的接口一共有6个,分别处理: 手机客户端登录首页二维码图片流longpoll 查看详情

关于《手机扫描电脑二维码登录原理》的学习

技术学习:手机扫描电脑二维码登录原理通用地实现方式(以登录电脑浏览器网页版微信为例):  1.每打开一次微信(Client)电脑浏览器网页时会随机生成一个含有唯一uid的二维码,每次刷新页面都会不一样(*这个可以保证一个uid... 查看详情

微信扫描登录

微信扫描登录本文主要介绍如何实现使用微信的二维码扫描登录系统功能。功能需求PC系统功能,希望借用微信的oauth授权方式,来实现本系统的登录。而最简单的方式就是用户通过扫描二维码,然后在手机端进行确... 查看详情

手机扫二维码登录是怎么实现的?(代码片段)

...道访问者是谁;②用户A打开自己的手机微信并扫描这个二维码,并提示用户是否确认登录;③手机上的微信是登录状态,用户点击确认登录后,手机上的微信客户端将微信账号和这个扫描得到的ID一起提交到服务器;④服务器将... 查看详情

vue中,使用手机钉钉扫描二维码登录

最新项目要做一个,使用手机钉钉扫描二维码登录pc系统的功能,手机扫码二维码后,会弹出一个确定登录的页面,点击确定之后,pc端就会登录进去 第一步:查看钉钉开发平台钉钉开发平台(钉钉官网)从官网中了解到:... 查看详情

网站应用集成微信登录

...中,或者微信中打开网站,点击微信图标同样是弹出扫描二维码的页面,长按二维码也不管用,因为本来就是手机打开的网站,怎么在微信中扫二维码,这里 查看详情

微信公众号登录方法

...全保护页面,需要该公众号的管理员微信号扫描页面中的二维码,验证登录。  4、在手机上登录该公众号的管理员微信号,点击右上角的“加号”图标。  5、然后在弹出的菜单栏中,找到【扫一扫】,手机对准电脑上的二... 查看详情

java二维码扫码登录运用了啥技术

1.Web页面生成二维码生成的二维码中必须要包含一个用于唯一标识用户的数据,这个唯一标识是为了确保将客户端(手机)与web网页绑定,避免其他人登录了你的账号。在这里可以生成以个随机的guid作为唯一标识。生成二维码,... 查看详情

java实现手机扫描二维码进行登录

...t.com/article/2581.html 项目结构:实现流程:pc端:1:打开二维码登录网页index.html2:index.html调用GetQrCodeServlet3:GetQrCodeServlet干2件事  a:生成随机的uuid,是一个唯一标识,该标识贯穿整个流程  b:生成二维码图片,二维码信息:htt... 查看详情

基于signalr的消息推送与二维码描登录实现

...   使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛。为了满足ios、android客户端与web短信平台的结合,特开发了基于SinglarR消息推送机制的扫描登录。... 查看详情

手机怎么登录网页微信?

...如下图界面。电脑上浏览器打开后,通过手机微信扫一扫二维码。然后手机上点击“登录”就可以了。手机忘带了,怎么登陆网页版微信电脑端,浏览器中百度输入网页微信,选择“微信网页版”。也可直接输入网址,见图片。2... 查看详情

微信小程序都是扫码即登录吗

...然后在小程序里面有个扫码登录的按钮,再去扫描右侧的二维码实现登录。实现原理1、打开网站生成一个带参数的二维码;2、打开微信小程序后扫描刚生成的二维码;3、小程序将该微信用户的openID,二维码上的参数发送到后台... 查看详情

实现微信扫一扫跳转到小程序指定页面(代码片段)

...页面前言一、微信小程序平台配置二、前端uniapp中的获取二维码信息三.后端处理参数总结前言使用场景:例如我们经常用到的共享充电宝,首先我们需要使用手机上的微信,打开微信扫一扫,扫描共享充电宝上的... 查看详情

微信扫描二维码登录网站技术原理

微信扫描二维码登录网站 网站应用微信登录开发指南 微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能。微信开放平台的网址是https://open.weixin.qq.com准备工作网站应用微信登录是基于OAuth2.0协议... 查看详情

基于signalr的消息推送与二维码描登录实现(代码片段)

...   使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛。为了满足ios、android客户端与web短信平台的结合,特开发了基于SinglarR消息推送机制的扫描登录。... 查看详情

微信扫描二维码无效是怎么回事?

参考技术A微信扫描二维码无效是怎么回事?微信下载:微信安卓版 、微信iPhone版 、微信电脑版。使用微信的“扫一扫”在扫描某个二维码时,尽然出现如下情况:原因是该二维码不支援直接下载,可以点选又上角图示... 查看详情

使用asp.netcoresignalr实现app扫描登录

...安全性,很多APP端都会提供一个扫码登录功能,web端生成二维码,APP扫码直接登录web端,无需再次输入账号密码。2.实现流程图3.代码运行环境ASP.NETCORE7.0VS2022本案例为了操作方便,并没有操作db,直接硬编码了一个账号:admin密码:... 查看详情

微信扫描二维码登录网站技术原理

...自:http://www.cnblogs.com/txw1958/p/scan-qrcode-login.html微信扫描二维码登录网站 网站应用微信登录开发指南微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能。微信开放平台的网址是https://open.weixin.qq.com准备... 查看详情