OStack程序员社区-中国程序员成长平台 › 门户 › 编程› PHP›PHP编程经验

PHP 扫码登录原理及实现

原作者: [db:作者] 来自: [db:来源] 收藏邀请

由于扫码登录比账号密码登录更方便、快捷、灵活，在实际使用中更受到用户的欢迎。

本文主要介绍了扫码登录的原理及整体流程，包含了二维码的生成/获取、过期失效的处理、登录状态的监听。

整体流程

为方便理解，我简单画了一个 UML 时序图，用以描述扫码登录的大致流程！

总结下核心流程：

请求业务服务器获取用以登录的二维码和 UUID。
通过 websocket 连接 socket 服务器，并定时(时间间隔依据服务器配置时间调整)发送心跳保持连接。
用户通过 APP 扫描二维码，发送请求到业务服务器处理登录。根据 UUID 设置登录结果。
socket 服务器通过监听获取登录结果，建立 session 数据，根据 UUID 推送登录数据到用户浏览器。
用户登录成功，服务器主动将该 socker 连接从连接池中剔除，该二维码失效。

关于客户端标识

也就是 UUID，这是贯穿整个流程的纽带，一个闭环登录过程，每一步业务处理都是围绕该次的 UUD 进行处理的。UUID 的生成有根据 session_id 的也有根据客户端 ip 地址的。个人还是建议每个二维码都有单独的 UUID，适用场景更广一些！

关于前端和服务器通讯

前端肯定是要和服务器保持一直通讯的，用以获取登录结果和二维码状态。看了下网上的一些实现方案，基本各个方案都有用的：轮询、长轮询、长链接、websocket。也不能肯定的说哪个方案好哪个方案不好，只能说哪个方案更适用于当前应用场景。个人比较建议使用长轮询、websocket 这种比较节省服务器性能的方案。

关于安全性

扫码登录的好处显而易见，一是人性化，再就是防止密码泄漏。但是新方式的接入，往往也伴随着新的风险。所以，很有必要再整体过程中加入适当的安全机制。例如：

强制 HTTPS 协议
短期令牌
数据签名
数据加密

扫码登录的过程演示

代码实现和源码后面会给出。

开启 Socket 服务器

访问登录页面

可以看到用户请求的二维码资源，并获取到了 qid 。

获取二维码时候会建立相应缓存，并设置过期时间：

之后会连接 socket 服务器，定时发送心跳。

此时 socket 服务器会有相应连接日志输出：

用户使用 APP 扫码并授权

服务器验证并处理登录，创建 session，建立对应的缓存：

Socket 服务器读取到缓存，开始推送信息，并关闭剔除连接：

前端获取信息，处理登录：

扫码登录的实现

注意：本 Demo 只是个人学习测试，所以并未做太多安全机制！

Socket 代理服务器

使用 Nginx 作为代理 socke 服务器。可使用域名，方便做负载均衡。本次测试域名：loc.websocket.net

websocker.conf

