Android 实现扫码登录-阿里云开发者社区

开发者社区> 哇咔咔咔凉> 正文

Android 实现扫码登录

简介: 如今通过扫描二维码然后跳转登录的情形已经很普遍了,这里就来模拟实现一个简单的跳转登录功能 模拟登陆的思路: 建立一张数据表,包含三个字段,分别为主键id,用户名username,随机数randnumber 要生成一张包含有随机数的二维码图片,可以采用联图网(http://www.topscan.com/pingtai/)提供的API接口(http://qr.topscan.com/api.php?text=)只要在链接后缀加上特定文字信息,就可以得到指定的二维码图片了。
+关注继续查看

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

模拟登陆的思路:

  • 建立一张数据表,包含三个字段,分别为主键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安装包开始安装。
选择全部安装

img_2b53a73425cb0443a767d4a506c925de.png
这里写图片描述

运行软件,点击start开启Apache和MySql,如果文字背景颜色变为绿色,说明服务开启成功。如果失败,先检查电脑中是否已经安装了该服务,或者是端口号冲突,有时候安装完成也需要先重启下电脑。

img_d764bad8d5b5781602a645c0f59c66bf.png
这里写图片描述

双击MySql一行的Admin按钮,如果能启动如下网页,说明一切无误。

img_980debc851fec2120db16a063c286a89.png
这里写图片描述

二、新建数据表

建立数据库scan_code,再新建数据表scancode,包含三个字段,id和randnumber作为联合主键

img_c28a351751fa1ce6169018964b235199.jpe
这里写图片描述

三、服务器端的设计

这里采用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
即可看到一张二维码图片,数据表当中也会多出一行数据
打开二维码网页的源码,也可以看到该随机数

img_544257b6641cef783a8d768a517c09b2.png
这里写图片描述
img_7eea350a557db65baf0bdad3cd494482.png
这里写图片描述

再建立一个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'");
?>

则如今的操作可简化为:

img_4bed1b730d93ec157cd97eda5265f464.gif
这里写图片描述

即将“向数据库插入用户名”的操作简化为了访问链接(http://localhost/php/saveUsername.php?username=ye&randnumber=16129)即可,username的值为想要输入的用户名,randnumber为当前二维码页面包含的随机数字

本来,我想在移动端实现扫描二维码的功能,可是找不到适用于Android Studio的二维码扫描开源库,只能作罢

这里提供上述用到的所有php文件:扫码登录

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26763 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9980 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11576 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13752 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9139 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4450 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7317 0
23
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载