后端开发：ThinkPHP + GatewayWorker二维码

作者: 赵晓天 | 来源:发表于2018-01-23 17:20 被阅读49次

后端开发：ThinkPHP + GatewayWorker二维码
后端开发：当GatewayWorker遇到ThinkPHP 5.
基于workerman+gatawayworker+thinkp
ThinkPHP的I()方法接收json数据问题
ThinkPHP的方法接收json数据问题
thinkphp 和 Gatewayworker整合web聊天
ThinkPHP使用浅谈
小程序调用后端代码案例
基于thinkphp实现异常日志详细统计功能
thinkphp 和 Gatewayworker整合web聊天2

介绍

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

扫码登录流程

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

流程：

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

需要用到的技术

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

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

Index控制器

<?php

namespace app\index\controller;

use think\Controller;
use think\Request;

class Index extends Controller
{
    /**
     * 登录页面
     * @return [type] [description]
     */
    public function login()
    {
        return $this->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

<!DOCTYPE html>
<html>
<head>
    <title>扫码登录</title>

    <style type="text/css">
        .main {
            width: 500px;
            margin:50px auto;
        }

        .main .qrcode {
            width: 166px;
            margin:10px auto;
        }

        .main .tips {
            text-align: center;
            font-size: 14px;
        }

        .main .qrcode img {
            border: 1px solid #eaeaea;
            width: 164px;
            height: 164px;
        }
    </style>
</head>
<body>

<div class="main" id="app">
    <div class="qrcode">
        <img v-bind:src="qrcode" v-if="client_id != null" alt="二维码">
    </div>
    <div class="tips">
        {{ tips }}
    </div>
</div>

<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            ws: null,
            client_id: null,
            qrcode: '/index/index/qrcode?data=load',
            tips: '获取二维码中',
        },
        methods:{
            open: function (evt) {
                this.tips = '请扫码来登录'
            },
            close: function (evt) {
                this.tips = '服务器错误'
            },
            message: function (evt) {
                console.log(evt)
                try {
                    var data = JSON.parse(evt.data)
                } catch (e) {
                    this.tips = '服务器响应错误'
                    return
                }

                switch (data.type) {
                    // 获取client_id
                    case 'client_id':
                        this.client_id = data.client_id
                        break;
                    case 'scaned':
                        this.tips = '已扫码，请确认'
                        break;
                    case 'auth':
                        this.tips = data.token
                        // 这里用Token进行登录服务器
                        break;
                }
            }
        },
        watch: {
            client_id: function () {
                var url = 'http://localhost:8129/index/index/auth?client_id=' + this.client_id
                this.qrcode = '/index/index/qrcode?data=' + encodeURI(url)
            }
        },
        created: function () {
            this.ws = new WebSocket('ws://127.0.0.1:5678')
            if (this.ws != null) {
                this.ws.onopen = this.open
                this.ws.onmessage = this.message
                this.ws.onclose = this.close
            }
        }
    })
</script>
</body>
</html>

预览：

登录页面

授权页面 auth.html

<!DOCTYPE html>
<html>
<head>
    <title>确认登录</title>

    <style type="text/css">
        .main {
            width: 500px;
            margin:50px auto;
        }

        .main .button {
            text-align: center;
            margin-top: 20px;
        }

        .main .tips {
            text-align: center;
            font-size: 14px;
        }

        .main .qrcode img {
            border: 1px solid #eaeaea;
            width: 164px;
            height: 164px;
        }
    </style>
</head>
<body>

<div class="main" id="app">
    <div class="tips">
        {{ tips }}
    </div>
    <div class="button">
        <button v-on:click="auth">确认登录</button>
    </div>
</div>

