Laravel + Laravel-echo + EasyWeChat 实现微信扫码登录

扫码登录成为一种日趋流行的登录方式，它具有较高的安全性，同时又使我们从记忆大量的账号密码并手动输入的繁琐流程中解脱出来，有些平台甚至无账号也能扫码登录，连注册的麻烦都省了。

对于接入微信开放平台的公众号应用来说，实现扫码登录是相当容易的，有 EasyWeChat SDK 加持，再按着官方的文档一把梭，很快就能完成。 然而本文所要讨论的是另一种情况，有时候出于某些原因，自己的公众号不能接入开放平台，但又想进行微信扫码登录，这种情况下显示就不能再换官方的套路来了。但只要我们稍作变通，就能实现这一需求。

基本思路：

1. 登录页显示微信二维码（使用 EasyWeChat SDK 创建，短时效的临时二维码）
2. 用户扫码后推送消息到服务器接口，接口中根据业务情况进行判断处理，符合条件时触发 WechatScanLogin 事件
3. WechatScanLogin 事件实现 ShouldBroadcast 接口，所以当它被触发时也会向指定的频道进行广播
4. 前端 laravel-echo 监听频道中用户扫码登录的消息并进行处理

以下就来介绍一下具体实现，先放效果图。

具体实现

配合本文，我创建了一个简单的示例项目，有兴趣的可以克隆下来，配合源码一起服用，效果更佳。项目地址：github.com/tianyong90/…

1. 首先当然是创建 Laravel 项目，同时安装前后端依赖

• 前端最主要依赖是 laravel-echo 和 socket.io-client

前端监听事件广播是关键，我们需要一个 websocket 服务端，Laravel 官方文档在介绍消息广播时提到了 Pusher 和 laravel-echo-server。因为我使用 laradock 作为开发环境，其中内置了 laravel-echo-server 容器，十分方便，所以决定直接用它。实际上也可以使用 Pusher 服务，那么则需要安装 pusher.js 替代 socket.io-client，同时在 .env 中修改相关配置

2. 配置项目

主要是配置数据库和 redis 连接，然后把 BROADCAST_DRIVER 设置为 redis(这一点很重要，如果使用 pusher 则需要修改为 pusher)

如果 QUEUE_CONNECTION 设置为 redis 了，则需要记得启动队列 worker.

3. 启动 laravel-echo-server