server {
    listen       80;
    server_name  loc.websocket.net;
    root   /www/websocket;
    index  index.php index.html index.htm;
    #charset koi8-r;

    access_log /dev/null;
    #access_log  /var/log/nginx/nginx.localhost.access.log  main;
    error_log  /var/log/nginx/nginx.websocket.error.log  warn;

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
        proxy_pass http://php-cli:8095/;
        proxy_http_version 1.1;
        proxy_connect_timeout 4s;
        proxy_read_timeout 60s;
        proxy_send_timeout 12s;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

Socket 服务器

使用 PHP 构建的 socket 服务器。实际项目中大家可以考虑使用第三方应用，稳定性更好一些！

QRServer.php

<?php

require_once dirname(dirname(__FILE__)) . '/Config.php';
require_once dirname(dirname(__FILE__)) . '/lib/RedisUtile.php';
require_once dirname(dirname(__FILE__)) . '/lib/Common.php';

/**
 * 扫码登陆服务端
 * Class QRServer
 * @author BNDong
 */
class QRServer {

    private $_sock;
    private $_redis;
    private $_clients = array();

    /**
     * socketServer constructor.
     */
    public function __construct()
    {
        // 设置 timeout
        set_time_limit(0);

        // 创建一个套接字（通讯节点）
        $this->_sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die("Could not create socket" . PHP_EOL);
        socket_set_option($this->_sock, SOL_SOCKET, SO_REUSEADDR, 1);

        // 绑定地址
        socket_bind($this->_sock, \Config::QRSERVER_HOST, \Config::QRSERVER_PROT) or die("Could not bind to socket" . PHP_EOL);

        // 监听套接字上的连接
        socket_listen($this->_sock, 4) or die("Could not set up socket listener" . PHP_EOL);

        $this->_redis  = \lib\RedisUtile::getInstance();
    }

    /**
     * 启动服务
     */
    public function run()
    {
        $this->_clients = array();
        $this->_clients[uniqid()] = $this->_sock;

        while (true){
            $changes = $this->_clients;
            $write   = NULL;
            $except  = NULL;
            socket_select($changes,  $write,  $except, NULL);
            foreach ($changes as $key => $_sock) {

                if($this->_sock == $_sock){ // 判断是不是新接入的 socket

                    if(($newClient = socket_accept($_sock))  === false){
                        die('failed to accept socket: '.socket_strerror($_sock)."\n");
                    }

                    $buffer   = trim(socket_read($newClient, 1024)); // 读取请求
                    $response = $this->handShake($buffer);
                    socket_write($newClient, $response, strlen($response)); // 发送响应
                    socket_getpeername($newClient, $ip); // 获取 ip 地址

                    $qid = $this->getHandQid($buffer);
                    $this->log("new clinet: ". $qid);

                    if ($qid) { // 验证是否存在 qid
                        if (isset($this->_clients[$qid])) $this->close($qid, $this->_clients[$qid]);
                        $this->_clients[$qid] = $newClient;
                    } else {
                        $this->close($qid, $newClient);
                    }

                } else {

                    // 判断二维码是否过期
                    if ($this->_redis->exists(\lib\Common::getQidKey($key))) {

                        $loginKey = \lib\Common::getQidLoginKey($key);
                        if ($this->_redis->exists($loginKey)) { // 判断用户是否扫码
                            $this->send($key, $this->_redis->get($loginKey));
                            $this->close($key, $_sock);
                        }

                        $res = socket_recv($_sock, $buffer,  2048, 0);
                        if (false === $res) {
                            $this->close($key, $_sock);
                        } else {
                            $res && $this->log("{$key} clinet msg: " . $this->message($buffer));
                        }
                    } else {
                        $this->close($key, $this->_clients[$key]);
                    }

                }
            }
            sleep(1);
        }
    }

    /**
     * 构建响应
     * @param string $buf
     * @return string
     */
    private function handShake($buf){
        $buf    = substr($buf,strpos($buf,'Sec-WebSocket-Key:') + 18);
        $key    = trim(substr($buf, 0, strpos($buf,"\r\n")));
        $newKey = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));
        $newMessage = "HTTP/1.1 101 Switching Protocols\r\n";
        $newMessage .= "Upgrade: websocket\r\n";
        $newMessage .= "Sec-WebSocket-Version: 13\r\n";
        $newMessage .= "Connection: Upgrade\r\n";
        $newMessage .= "Sec-WebSocket-Accept: " . $newKey . "\r\n\r\n";
        return $newMessage;
    }

    /**
     * 获取 qid
     * @param string $buf
     * @return mixed|string
     */
    private function getHandQid($buf) {
        preg_match("/^[\s\n]?GET\s+\/\?qid\=([a-z0-9]+)\s+HTTP.*/", $buf, $matches);
        $qid = isset($matches[1]) ? $matches[1] : '';
        return $qid;
    }

    /**
     * 编译发送数据
     * @param string $s
     * @return string
     */
    private function frame($s) {
        $a = str_split($s, 125);
        if (count($a) == 1) {
            return "\x81" . chr(strlen($a[0])) . $a[0];
        }
        $ns = "";
        foreach ($a as $o) {
            $ns .= "\x81" . chr(strlen($o)) . $o;
        }
        return $ns;
    }

    /**
     * 解析接收数据
     * @param resource $buffer
     * @return null|string
     */
    private function message($buffer){
        $masks = $data = $decoded = null;
        $len = ord($buffer[1]) & 127;
        if ($len === 126)  {
            $masks = substr($buffer, 4, 4);
            $data = substr($buffer, 8);
        } else if ($len === 127)  {
            $masks = substr($buffer, 10, 4);
            $data = substr($buffer, 14);
        } else  {
            $masks = substr($buffer, 2, 4);
            $data = substr($buffer, 6);
        }
        for ($index = 0; $index < strlen($data); $index++) {
            $decoded .= $data[$index] ^ $masks[$index % 4];
        }
        return $decoded;
    }

    /**
     * 发送消息
     * @param string $qid
     * @param string $msg
     */
    private function send($qid, $msg)
    {
        $frameMsg = $this->frame($msg);
        socket_write($this->_clients[$qid], $frameMsg, strlen($frameMsg));
        $this->log("{$qid} clinet send: " . $msg);
    }

    /**
     * 关闭 socket
     * @param string $qid
     * @param resource $socket
     */
    private function close($qid, $socket)
    {
        socket_close($socket);
        if (array_key_exists($qid, $this->_clients)) unset($this->_clients[$qid]);
        $this->_redis->del(\lib\Common::getQidKey($qid));
        $this->_redis->del(\lib\Common::getQidLoginKey($qid));
        $this->log("{$qid} clinet close");
    }

    /**
     * 日志记录
     * @param string $msg
     */
    private function log($msg)
    {
        echo '['. date('Y-m-d H:i:s') .'] ' . $msg . "\n";
    }
}

