Android 实现扫码登录

如今通过扫描二维码然后跳转登录的情形已经很普遍了,这里就来模拟实现一个简单的跳转登录功能

模拟登陆的思路:

  • 建立一张数据表,包含三个字段,分别为主键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文件:扫码登录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板手动获取 Let’s Encrypt 免费证书教程

1773
来自专栏有趣的Python

最新Django2.0.1在线教育零基础到上线教程(五)1-3

演示地址: http://mxonline.mtianyan.cn 教程仓库地址1: https://github.com/mtianyan/DjangoGe...

4756
来自专栏進无尽的文章

代码管理| 创建自己的私有Cocopods库

iOS组件化的实现基本基于cocoapods,如何使用cocoapods创建自己的组件库,是实现组件化的第一要素,下面就创建自己的私有Cocopods库展开实战...

1044
来自专栏Java技术分享

Idea使用技巧大全

idea 2017破解的方法在上面的网页中 很方便

3215
来自专栏deed博客

GO的第一天–代码的组织

1849
来自专栏丑胖侠

Intellij IDEA Mybatis plugin插件破解安装

Mybatis Plugin插件功能 提供Mapper接口与配置文件中对应SQL的导航 编辑XML文件时自动补全 根据Mapper接口, 使用快捷键生成xml文...

8997
来自专栏happyJared

Hexo,使用bat脚本部署文章

  熟悉Hexo的朋友都知道,写好的Markdown文章应该放到hexo安装目录的source\_posts文件夹下,然后使用命令hexo g -d或者是hex...

862
来自专栏Java后端技术

学会四招让你在linux下安装程序变得简单

  由于最近想自己摸索一些linux下的东西,开始玩起了Linux系统,在安装软件的过程中有诸多的不解和困惑,现在终于搞明白了具体是怎么样的安装步骤和过程,先分...

722
来自专栏Python爬虫实战

MySQL 从零开始:02 MySQL安装

833
来自专栏pangguoming

C# 版dll 程序集合并工具

最近要开发一个控件给同事用,开发中会引用一些第三方DLL,这样交给用户很不方便,希望的效果是直接交付一个DLL文件。网上找了一些资料。  1.       使用...

3647

扫码关注云+社区