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

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

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

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

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

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

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

例如暴雪登录器，如果你玩魔兽世界或者Diablo3的话，应该会买一个战网密保设备，或者安装手机版的密令。

淘宝也通过手机密保来实现安全验证，那么微信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微信-第一篇，业务分析相关推荐

实现手机扫描二维码页面登录，类似web微信-第三篇，手机客户端
上一篇,介绍了二维码生成的机制,紧接着,我们就要开发手机客户端来识别这个二维码. 二维码,实际上是记录了这个页面的sessionID,目的是为了最后让服务器能通过long polling的机制去通知到 ...
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的腾讯网(www.qq.com)有一个扫码登录功能很有意思, 点击首页一键登录按钮,就会展现一个二维码,用手机qq扫描此二维码就可以使当 ...
微信扫描二维码实现自动跳转微信直接下载App（iOS/Android）的解决方案
微信扫描二维码实现自动跳转微信直接下载App(iOS/Android)的解决方案参考文章: (1)微信扫描二维码实现自动跳转微信直接下载App(iOS/Android)的解决方案 (2)http ...
微信扫描二维码快速登录网站
在近期的一个项目中用到了微信扫描注册.登录网站功能所以整理了下希望对读者有帮助. 首先,你需要有一个没有绑定微信.微信公众平台的邮箱注册成为微信开放平台开发者,在管理中心创建移动应用.或者网站应用获得 ...
HTML 5 手机扫描二维码登陆网页
首先声明我不是专业做前端的,只是一个java开发者,最近要做一个手机版的网站,但是需求要做类似于微信,扫描网页上的二维码登陆网页版微信,以当时认为这东西必须要APP才能支持,因为所有扫描二维码都是必须 ...
Android扫描二维码实现登录网页
工程代码:ScanQRcode.zip ------------------------------------------------------------------ 1. 扫描二维码登录的实现 ...
H5实现手机扫描二维码识别
主要依赖于二维码解析库jsQR,它是一个纯javascript的二维码阅读库. 这个库接收原始图像,并将定位.提取和解析其中发现的任何QR码. jsQR 被设计成一个完全独立的库,用于扫描二维码.按照 ...
我的微信扫描二维码实现登录のJava
微信登录开发参考网址微信官方文档の公众号微信公众平台接口测试账号申请微信公众平台接口在线调试网址我的微信登录开发流程配置一些基本数据 /** * 配置好一些需要用到的数据 */ public ...
面试必看：手机扫描二维码的测试用例（建议收藏）
二维码概述二维码本身就是一个URL,只是通过QR码的形式把URL和用户身份信息转换成二进制的0和1,二维码中黑色的色素块代表1,白色的色素块代表0,我们通过相机扫码,就获取了二维码中的URL 测试用 ...

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

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

最新文章

热门文章