$server = new QRServer();
$server->run();

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫码登录 - 测试页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./public/css/main.css">
</head>
<body translate="no">

<div class='box'>
    <div class='box-form'>
        <div class='box-login-tab'></div>
        <div class='box-login-title'>
            <div class='i i-login'></div><h2>登录</h2>
        </div>
        <div class='box-login'>
            <div class='fieldset-body' id='login_form'>
                <button onclick="openLoginInfo();" class='b b-form i i-more' title='Mais Informações'></button>
                <p class='field'>
                    <label for='user'>用户账户</label>
                    <input type='text' id='user' name='user' title='Username' placeholder="请输入用户账户/邮箱地址" />
                </p>
                <p class='field'>
                    <label for='pass'>用户密码</label>
                    <input type='password' id='pass' name='pass' title='Password' placeholder="情输入账户密码" />
                </p>
                <label class='checkbox'>
                    <input type='checkbox' value='TRUE' title='Keep me Signed in' /> 记住我
                </label>
                <input type='submit' id='do_login' value='登录' title='登录' />
            </div>
        </div>
    </div>
    <div class='box-info'>
        <p><button onclick="closeLoginInfo();" class='b b-info i i-left' title='Back to Sign In'></button><h3>扫码登录</h3>
        </p>
        <div class='line-wh'></div>
        <div style="position: relative;">
            <input type="hidden" id="qid" value="">
            <div id="qrcode-exp">二维码已失效<br>点击重新获取</div>
            <img id="qrcode" src="" />
        </div>
    </div>
</div>
<script src='./public/js/jquery.min.js'></script>
<script src='./public/js/modernizr.min.js'></script>
<script id="rendered-js">
    $(document).ready(function () {

        restQRCode();
        openLoginInfo();
        $('#qrcode-exp').click(function () {
            restQRCode();
            $(this).hide();
        });
    });

    /**
     * 打开二维码
     */
    function openLoginInfo() {
        $(document).ready(function () {
            $('.b-form').css("opacity", "0.01");
            $('.box-form').css("left", "-100px");
            $('.box-info').css("right", "-100px");
        });
    }

    /**
     * 关闭二维码
     */
    function closeLoginInfo() {
        $(document).ready(function () {
            $('.b-form').css("opacity", "1");
            $('.box-form').css("left", "0px");
            $('.box-info').css("right", "-5px");
        });
    }

    /**
     * 刷新二维码
     */
    var ws, wsTid = null;
    function restQRCode() {

        $.ajax({
            url: 'http://localhost/qrcode/code.php',
            type:'post',
            dataType: "json",
            async: false,
            success:function (result) {
                $('#qrcode').attr('src', result.img);
                $('#qid').val(result.qid);
            }
        });

        if ("WebSocket" in window) {
            if (typeof ws != 'undefined'){
                ws.close();
                null != wsTid && window.clearInterval(wsTid);
            }

            ws = new WebSocket("ws://loc.websocket.net?qid=" + $('#qid').val());

            ws.onopen = function() {
                console.log('websocket 已连接上！');
            };

            ws.onmessage = function(e) {
                // todo: 本函数做登录处理，登录判断，创建缓存信息！
                console.log(e.data);
                var result = JSON.parse(e.data);
                console.log(result);
                alert('登录成功：' + result.name);
            };

            ws.onclose = function() {
                console.log('websocket 连接已关闭！');
                $('#qrcode-exp').show();
                null != wsTid && window.clearInterval(wsTid);
            };

            // 发送心跳
            wsTid = window.setInterval( function () {
                if (typeof ws != 'undefined') ws.send('1');
            }, 50000 );

        } else {

            // todo: 不支持 WebSocket 的，可以使用 js 轮询处理，这里不作该功能实现！
            alert('您的浏览器不支持 WebSocket！');
        }
    }
