分享PHP掃碼登入原理及實作方法

由於掃碼登入比帳號密碼登入更方便、快速、靈活，在實際使用上更受到使用者的歡迎。

本文主要介紹了掃碼登入的原理及整體流程，包含了二維碼的產生/取得、過期失效的處理、登入狀態的監聽。

掃碼登入的原理

整體流程

為方便理解，我簡單畫了一個 UML 時序圖，用以描述掃碼登入的大致流程！

總結下核心流程：

1. 請求業務伺服器取得用來登入的二維碼和 UUID。

2. 透過 websocket 連線 socket 伺服器，並定時(時間間隔依據伺服器設定時間調整)傳送心跳保持連線。

3. 使用者透過 APP 掃描二維碼，發送請求到業務伺服器處理登入。根據 UUID 設定登入結果。

4. socket 伺服器透過監聽取得登入結果，建立 session 數據，根據 UUID 推送登入數據到使用者瀏覽器。

5. 使用者登入成功，伺服器主動將該 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__)) . &#39;/Config.php&#39;;
require_once dirname(dirname(__FILE__)) . &#39;/lib/RedisUtile.php&#39;;
require_once dirname(dirname(__FILE__)) . &#39;/lib/Common.php&#39;;/**
 * 扫码登陆服务端
 * 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(&#39;failed to accept socket: &#39;.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,&#39;Sec-WebSocket-Key:&#39;) + 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] : &#39;&#39;;        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 &#39;[&#39;. date(&#39;Y-m-d H:i:s&#39;) .&#39;] &#39; . $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">

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

        restQRCode();
        openLoginInfo();
        $(&#39;#qrcode-exp&#39;).click(function () {
            restQRCode();
            $(this).hide();
        });
    });    /**
     * 打开二维码     */
    function openLoginInfo() {
        $(document).ready(function () {
            $(&#39;.b-form&#39;).css("opacity", "0.01");
            $(&#39;.box-form&#39;).css("left", "-100px");
            $(&#39;.box-info&#39;).css("right", "-100px");
        });
    }    /**
     * 关闭二维码     */
    function closeLoginInfo() {
        $(document).ready(function () {
            $(&#39;.b-form&#39;).css("opacity", "1");
            $(&#39;.box-form&#39;).css("left", "0px");
            $(&#39;.box-info&#39;).css("right", "-5px");
        });
    }    /**
     * 刷新二维码     */
    var ws, wsTid = null;
    function restQRCode() {

        $.ajax({
            url: &#39;http://localhost/qrcode/code.php&#39;,
            type:&#39;post&#39;,
            dataType: "json",            async: false,
            success:function (result) {
                $(&#39;#qrcode&#39;).attr(&#39;src&#39;, result.img);
                $(&#39;#qid&#39;).val(result.qid);
            }
        });        if ("WebSocket" in window) {            if (typeof ws != &#39;undefined&#39;){
                ws.close();                null != wsTid && window.clearInterval(wsTid);
            }

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

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

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

            ws.onclose = function() {
                console.log(&#39;websocket 连接已关闭！&#39;);
                $(&#39;#qrcode-exp&#39;).show();                null != wsTid && window.clearInterval(wsTid);
            };            // 发送心跳
            wsTid = window.setInterval( function () {                if (typeof ws != &#39;undefined&#39;) ws.send(&#39;1&#39;);
            }, 50000 );

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

登入處理

測試使用，模擬登入處理，未做安全性認證！ ！

<?php

require_once dirname(__FILE__) . &#39;/lib/RedisUtile.php&#39;;
require_once dirname(__FILE__) . &#39;/lib/Common.php&#39;;/**
 * -------  登录逻辑模拟 --------
 * 请根据实际编写登录逻辑并处理安全验证 */$qid = $_GET[&#39;qid&#39;];
$uid = $_GET[&#39;uid&#39;];

$data = array();switch ($uid)
{    case &#39;1&#39;:
        $data[&#39;uid&#39;]  = 1;
        $data[&#39;name&#39;] = &#39;张三&#39;;        break;    case &#39;2&#39;:
        $data[&#39;uid&#39;]  = 2;
        $data[&#39;name&#39;] = &#39;李四&#39;;        break;
}

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

 更多相關知識，請造訪PHP中文網！

以上是分享PHP掃碼登入原理及實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！