如今通过扫描二维码然后跳转登录的情形已经很普遍了,这里就来模拟实现一个简单的跳转登录功能
模拟登陆的思路:
建立一张数据表,包含三个字段,分别为主键id,用户名username,随机数randnumber
要生成一张包含有随机数的二维码图片,可以采用联图网(http://www.topscan.com/pingtai/)提供的API接口(http://qr.topscan.com/api.php?text=)只要在链接后缀加上特定文字信息,就可以得到指定的二维码图片了。每生成一张二维码图片,就向数据库插入该随机数,此时用户名字段为空。
客户端如果扫描了二维码图片,就向服务器端发送读取到的随机数以及用户名,通过随机数查找到指定字段,向该字段插入用户名
想要让第二步骤生成的二维码图片知道自己被扫描了然后自动跳转登录,需要第二步骤的生成的网页每隔一段时间就查询username字段是否为空,如果不为空,可知已经被扫描,,从而实现跳转登录
一、搭建服务器端开发环境
为了简化步骤,这里选择集成软件包——XAMPP
XAMPP是一个整合型的Apache套件,包含Apache、MySQL、PHP、PERL,可以一键式搭建起开发环境,推荐初学者使用。官方网址——https://www.apachefriends.org/zh_cn/index.html
双击XAMPP安装包开始安装。
选择全部安装
这里写图片描述
运行软件,点击start开启Apache和MySql,如果文字背景颜色变为绿色,说明服务开启成功。如果失败,先检查电脑中是否已经安装了该服务,或者是端口号冲突,有时候安装完成也需要先重启下电脑。
这里写图片描述
双击MySql一行的Admin按钮,如果能启动如下网页,说明一切无误。
这里写图片描述
二、新建数据表
建立数据库scan_code,再新建数据表scancode,包含三个字段,id和randnumber作为联合主键
这里写图片描述
三、服务器端的设计
这里采用php作为开发语言
首先需要连接数据库:mysql_connection.php
<?php $con=mysql_connect("localhost","root",""); mysql_select_db("scan_code");?>
首页index.php文件主要完成生成二维码图片的操作
生成一个位数为五的随机数字,然后用联图网的API接口生成相应的二维码图片并显示,并将随机数插入到数据库当中
<html> <head> <title>这是首页</title> </head> <body> <?php require 'mysql_connection.php'; $randnumber = ""; for ($i = 0; $i < 5; $i++) { $randnumber .= rand(0, 9); } mysql_query("insert into scancode(randnumber) values('$randnumber')"); ?> <img src="http://qr.topscan.com/api.php?text=<?php echo $randnumber; ?>" width="250px" /> </body></html>
在xampp的安装目录下的htdocs文件夹里再新建个文件夹,命名为php,将以上两个php文件放入当中,开启apache服务器与mysql
在浏览器输入:http://localhost/php/index.php
即可看到一张二维码图片,数据表当中也会多出一行数据
打开二维码网页的源码,也可以看到该随机数
这里写图片描述
这里写图片描述
再建立一个welcome.php文件,作为扫码成功后网页跳转到的链接方向,只包含一句欢迎语句即可
<html><head> <title>欢迎页</title></head><body> 你好啊,叶应是叶</body></html>
为了让inde.php页知道有人已经扫描了二维码,需要让之进行一个轮询操作,每隔一段时间查询数据库表
index.php修改为:
<html> <head> <title>这是首页</title> </head> <body> <?php require 'mysql_connection.php'; $randnumber = ""; for ($i = 0; $i < 5; $i++) { $randnumber .= rand(0, 9); } mysql_query("insert into scancode(randnumber) values('$randnumber')"); ?> <img src="http://qr.topscan.com/api.php?text=<?php echo $randnumber; ?>" width="250px" /> <input hidden="hidden" type="text" id="randnumber" value="<?php echo $randnumber; ?>"/> </body> <script> function polling() { var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange = function() { if(xmlHttp.status == 200 && xmlHttp.readyState == 4) { var result = xmlHttp.responseText; if(result == 'true') { window.location.href = 'welcome.php'; } } } var randnumber = document.getElementById("randnumber").value; xmlHttp.open("GET", "polling.php?randnumber=" + randnumber, true); xmlHttp.send(); } setInterval("polling()", 1000); </script></html>
代码所进行的操作是:每隔一秒执行一次polling()函数,polling()函数又去异步加载polling.php文件,让polling.php文件去进行数据库查询操作,如果查询到的结果是true,则跳转到welcome.php页面,否则继续查询
数据库查询操作:polling.php文件
<?php require 'mysql_connection.php'; $randnumber = $_GET['randnumber']; $result = mysql_query("select * from scancode where randnumber='$randnumber'"); $row = mysql_fetch_array($result); if ($row['username'] != "") { echo "true"; } else { echo "false"; }?>
此时,如果我们向数据库的username字段插入数据,则index.php页面将自动跳转到welcome.php页面
不过我们不可能总是这样来手动输入数据,所以需要自定义一个接口来自动向数据库输入用户名
这里为了简便,都采用get的方式来提交数据
saveUsername.php:
<?php require 'mysql_connection.php'; $randnumber=$_GET['randnumber']; $username=$_GET['username']; mysql_query("update scancode set username='$username' where randnumber='$randnumber'");?>
则如今的操作可简化为:
这里写图片描述
即将“向数据库插入用户名”的操作简化为了访问链接(http://localhost/php/saveUsername.php?username=ye&randnumber=16129)即可,username的值为想要输入的用户名,randnumber为当前二维码页面包含的随机数字
本来,我想在移动端实现扫描二维码的功能,可是找不到适用于Android Studio的二维码扫描开源库,只能作罢
这里提供上述用到的所有php文件:扫码登录
作者:leavesC