转载自:http://blog.csdn.net/otangba/article/details/8265896html
上一篇,介绍了二维码生成的机制,紧接着,咱们就要开发手机客户端来识别这个二维码。java
二维码,其实是记录了这个页面的sessionID,目的是为了最后让服务器能经过long polling的机制去通知到这个浏览器。node
建立二维码的时候咱们采用了nodejs的QRcode库,其实若是换了其余的web服务器,也能够有其余的可选包,例如zxing。android
手机上用的比较多的就是zxing库,不过用过的人都知道,zxing库的核心core只是提供二维码的解析,而应用程序自己对摄像头的操做部分必须参考zxing的应用源码。web
那个源码比较的复杂,虽然很好理解,可是代码量太大了。若是要分析那部分源码,文章就要写的长篇大论了,因此这一次,咱们不用zxing库,而选择一个更为高效实用的android二维码扫描组件:zbar浏览器
ZBar不是纯的java代码,而是用了C编译的native library,所以识别的效率上比zxing要高不少。服务器
闲话少说,先看看程序运行的一系列流程吧:微信
第一步,登陆手机软件,咱们作测试用,就只须要输入一个用户名,提交到服务器,返回一个tokensession
为何要作第一步,由于咱们实现手机二维码登陆的基础原则就是咱们的手机客户端必须的登陆的,这样才能做为一个凭据app
例如微信,假如你不登陆是不能扫描的,因此咱们的例子模拟一个登陆的过程
第二步,登陆成功以后,开始扫描,二维码就显示在屏幕上
第三步,扫描完成后,确认是否登陆网页
最后,页面提示登陆完成
下面开始,因为long polling的过程我已经作好,所以手机软件才能正常运行,而今天咱们只说手机客户端,服务器端的内容下一篇再说,因此,咱们先假设全部的接口都OK
手机客户端分为三个Activity,分别为登陆,扫描,确认
先作第一个activity
eclipse创建项目,为了符合android4的UI规范,咱们采用了sherlock actionbar来实现3.x一下版本android系统的actionbar
所以,项目须要引用actionbar lib,sherlock actionbar的库不能直接引用jar包,必需要下载源码而且以lib的方式引用源码
引用完以后,新建一个class,叫作LoginActivity 继承自SherlockActivity
为了要实如今actionbar上的loading进度圈,须要设置窗体的属性
第一个activity界面很简单,就是几个按钮,可是须要有一次和服务器的通讯,也就是登陆的过程若是登陆成功,则显示下一步扫描的按钮,第一个activity很简单
所有代码:
布局文件:
代码里的 privatefinalstatic StringLOGIN_URL ="http://192.168.111.109:8000/moblogin?";
这一行是我本地测试用的模拟验证的服务器地址,和生成二维码的页面同样,都是Nodejs生成的,代码咱们下一篇解释,这个接口接收手机填写的用户名,而且经过sha1进行加密,将加密事后的字符串返回给手机,手机将这个字符串做为token变量而且会传递下去。
下面开始第二个activity,就是扫描界面
首先引用zbar的包,将zbar相关的包拷贝进libs目录
包含的so文件就是c编写的native code
新建类MainActivity继承自SherlockActivity
实现扫描的代码能够从zbar的例子里整,这里不重复
须要把上一个activity传递的token获取,并往下传递
在扫描完成的回调里,咱们将扫描得到sessionID和token一块儿往下一个activity传递
在完成扫描的回调里,咱们把qrcodestring和token都提交给下一个activity
接着,咱们来写第三个activity
仍然建立一个类集成sherlockactivity,类名ConfirmActivity
这个activity在启动的时候,也就意味着,扫描成功了,那么就先通知服务器端,扫描成功,页面也会即时展现出扫描成功,等待手机确认登陆的信息
接下来,若是点确认登陆,则通知服务器确认登陆。
所以咱们有2个接口
private final static StringSCANNED_URL ="http://192.168.111.109:8000/scanned?";
privatefinalstatic StringCONFIRMLOGIN_URL ="http://192.168.111.109:8000/confirmed?";
一个是通知服务器已经成功扫描的http接口,一个是通知服务器确认登陆的接口。参数都是sessionID,也就是二维码带的信息,和用户token。
布局以下:
这样一个手机客户端就完成了,其中用到的http请求的过程以下:
string以下
原创文章,转载请注明出处
【为了方便测试,我把客户端打包上传,能够点这里下载 http://download.csdn.net/detail/otangba/4857059 】
测试程序在运行时能够设置服务器地址,服务器咱们在下一篇会介绍。
实现手机扫描二维码页面登陆,相似web微信-第四篇,服务器端
http://www.cnblogs.com/fengyun99/p/3541256.html
实现手机扫描二维码页面登陆,相似web微信-第三篇,手机客户端
http://www.cnblogs.com/fengyun99/p/3541254.html
实现手机扫描二维码页面登陆,相似web微信-第二篇,关于二维码的自动生成
http://www.cnblogs.com/fengyun99/p/3541251.html
实现手机扫描二维码页面登陆,相似web微信-第一篇,业务分析
http://www.cnblogs.com/fengyun99/p/3541249.html