扫码登陆之我见

- 摘要
- 原理
  - 打开网页
  - 扫码阶段
    - 验证阶段
- 准备
  - 搭建环境
    - 服务器环境
    - 第三方依赖
- 后端
  - 数据库
  - 生成二维码
  - 处理确认登陆请求
- 前端
- 效果
  - 首页
  - 扫码
- 拓展
  - 轮询
  - 超时
  - 扫描后失效
- 总结

摘要

前几天买阿里云服务器的时候，被扫码登陆给吸引到了。然后就一直在琢磨自己的实现方式。也许是巧合吧，昨晚竟然在梦中找到了一个自认为还不错的实现思路。但是已经凌晨了，为了防止忘记，赶紧写了个小纸条放在床边。于是今天上午就着手编码做了个雏形。

作此文，以记之。

原理

感觉还是应该先进行声明一下。

纯属个人拙见，如果有些许不当，还望海涵。

按照我扫码登陆的亲身经历，可以分为下面几个阶段。

打开网页

拿阿里云来说，打开首页点击登录按钮之后，就会跳转到下面的这个网页，让我们使用阿里云手机客户端 扫码。
阿里云登陆

扫码阶段

其实我们可能会很疑惑，为什么一扫码，人家就能知道咱扫过了呢？而且就这么真的登陆成功了？

其实如果让我自己来做的话，关键就在于这个阿里云手机客户端。众所周知，二维码只是个用于传递数据的工具，它本身并不能帮助我们确认是否被扫码，被谁扫了。

但是关键就在于这个数据。其实这个数据至关重要，因为借助此数据，手机客户端才能“定位”（这个词不是特别贴切，看完后面的相信就可以明白了。）

验证阶段

然后手机客户端，将客户端上已经登录的您的账号，加上这个数据。
手机端验证

如果在时效内确认，则会登陆成功。
如果时效内未进行验证，则二维码失效。

如此将需要的数据进行打包，然后向服务器发送一个请求，然后服务器通过这个数据定位到数据库中相关的登录表上，然后添加登陆的用户的用户名，确认登陆。然后登陆标记记为已登录，状态。
成功登陆

好了，大致的整个流程就是这样了，是不是很容易也可以理解呢。

准备

“工欲善其事，必先利其器”，所以咱们还是先着手搭建一个好用的环境吧。

搭建环境

可能每个人使用的软件版本会有所不同，但是基本上都是可以正常工作的，如果您正确安装了的话。下面罗列一下我自己的环境。

服务器环境

PHP5.2.8
Apache2.2
MySQL5.7

第三方依赖

另外，本次试验要完成的是扫码登陆，所以必不可少的要生成二维码。在PHP中生成二维码的方式有很多，比较常用的是：

借助google api.可以参照： http://www.jb51.net/article/37775.htm
借助PHP QRCode 库。
- 下载地址：https://sourceforge.net/projects/phpqrcode/?source=typ_redirect
- 使用方式可参照：http://www.jb51.net/article/37775.htm

然后为了更加方便的进行HTML元素的操作，就把JQuery也拿过来好了。
不过这不是必须需要的，如果不想用，可以用原生的JavaScript来实现。
我用的是

jquery-2.2.4.min.js

后端

我感觉上面原理熟悉了之后，后台设计就应该很简单了。先来看看目录结构吧（比较散乱，吸取教训哈）。

数据库

因为这次试验主要是为了实现扫码登陆，所以就直接设计一个登录表好了，虽然实际中肯定不是这样的。也比这要复杂的多。

登陆表设计

id就作为上面讲述的那个特殊的数据。
而创建时间createtime 则是为了时效。而存在。
其余字段不再过多解释。

生成二维码

借助PHP的QRCode库，其实是很方便的。

<?php
    error_reporting(E_ALL);
    ini_set('error_reporting', '1');
session_start();
include "./phpqrcode/phpqrcode.php";

$value = uniqid();
$errorCorrectionLevel = "L";
$matrixPointSize = "4";

// session storage
$_SESSION['uuid'] = $value;
// 向数据库中插入生成的数据
    $link = mysql_connect('localhost', 'root', 'root') or die(mysql_error());
    mysql_query('set names utf8');
    mysql_select_db('test');


    $createtime = date("Y-m-d H:i:s");
    $account = 'guest';
    $isscanned = 0;
    $issuccess = mysql_query("insert into qrcode values('$value', '$account', '$createtime', $isscanned)") or die(mysql_error());

    //var_dump($issuccess);


    if($issuccess==1){
        QRcode::png($value, false, $errorCorrectionLevel, $matrixPointSize);
    }else{
        echo "insert into db failed!";
    }

?>

虽然代码中向数据库中插入了游客账号，但是这并不影响接下来客户端发送请求后对登陆用户及信息的更改。

然后需要注意的是记得在代码的开始处开启session，不然有可能会出错。

处理确认登陆请求

