微信应用的便捷,扫码登录方式越来越被现在的应用所使用。它因为不用去记住密码,只要有微信号即可方便快捷登录。微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现。这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录。大体流程如下:

  1. 客户端打开登录界面,连接到 WebSocket 服务
  2. WebScoket 服务生成带参数二维码返回给客户端
  3. 用户扫描展示的带参数二维码
  4. 微信服务器回调扫码事件并通知开发者服务器
  5. 开发者服务器通知 WebSocket 服务
  6. WebSocket 服务通知客户端登录成功

连接 WebSocket 服务

安装完 Swoole 之后,我们需用使用到 WebSocket 服务。新建一个 WebSocket 服务非常简单:

$server = new swoole_websocket_server("0.0.0.0", 1099);
$server->on('open', function (swoole_websocket_server $server, $request) use ($config){
    echo "server: handshake success with fd{$request->fd}\n";
});

$server->on('message', function (swoole_websocket_server $server, $frame) {

});
 

这里的 message 回调其实用不到,因为都是服务端下发消息的,但是必须设定一个。设定的端口号如果低于 1024 则必须要有 root 权限,服务器记得去防火墙开启该端口。

生成带参数二维码

WebSocket 服务在客户端连接成功后,需要生成一张微信的带参数二维码返回给客户端展示:

$server->on('open', function (swoole_websocket_server $server, $request) use ($config){
    $app = Factory::officialAccount($config['wechat']);
    $result = $app->qrcode->temporary($request->fd, 120);
    $url = $app->qrcode->url($result['ticket']);
    $server->push($request->fd, json_encode([
        'message_type'    =>  'qrcode_url',
        'url'       =>  $url
    ]));
});
 

我们在 open 回调中,生成一张临时的二维码,二维码的场景值就是客户端连接的文件描述符,这样就可以保证每个客户端的唯一性.有效时间设置为 120 秒,防止一张二维码被多次扫码使用。消息 push 到客户端的时候必须要 json,方便客户端处理。客户端代码也很简单:

const socket = new WebSocket('ws://127.0.0.1:1099');
    socket.addEventListener('message', function (event) {
        var data = JSON.parse(event.data);
        if (data.message_type == 'qrcode_url'){
            $('#qrcode').attr('src', data.url);
        }
    });

回调扫码事件

在客户端展示二维码后,需要提示用户扫码。对于用户扫临时的二维码,微信会触发相应的回调事件,我们需要在该回调事件中处理用户的扫码行为。其中我们需要用到微信传递过来的一些参数:

FromUserName    发送方帐号(一个OpenID)
MsgType         消息类型,event
Event         事件类型,subscribe
EventKey    事件 KEY 值,qrscene_为前缀,后面为二维码的参数值
 

这里要注意一点:微信已关注扫码推送的 EventKey 是没有 qrscene_ 前缀的,只有未关注扫码然后关注才有。

收到微信回调后我们首先要根据不同的事件类型做不同处理:

if ($message['MsgType'] == 'event'){
    if ($message['Event'] == 'subscribe'){  //关注
        return $this->subscribe($message);
    }
    if ($message['Event'] == 'unsubscribe') {  //取消关注
        return $this->unsubscribe($message);
    }
    if ($message['Event'] == 'SCAN'){   //已关注扫码
        return $this->scan($message);
    }
}else{
    return "您好!欢迎使用 SwooleWechat 扫描登录";
}
 

这里只讲解一个关注事件的业务逻辑,其他根据需要自行编码:

public function subscribe($message){
    $eventKey = intval(str_replace('qrscene_', '', $message['EventKey']));
    $openId = $message['FromUserName'];
    $user = $this->app->user->get($openId);
    $this->notify(json_encode([
        'type'  =>  'scan',
        'fd'    =>  $eventKey,
        'nickname'  =>  $user['nickname']
    ]));
    $count = $this->count($openId);
    $msgTemp = "%s,登录成功!\n这是你第%s次登录,玩的开心!";
    return sprintf($msgTemp, $user['nickname'], $count);
}
 

这里的 EventKey实际上就是连接 WebSocket 的客户端文件描述符,获取到扫码用户的 OPEN_ID,根据用户的OPEN_ID获取用户信息,通知 WebSocket 服务,响应文本消息给微信。这里一个比较麻烦的点就是如何通知 WebSocket 服务,我们知道处理微信回调的代码是是不在 WebSocket 服务上的,那么不同 Server 间如何通信呢?Swoole 官方给出的解决方案有两个:

  1. 额外监听一个UDP端口
  2. 使用 swoole_client 作为客户端访问 Server

这里我们选择第二个方案,让 Server 监听多个端口,我们在 WebSocket 服务新增监听一个 TCP 的端口:

$tcp_server = $server->addListener('0.0.0.0', 9999, SWOOLE_SOCK_TCP);
$tcp_server->set([]);
$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) {

});
 