</script>
</body>
</html>

登录处理

测试使用，模拟登录处理，未做安全认证！！

<?php

require_once dirname(__FILE__) . '/lib/RedisUtile.php';
require_once dirname(__FILE__) . '/lib/Common.php';

/**
 * -------  登录逻辑模拟 --------
 * 请根据实际编写登录逻辑并处理安全验证
 */

$qid = $_GET['qid'];
$uid = $_GET['uid'];

$data = array();
switch ($uid)
{
    case '1':
        $data['uid']  = 1;
        $data['name'] = '张三';
        break;

    case '2':
        $data['uid']  = 2;
        $data['name'] = '李四';
        break;
}

$data  = json_encode($data);
$redis = \lib\RedisUtile::getInstance();
$redis->setex(\lib\Common::getQidLoginKey($qid), 1800, $data);

完整 Demo 源码：BNDong/demo/scanCodeLogin

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

php的ftp函数简单应用发布时间：2022-07-10

PHP ini_set发布时间：2022-07-10

krishnaik06/Machine-Learning-in-90-days

1 librespeed/speedtest: Self-hosted Speedt

librespeed/speedtest: Self-hosted Speedtest for HTML5 and more. Easy setup, exam

阅读：1294|2022-08-30

2 avehtari/BDA_m_demos: Bayesian Data Anal

avehtari/BDA_m_demos: Bayesian Data Analysis demos for Matlab/Octave

阅读：1206|2022-08-17

3 四维彩超怎么看性别？四维看男孩女孩诀窍

女人怀孕后，为了有一个健康聪明的宝宝，经历各种体检、筛查。其实这些体检和筛查中的

阅读：1003|2022-11-06

4 CVE-2022-2488

A vulnerability was found in WAVLINK WN535K2 and WN535K3 and classified as criti

阅读：958|2022-07-29

5 medfreeman/markdown-it-toc-and-anchor: m

medfreeman/markdown-it-toc-and-anchor: markdown-it plugin to add a toc and ancho

阅读：1407|2022-08-18

6 cucci是什么牌子？盘点排名前十的潮流墨镜

古驰 cucci用中文翻译过来就是古驰的，意大利奢侈品牌，下面博主为大家盘点排名前十的

阅读：562|2022-07-30

7 fabric8io/fabric8: fabric8 is an open so

fabric8io/fabric8: fabric8 is an open source microservices platform based on Doc

阅读：962|2022-08-13

8 sydney0zq/covid-19-detection: The implem

sydney0zq/covid-19-detection: The implementation of A Weakly-supervised Framewor

阅读：519|2022-08-16

9 世界上哪个国家离中国最远？

离中国最远的国家是阿根廷。从太平洋直线计算，即往东线走，北京到阿根廷的布宜诺斯艾

阅读：670|2022-11-06

10 Delphi动态数组、静态数组、TBytes的区别

1.动态数组dArr1:arrayofbyte，数组的名称是一个地址，该地址和数组的第一个元素的地

阅读：1006|2022-07-18

客服电话

电子邮件

PHP 扫码登录原理及实现

整体流程

关于客户端标识

关于前端和服务器通讯

关于安全性

扫码登录的过程演示

开启 Socket 服务器

访问登录页面

用户使用 APP 扫码并授权

扫码登录的实现

Socket 代理服务器

Socket 服务器

登录页面

登录处理

请发表评论

全部评论

上一篇：

下一篇：

bradtraversy/iweather: Ionic 3 mobile we

joaomh/curso-de-matlab

断牙刷新位置时间（断牙属性及刷新位置介绍

关于微信小程序getUserInfo最新修改后，如

rugk/mastodon-simplified-federation: Sim

krishnaik06/Machine-Learning-in-90-days

alexeagleson/template-react-component-li

armancodv/building-energy-model-matlab:

美元符号为什么是“$”

FGRibreau/import-tweets-to-mastodon: How

DelphiRichEdit控件错误：RichEditlineinse

关于我们

产品与服务

解决方案

139-2527-9053