处理登陆请求其实也算是重中之重了。所以handler.php的责任义不容辞。

<?php
    session_start();
    header("Content-Type: text/json;charset=UTF-8");

    $uuid = $_REQUEST['uuid'];
//  echo $uuid;

    // 获取到数据库中与此uuid一致的那一行的用户信息
    $link = mysql_connect('localhost', 'root', 'root') or die(mysql_error());
    mysql_query('set names utf8');
    mysql_select_db('test');

    $resultset = mysql_query("select * from qrcode where id= '$uuid'") or die(mysql_error());
    while(($row=mysql_fetch_array($resultset))) {
        $result[] = $row; 
    }
    mysql_close($link);

    echo json_encode($result);

?>

至于作用嘛，就是网页前台那块用于更改登陆者信息。使用ajax轮询的方式对登录表进行查询，从而来实时的更新状态信息。

ajax请求返回的结果

前端

好了，后台已经搭建好了，这个时候就可以好好的写写前端的代码了。我本人不太懂设计这块，所以就简单的写了下，聊表心意算了。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <title>二维码扫描登陆</title>
        <style>
            .container {
                width: 600px;
                height: 480px;
                position: absolute;

                background: gray;               
                left: 50%;
                margin-left: -300px;
            }

            .header {
                width: 100%;
                height: 64px;
                position: relative;

                background: black;
            }

            .main {
                width: 80%;
                height: 340px;
                position: relative;

                left: 50%;
                margin-left: -30%;
                top: 12%;               

                background: url(921555.png) no-repeat;
                background-size: contain;
            }   

            ul {
                margin: 0px;
                padding: 0px;
                width: auto;
                list-style: none;

                position: relative;
            }
            ul >li {
                float: right;
                position: relative;
            }


            /*    设计显示二维码的空间*/
           .qrcontainer{
                width: 300px;
                height: 300px;
                top: 64px;

                position: relative;
                background: green;
           }
           .qrcontainer > img {
            width: 100%;
            height: 100%;
           }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">

                <ul>
                    <font color="white" size="6" style="margin-top: 6px;">二维码扫描登陆测试</font>
                    <li><font color="white" size="6"><a href="#">登陆</a>/&nbsp;<a href="#">注册</a></font></li>
                </ul>
            </div>
            <div class="main">
                <img id="photo" src="" />
            </div>
        </div>

        <div class="qrcontainer">
            <img id="qrcode" src='./qrcode.php'/>
        </div>

        <input type="hidden" name="uuid" value="<?php session_start(); echo $_SESSION['uuid'];?>"/>

    </body>
    <script src="jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function(){
            var uuid = document.getElementsByName('uuid')[0].value;
            // 想法是通过ajax轮询，请求服务器上的登录状态信息
            $.ajax({
                url: './handler.php',
                type: 'POST',
                async: true,
                data: {
                    'uuid': uuid 
                },

                timeout: 5000,
                dataType: 'json',

                success: function(result){
                    document.getElementById("photo").src = 'photo.jpeg';
                    $(".qrcontainer").css('display', 'none');
                    console.log(result);
                },
                error: function(){
                    console.log('额，AJAX请求出错了！');
                }


            });


        });
    </script>


</html>

效果

观看完人家阿里云的，再来看咱自己的。额，瞬间感觉档次下降了好多啊。

首页

先来看看首页效果图

扫码

扫码这块，我没有另外写一个app。其实原理了解了就行了。 App的作用就是将扫描到的二维码的UUID值，加上用户的用户名等信息传给服务器。

这个时候服务器就可以根据UUID查找到刚才插入到数据库上的信息，然后进行信息的更新操作即可。操作比较简单，这里就不再进行演示了。

前台通过ajax请求就可以获取到：是谁登陆了？这些信息。

这里通过添加一张图片来验证确实通过了验证请求。

登陆成功，添加了一个头像

查看一下后台发送过来的数据，也可以进一步进行验证的啦。
验证后端发送过来的数据

拓展

基本上效果已经实现的差不多了。但是做的仍然不够好。我觉得可以从下面几个角度进行加强。

轮询

上面的代码没有进行轮询处理。其实完全可以设置一个Inerval来进行的。这样才能更加逼真的体现实时性的特点。

超时

想必您也已经看到了数据库中设计好的createtime字段。之所以设置这样的一个字段，就是为了让二维码在一定是的时段内有效。这样可以进一步加强登录操作的安全性。

至于优化部分，使用JavaScript很容易啦。不过多叙述。

扫描后失效

这一点可以通过isscanned字段进行控制。当然了，离不开ajax的配合。通过对此字段的“监控”。就可以很容易的实现这一个效果。

总结

回顾一下本次实验。主要是实现了一个非权威的扫码登陆功能，（雏形一个）。

然后根据代码本身，找到了几个可以进行优化和拓展的方向。想来进一步的话，做成一个更加完善的扫码登陆，也会水到渠成的。

摘要

原理