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