一、 扫描二维码登录的实现机制：
详细流程图：
（1）PC端打开网页（显示出二维码），这时候会保存对应的randnumber（比如：12345678）。
（2）Android客户端扫码登录，Android客户端就会获取到这个randnumber这条信息，这个时候Android客户端携带username（比如：jikexueyuan）保存到数据库中对应于randnumber 的字段中。
（3）PC端网页就会轮询服务器（数据库），查看当前randnumber是否有username，如果有的话就跳转登录页面，没有的话就继续轮询。
二、扫描二维码实现网页登录具体实现过程
1. 建立数据库
（1）开启Apache服务器，开启MySQL数据库，然后在360浏览器中地址栏输入网址：http://localhost/phpmyadmin/index.php（启用phpMyAdmin），如下：
（2）在上面站点上，新建一个数据库命名为"qrlogin"，在这个数据库中新建一个表命名为"login_record"，字段数目为 3，如下：
（3）具体新建的字段内容如下：
2. PHP网页端生成简单的二维码
（1）这里要提到一个生成二维码的API，这个API是联图网提供的，如下：
接下来简单演示一下如何使用上面的API，如下：
• 复制上面的API接口地址，在360地址栏中输入API接口地址：http://qr.topscan.com/api.php?text=hello，这里的"hello"表示是生成二维码携带的数据内容。
（2）编写PHP代码生成二维码，如下：
使用HBuilder创建Web工程，如下图：
其中：index.php，如下：
1 <html> 2 <head> 3 <title>JikexueyuanQRLogin</title> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <?php 8 require 'mysql_connect.php'; 9 $randnumber = ""; 10 for($i=0; $i<8; $i++) 11 $randnumber .=rand(0, 9); 12 mysql_query("insert into login_record (randnumber) values ('$randnumber')"); 13 ?> 14 <img src="http://qr.topscan.com/api.php?text=<?php echo $randnumber; ?>" width="300px"/> 15 16 </body> 17 </html>
还有就是mysql_connect.php（功能块：连接数据库）：
1 <?php 2 $con = mysql_connect("localhost", "root", "123456"); 3 mysql_select_db("qrlogin"); 4 5 ?>
使用浏览器访问QRLogin/index.php文件，如下就会出现一个二维码图片，而且每一次刷新都会根据不同的随机数，对应产生不同的二维码图片。（二维码携带信息就是随机数）。
刷新当前页面两次，我们来到数据库qrlogin中，如下：
3. PHP 轮询数据库
页面只显示了二维码，但是没有登录，这是为什么呢？ 这是因为数据库中randnumber字段对应的username是空（null），不知道如何登录（不提供用户名等信息，谈何登录?），还有就是页面中没有添加登录页面跳转。
回到我们创建的Web工程"QRLogin"，来到index.php文件，如下：
1 <html> 2 <head> 3 <title>JikexueyuanQRLogin</title> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <?php 8 require 'mysql_connect.php'; 9 $randnumber = ""; 10 for($i=0; $i<8; $i++) 11 $randnumber .=rand(0, 9); 12 mysql_query("insert into login_record (randnumber) values ('$randnumber')"); 13 ?> 14 <img src="http://qr.topscan.com/api.php?text=<?php echo $randnumber; ?>" width="300px"/> 15 <!--将在php代码中生成的randnumber,通过下面的方式出传递到JavaScript代码中 ,这个步骤是隐藏的--> 16 <input hidden="hidden" type="text" name="randnumber" id="randnumber" value="<?php echo $randnumber; ?>" /> 17 18 </body> 19 20 <script> 21 function polling() { 22 /* 23 * 执行轮询的操作 24 */ 25 var xmlHttp; 26 //判断浏览器的类型 27 if(window.XMLHttpRequest){//---针对大多数浏览器 28 xmlHttp = new XMLHttpRequest(); 29 } else {//---针对IE内核的浏览器 30 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") 31 } 32 //添加监听事件 33 xmlHttp.onreadystatechange = function() { 34 if(xmlHttp.status == 200 && xmlHttp.readyState == 4) {//200---表示服务器响应正常;4---表示已经准备就绪 35 result= xmlHttp.responseText; 36 if(result == "true") { 37 window.location.href = 'welcome.php'; 38 } 39 } 40 } 41 42 43 44 randnumber = document.getElementById('randnumber').value; 45 /* 46 * open(method, uri,async)：打开网页 47 * 参数method(String):方法名称GET/POST 48 * 参数uri(URIString):待打开的网页资源 49 * 参数async(boolean):是否进行异步加载 50 */ 51 xmlHttp.open("GET","polling.php?randnumber"+randnumber,true); 52 xmlHttp.send();//发送请求 53 54 } 55 setInterval("polling()",1000);//每隔1000ms，执行一次polling() 56 </script> 57 </html>
polling.php代码（轮询数据库）：
1 <?php 2 require 'mysql_connect.php'; 3 $randnumber = $_GET['randnumber']; 4 5 $result = mysql_query("select * from login_record where randnumber='$randnumber'"); 6 $row = mysql_fetch_array($result); //向下移动一行游标 7 if($row['username'] != "") { 8 echo "true"; 9 }else { 10 echo "false"; 11 } 12 13 ?>
welcome.php代码（登录欢迎页面）：
1 hello Jikexueyuan
此时web工程如下：
接着我们来验证我们上面的逻辑是否正确，如下：
• 访问QRLogin/index.php，显示如下二维码信息（携带随机数）：
• 刷新数据库，如下：
• 根据我们上面的轮询逻辑，此时如果我们指定randnumber=62988625 的 username不为空的话，页面就会跳转：
我们手动修改randnumber=62988625对应的字段中 username为：jikexueyuan，如下：
这时候回到上面我们访问的/QRLogin/index.php页面已经跳转到/QRLogin/welcome.php，如下：
上面的逻辑成功。
4. PHP自定API接口
回顾一下之前的逻辑过程：
• 当我们访问QRLogin/index.php网页的时候，PC端浏览器会产生一个二维码，这个二维码对应着一个随机数，这里我们假设这个随机为"12345678"，此时在代码中会把这个随机数randnumber=12345678存储到数据库中，如下：
• 只要这里randnumber对应字段中的username不为空，页面就会跳转，怎么才能让它自动设置username实现页面跳转呢?
这里就需要我们自己定义PHP接口，如下：
接下来我们就来到QRLogin的Web工程，编写PHP的API接口，如下：
saveUsername.php：
1 <?php 2 /* 3 * 自定义API用于android客户端扫码后访问，请指定的username保存的相应的位置 4 * 接收参数 randnumber username 5 * 无返回值 6 */ 7 8 $randnumber = $_GET['randnumber']; 9 $username = $_GET['username']; 10 11 require 'mysql_connect.php'; 12 mysql_query("update login_record set username = '$username' where randnumber = '$randnumber'"); 13 ?>
测试上面的PHP的API接口，如下：
浏览器访问/QRLogin/index.php，刷新显示二维码，如下：
这个时候我们查看数据库，发现新增了一条随机数，如下：
执行PHP的定义的接口，如下：
页面成功发生跳转，如下：
5. Android客户端扫描二维码
在使用Android实现扫描二维码之前，不得不提一下下面这个开源库，https://github.com/zxing/zxing/
上面提到的zxing这个开源库很强大，zxing其中可以实现二维码登录，有人在zxing这个开源库的基础上简剪出一个轻量级的库BarCodeLibary（专门实现扫描二维码）：
（1）首先导入BarCodeLibrary到Eclipse中，如下：
（2）新建一个二维码扫描的Android项目，命名为"QRLogin"，如下：
这时候我们想让当前的"QRLogin"项目是 依赖于 "BarCodeTest"，如下操作：
• 右击项目"QRLogin"，选择属性，如下：
• 点击"Add"按钮，如下：
这时候QRLogin这个项目依赖于BarCodeTest。
（3）进入"QRLogin"开发：
• 首先来到了布局文件activity_main.xml，如下：
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 tools:context="com.himi.qrlogin.MainActivity" > 7 <Button 8 android:id="@+id/btnScan" 9 android:layout_width="match_parent" 10 android:layout_height="wrap_content" 11 android:text="扫码登录"/> 12 </LinearLayout>
布局效果如下：
• 然后来到MainActivity，如下：
1 package com.himi.qrlogin; 2 3 import android.app.Activity; 4 import android.content.Intent; 5 import android.os.Bundle; 6 import android.view.View; 7 import android.view.View.OnClickListener; 8 import android.widget.Button; 9 import android.widget.Toast; 10 11 import com.zxing.activity.CaptureActivity; 12 13 public class MainActivity extends Activity implements OnClickListener { 14 private Button btnScan; 15 16 @Override 17 protected void onCreate(Bundle savedInstanceState) { 18 super.onCreate(savedInstanceState); 19 setContentView(R.layout.activity_main); 20 btnScan = (Button) findViewById(R.id.btnScan); 21 btnScan.setOnClickListener(this); 22 } 23 24 public void onClick(View v) { 25 //扫码操作 26 //CaptureActivity这个Activity功能就是：打开相机扫码二维码 27 Intent intent = new Intent(this, CaptureActivity.class); 28 startActivityForResult(intent, 0); 29 30 } 31 32 /** 33 * onActivityResul方法功能：将CaptureActivity扫码获得的结果反馈给MainActivity 34 */ 35 @Override 36 protected void onActivityResult(int requestCode, int resultCode, Intent data) { 37 // TODO 自动生成的方法存根 38 super.onActivityResult(requestCode, resultCode, data); 39 40 if(resultCode == Activity.RESULT_OK) { 41 String result = data.getExtras().getString("result"); 42 Toast.makeText(this, result, 1).show(); 43 } 44 } 45 46 }
• 想必大家看到了上面MainActivity中我们使用到了CaptureActivity，但是我们在项目QRLogin项目的AndroidMainfest.xml文件中没有声明使用CaptureActivity，运行程序自然会报错强退。
来到上面的BarCodeTest开源库的AndroidMainfest.xml文件中，复制上面第2个activity的标签项内容，到"QRLogin"项目的Androidmainfest.xml中，同时记得添加两个权限如下：
1 <uses-permission android:name="android.permission.CAMERA"/> 2 <uses-permission android:name="android.permission.VIBRATE"/>
这个时候我们看看"QRLogin"项目的AndroidMainfest.xml内容如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3 package="com.himi.qrlogin" 4 android:versionCode="1" 5 android:versionName="1.0" > 6 7 <uses-sdk 8 android:minSdkVersion="15" 9 android:targetSdkVersion="17" /> 10 <uses-permission android:name="android.permission.CAMERA"/> 11 <uses-permission android:name="android.permission.VIBRATE"/> 12 13 <application 14 android:allowBackup="true" 15 android:icon="@drawable/ic_launcher" 16 android:label="@string/app_name" 17 android:theme="@style/AppTheme" > 18 <activity 19 android:name=".MainActivity" 20 android:label="@string/app_name" > 21 <intent-filter> 22 <action android:name="android.intent.action.MAIN" /> 23 24 <category android:name="android.intent.category.LAUNCHER" /> 25 </intent-filter> 26 </activity> 27 <!-- 这个activity标签内容是从BarCodeTest的Androidmainfest.xml中复制过来的 ， 28 因为要使用BarCodeTest中的CaptureActivity 29 --> 30 <activity 31 android:configChanges="orientation|keyboardHidden" 32 android:name="com.zxing.activity.CaptureActivity" 33 android:screenOrientation="portrait" 34 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 35 android:windowSoftInputMode="stateAlwaysHidden" > 36 </activity> 37 </application> 38 39 </manifest>
（4）布署"QRLogin"项目到真机上，如下：
6. Android客户端访问自定义的API实现这个网页登录：
我们再来回顾一下流程图，如下：
（1）回到上面"QRLogin"项目中，其中activity_main.java，如下：
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 tools:context="com.himi.qrlogin.MainActivity" > 7 <EditText 8 android:id="@+id/etUsername" 9 android:layout_width="match_parent" 10 android:layout_height="wrap_content"/> 11 <Button 12 android:id="@+id/btnScan" 13 android:layout_width="match_parent" 14 android:layout_height="wrap_content" 15 android:text="扫码登录"/> 16 </LinearLayout>
布局效果如下：
（2）接着来到MainActivity，如下：
1 package com.himi.qrlogin; 2 3 import android.app.Activity; 4 import android.content.Intent; 5 import android.os.Bundle; 6 import android.view.View; 7 import android.view.View.OnClickListener; 8 import android.widget.Button; 9 import android.widget.EditText; 10 import android.widget.Toast; 11 12 import com.zxing.activity.CaptureActivity; 13 14 public class MainActivity extends Activity implements OnClickListener { 15 private Button btnScan; 16 private EditText etUsername; 17 private static final String WEB_URL="http://172.31.19.202/QRLogin/"; 18 19 @Override 20 protected void onCreate(Bundle savedInstanceState) { 21 super.onCreate(savedInstanceState); 22 setContentView(R.layout.activity_main); 23 btnScan = (Button) findViewById(R.id.btnScan); 24 etUsername = (EditText) findViewById(R.id.etUsername); 25 26 btnScan.setOnClickListener(this); 27 } 28 29 public void onClick(View v) { 30 //扫码操作 31 //CaptureActivity这个Activity功能就是：打开相机扫码二维码 32 Intent intent = new Intent(this, CaptureActivity.class); 33 startActivityForResult(intent, 0); 34 35 } 36 37 /** 38 * onActivityResul方法功能：将CaptureActivity扫码获得的结果反馈给MainActivity 39 */ 40 @Override 41 protected void onActivityResult(int requestCode, int resultCode, Intent data) { 42 // TODO 自动生成的方法存根 43 super.onActivityResult(requestCode, resultCode, data); 44 45 if(resultCode == Activity.RESULT_OK) { 46 String randnumber = data.getExtras().getString("result"); 47 String username = etUsername.getText().toString(); 48 String url = WEB_URL+"saveUsername.php?randnumber=" + randnumber + "&username=" + 49 username; 50 51 //访问url 52 HttpUtils.login(url); 53 } 54 } 55 56 }
这里用到一个我们自定义的工具类HttpUtils，如下：
1 package com.himi.qrlogin; 2 3 import java.net.HttpURLConnection; 4 import java.net.URL; 5 6 public class HttpUtils { 7 public static void login(final String url) { 8 new Thread(new Runnable() { 9 10 public void run() { 11 HttpURLConnection connection; 12 try { 13 connection = (HttpURLConnection) new URL(url).openConnection(); 14 connection.setRequestMethod("GET"); 15 connection.getInputStream(); 16 } catch (Exception e) { 17 // TODO 自动生成的 catch 块 18 e.printStackTrace(); 19 } 20 21 } 22 23 }).start(); 24 } 25 }
（3）特别注意要添加一个网络权限，如下：
1 <uses-permission android:name="android.permission.INTERNET"/>
（4）此时"QRLogin"项目工程一览图，如下：
（5）布署程序到真机上，如下：