主服务器是 WebSocket 或 Http 协议,新监听的 TCP 端口默认会继承主 Server 的协议设置,必须单独调用 set 方法设置新的协议才会启用新协议

然后我们就可以在扫码回调的进程中去通知 WebSocket 服务:

public function notify($message){
    $client = new swoole_client(SWOOLE_SOCK_TCP);
    if (!$client->connect('127.0.0.1', $this->config['notify_port'], -1)) {
        return "connect failed. Error: {$client->errCode}\n";
    }
    $ret = $client->send($message);
}
 

通知登录成功

在 WebSocket 服务收到登录成功的通知后,就可以根据需要处理一下用户信息,然后把用户信息传递给客户端的浏览器展示结果,还记得我们刚刚新监听的 TCP 端口吗?就可以在 receive 事件中处理:

$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) {
    $data = json_decode($data, true);
    if ($data['type'] == 'scan'){
        $serv->push($data['fd'], json_encode([
            'message_type'    =>  'scan_success',
            'user'  =>  $data['nickname']
        ]));
    }
    $serv->close($fd);
});

Swoole 的微信扫码登录的更多相关文章

  1. 基于 Swoole 的微信扫码登录

    随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实 ...

  2. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  3. 微信开放平台开发——网页微信扫码登录(OAuth2.0)

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  4. Vue+abp微信扫码登录

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...

  5. 第三方登录:微信扫码登录(OAuth2.0)

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  6. php微信开放平台--第三方网页微信扫码登录(OAuth2.0)

    第一.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提 ...

  7. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-6.微信扫码登录回调本地域名映射工具Ngrock

    笔记 6.微信扫码登录回调本地域名映射工具Ngrock         简介:讲解微信扫码回调本地域名ngrock讲解 1.为什么要用这个,微信扫码需要配置回调,需要配置对应的域名          ...

  8. PHP对接微信扫码登录

    1.PC端扫码登录 如果你将微信小程序和公众账号绑定同一个微信开放平台,那么他们各自的接口返回有一个参数unionid是相同的(没有绑定微信公众账号就没有):那么你就可以使用这个unionid来做业务 ...

  9. Android (微信扫码登录) 获取微信二维码+扫码登录

    话不多说  直接上菜! 一.因为是微信扫码登录,所有要在微信开放平台  微信开放平台 (qq.com) 进行注册----- 如下 1.资源中心 里面也有详细的官方讲解,里面也有demo  可以下载 2 ...

随机推荐

  1. python中os模块再回顾

    先看下我的文件目录结构 F:\PYTHON项目\ATM购物车\7月28 在此目录下的文件如下: 封装.py 模块os.sys复习.py 运行当前的文件是模块os.sys复习.py 1.获取当前文件所在 ...

  2. AMD vs. CommonJS?

    js开发者对js模块加载的尝试和创新从来都没有停止过,尤其是当nodejs的出现后,模块化加载的必要性更加凸显.本文不讨论如何在nodejs环境来模块化加载(创造者已经利用commonJS机制解决), ...

  3. ECSHOP完美解决Deprecated: preg_replace()报错的问题

    随着PHP5.5 的普及,ECSHOP系统又爆出了新的错误.PHP发展到PHP5.5版本以后,有了很多细微的变化.而ECSHOP官方更新又太慢,发现这些问题后也不及时升级,导致用户安装使用过程中错误百 ...

  4. JavaScipt第四天笔记

    JS笔记 1.以后遇到用构造函数创建对象就用NEW 2.用构造函数创建对象语法: var obj1 = new Object();//创建一个空对象 var obj2 = new Object({ n ...

  5. Ubuntu su命令 Authentication failure的解决办法

    重新设置root的密码: $ sudo passwd root Enter new UNIX password: Retype new UNIX password: passwd: password ...

  6. spring 定时器知识点

    一.各域说明 字段域 秒 分 时 日 月 星期(7为周六) 年(可选) 取值范围 0-59 0-59 0-23 1-31 1-12或JAN–DEC 1-7或SUN–SAT 1970–2099 可用字符 ...

  7. .Net Core 商城微服务项目系列(十一):MQ消费端独立为Window服务+消息处理服务

    之前使用MQ的时候是通过封装成dll发布Nuget包来使用,消息的发布和消费都耦合在使用的站点和服务里,这样会造成两个问题: 1.增加服务和站点的压力,因为每次消息的消费就意味着接口的调用,这部分的压 ...

  8. 创建一个自己的Vue UI组件库,并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  9. onethinkphp 添加钩子报错

    今天改了下程序再保存,出现错误:Namespace declaration statement has to be the very first statement in the script 度娘一 ...

  10. 解决使用MUI时mui-slider-item高度不一致的自适应问题

    今天在写一个MUI项目的时候,发现使用slider时,最高的mui-slider-item会把mui-slider-group撑开,而其他的mui-slider-item下面会出现很大的空白. 百度了 ...