轉載自: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