后端开发：ThinkPHP + GatewayWorker二维码扫码登录

介绍

随着互联网的发展，二维码在人们的生活中出现的越来越频繁，二维码的使用场景也越来越广泛：二维码登录、二维码支付、加好友、打开链接等等。
因为用户使用二维码很容易，只需打开相机对着二维码，想要完成的业务就可以轻松完成。

扫码登录流程

包涵三个节点：服务器、登录页面、授权页面
登录页面：一般是用户通过电脑浏览器访问的待授权页面
服务器：用于登录页面与授权页面进行消息传递
授权页面：一般是用户扫描登录二维码后打开的页面，待用户点击确认登录

流程：

用户打开登录页面
在登录页面与服务器建立websocket连接
服务器将生成唯一标识发送给登录页面
登录页面用这个标志来生成相应的二维码并显示到页面
用户通过客户端的扫一扫打开授权页面
授权页面通过唯一标志与服务器建立连接
服务器通知登录页面：这个登录页面的二维码已被扫了
用户点击确认登录，拿到服务器端返回的授权Token
授权页面将此Token发送给登录页面
登录页面用这个Token进行验证，成功则登录成功

需要用到的技术

ThinkPHP
因为服务器端API使用此框架，所以这个业务使用此框架也是理所应当的。
GatewayWorker
它是一个基于PHP的Socket应用框架。
Vue.js
进行一些前端渲染，与页面的控制。

ThinkPHP集成GatewayWorker需要做些额外的操作，不清楚的请看我另外的一篇文章。

Index控制器

fetch('login');
    }

    /**
     * 授权页面
     * @return [type] [description]
     */
    public function auth()
    {
        // 此页面应该要验证客户端是否已登录

        // 拿到待授权页面的client_id
        $client_id = $this->request->param('client_id');
        if (empty($client_id)) {
            return $this->error('客户端ID不存在');
        }

        return $this->fetch('auth', ['client_id' => $client_id]);
    }

    /**
     * 生成二维码
     * @return [type] [description]
     */
    public function qrcode()
    {
        // 引入phpqrcode.php
        include APP_PATH . 'extra' . DS . 'phpqrcode' . DS . 'phpqrcode.php';

        $data = $this->request->param('data');

        \QRcode::png($data, false, 'L', 4);

        header('Content-Type:image/png');
        exit();
    }
}

登录页面 login.html

预览：

登录页面

授权页面 auth.html




    确认登录

    




    
        {{ tips }}

预览：

授权页面

Socket事件处理类

 'scaned',
                    ]));
                }
                break;
            // 客户端授权
            case 'auth':
                $auth_client_id = $_SESSION['auth_client_id'];
                if (!empty($auth_client_id) && !empty($data['token'])) {
                    Gateway::sendToClient($auth_client_id, json_encode([
                        'type' => 'auth',
                        'token' => $data['token'],
                    ]));
                    // 授权后直接关闭客户端连接
                    Gateway::closeClient($client_id);
                }
                break;
            default:
                # code...
                break;
        }
    }

    /**
     * 当用户连接时触发的方法
     * @param integer $client_id 连接的客户端
     * @return void
     */
    public static function onConnect($client_id)
    {
        // 连接时将client_id发给客户端
        Gateway::sendToClient($client_id, json_encode(['client_id' => $client_id, 'type' => 'client_id']));
    }

    /**
     * 当用户断开连接时触发的方法
     * @param integer $client_id 断开连接的客户端
     * @return void
     */
    public static function onClose($client_id)
    {
        // Gateway::sendToAll("client[$client_id] logout\n");
    }

    /**
     * 当进程启动时
     * @param integer $businessWorker 进程实例
     */
    public static function onWorkerStart($businessWorker)
    {
        echo "WorkerStart\n";
    }

    /**
     * 当进程关闭时
     * @param integer $businessWorker 进程实例
     */
    public static function onWorkerStop($businessWorker)
    {
        echo "WorkerStop\n";
    }
}

有问题？

在学习的过程中有问题？请直接在评论区回复。
本项目GIT：https://git.coding.net/xtype/qrcode_login.git