<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            ws: null,
            client_id: '{$client_id}',
            qrcode: '/index/index/qrcode?data=load',
            tips: '获取权限中',
        },
        methods:{
            open: function (evt) {
                this.ws.send(JSON.stringify({
                    type: 'scan',
                    client_id: this.client_id
                }))
                this.tips = '请确认登录'
            },
            close: function (evt) {
                this.tips = '服务器响应错误'
            },
            message: function (evt) {
                console.log(evt)
                try {
                    var data = JSON.parse(evt.data)
                } catch (e) {
                    this.tips = '服务器错误'
                    return
                }

                switch (data.type) {
                    case 'used':
                        this.tips = '二维码已失效'
                        break;
                }
            },
            auth: function () {
                // 这里来获取服务器Token
                this.ws.send(JSON.stringify({
                    type: 'auth',
                    token: 'MTIzMTIzMTIzMTI0MnIzNDNyNDNyZzh1aWozNHIzOTJ1ZWk='
                }))
            }
        },
        watch: {
            client_id: function () {
                var url = 'http://localhost:8129/index/index/auth?client_id=' + this.client_id
                this.qrcode = '/index/index/qrcode?data=' + encodeURI(url)
            }
        },
        created: function () {
            this.ws = new WebSocket('ws://127.0.0.1:5678')
            if (this.ws != null) {
                this.ws.onopen = this.open
                this.ws.onmessage = this.message
                this.ws.onclose = this.close
            }
        }
    })
</script>
</body>
</html>

预览：

授权页面

Socket事件处理类

<?php

namespace app\push\controller;

use GatewayWorker\Lib\Gateway;

class Events
{
    /**
     * 有消息时
     * @param integer $client_id 连接的客户端
     * @param mixed $message
     * @return void
     */
    public static function onMessage($client_id, $message)
    {
        try {
            $data = json_decode($message, true);
            if (empty($data) || empty($data['type'])) {
                return;
            }
        } catch (\Exception $e) {
            return;
        }

        // 处理消息
        switch ($data['type']) {
            // 客户端扫码
            case 'scan':
                if (!empty($data['client_id'])) {
                    $_SESSION['auth_client_id'] = $data['client_id'];
                    Gateway::sendToClient($data['client_id'], json_encode([
                        'type' => '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

后端开发：ThinkPHP + GatewayWorker二维码
介绍随着互联网的发展，二维码在人们的生活中出现的越来越频繁，二维码的使用场景也越来越广泛：二维码登录、二维码支付...
后端开发：当GatewayWorker遇到ThinkPHP 5.
最近在做毕业设计，两个项目都遇到了使用websocket的需求，但不想与TP5分开。看了TP5的官方文档，有Wor...
基于workerman+gatawayworker+thinkp
laykefu thinkphp5+Gatewayworker搭建的web客服系统体验地址：http://layk...
ThinkPHP的I()方法接收json数据问题
第一次接触到前后端分离开发，需要在后端接收前端ajax提交的json数据，开发基于ThinkPHP3.2.3框架。...
ThinkPHP的方法接收json数据问题
第一次接触到前后端分离开发，需要在后端接收前端ajax提交的json数据，开发基于ThinkPHP3.2.3框架。...
thinkphp 和 Gatewayworker整合web聊天
第一步：下载tp3.2.3、GatewayWorker、GatewayClient；第二步：将GatewayCl...
ThinkPHP使用浅谈
虽说ThinkPHP还存在诸多问题，但作为一个web开发的新手，想做后端开发，拿这个练练还是很不错的。最初我也是用...
小程序调用后端代码案例
该文需要一定的编程基础，后端采用ThinkPHP架构。第一步：微信web开发者工具参数配置开发阶段可以选上不校...
基于thinkphp实现异常日志详细统计功能
后端的代码基于thinkphp框架开发，随着业务的增加，代码复杂度不断增多，而且有好几份代码，可能部署在不同的服务...
thinkphp 和 Gatewayworker整合web聊天2
继续上篇文章（链接），把功能添加到项目里面项目使用thinkphp3.2.3开发现在主要做手机端功能，页面也是手机...