常见方式
平常大家见到过最多的扫码登录应该是 开放平台网页登录 大概形式就是:点击微信登录后会出现一个黑页面,页面中有一个二维码,扫码后可以自动获取用户信息然后登录,但是这种方式需要申请开放平台比较麻烦。如图
「实用」微信扫码关注公众号号后自动登录
利于推广方式
另外一种扫码登录方式只需要一个微信服务号就行,大概流程是:点击微信登录,网站自己弹出一个二维码、扫描二维码后弹出公众号的关注界面、只要一关注公众号网站自动登录、第二次扫描登录的时候网站直接登录,大家可以体验一下 「随便找的一个网站」,这种扫码登录的方式个人觉得非常利于推广公众号
前期准备
服务号(或者微信测试账号)
EasyWeChat 扩展包
梳理
其实第二种扫码登录的原理很简单,核心就是依靠 微信带参二维码、EasyWeChat 二维码文档
简单的解释一下扫描这个带参二维码有什么不同:
扫描二维码,如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值(自定义值)关注事件推送给开发者。
扫描二维码,如果用户已经关注公众号,在用户扫描后会自动进入会话,微信也会将带场景值(自定义值)扫码事件推送给开发者。
看到这里相信你已经明白了,梳理一下:
生成二维码的时候你自定义一个参数到二维码中,顺便把这个参数传到前端页面中。
前端页面根据这个参数轮询用户登录状态(也可使用 socket)。
用户扫码关注后会推送一个关注事件到服务端,也会把自定义参数带入到事件中。
根据 openid 创建用户后,然后在 Redis 中存储 Key 为场景值(自定义参数) Value 为用户创建后的 id。
前端轮询方法中如果在 Redis 中获取到 Id 后,Auth 登陆,页面再重载一下,流程完毕。
实战
请求登录二维码
前端通过一个点击事件请求微信登录二维码
// 方便清除轮询let timer = null$(document).on('click', '.wechat-login', function () {// 请求登录二维码axios.get('{{ route('wx.pic') }}').then(response => {let result = response.dataif (result.status_code !== 200) {return}// 显示二维码图片$('.wechat-url').attr('src', result.data.url)// 轮询登录状态timer = setInterval(() => {// 请求参数是二维码中的场景值axios.get('{{ route('home.login.check') }}', {params: {wechat_flag: result.data.weChatFlag}}).then(response => {let result = response.dataif (result.data) {window.location.href = '/'}})}, 2000)})})// 返回时清除轮询$('.wechat-back').click(function () {clearInterval(timer)})
后端生成带参二维码逻辑,EasyWeChat 配置请自行查阅 文档
protected $app;/*** Construct** WeChatController constructor.*/public function __construct() {$this->app = app('wechat.official_account');}/*** 获取二维码图片** @param Request $request** @return \Illuminate\Http\JsonResponse* @throws \Exception*/public function getWxPic(Request $request) {// 查询 cookie,如果没有就重新生成一次if (!$weChatFlag = $request->cookie(WxUser::WECHAT_FLAG)) {$weChatFlag = Uuid::uuid4()->getHex();}// 缓存微信带参二维码if (!$url = Cache::get(WxUser::QR_URL . $weChatFlag)) {// 有效期 1 天的二维码$qrCode = $this->app->qrcode;$result = $qrCode->temporary($weChatFlag, 3600 * 24);$url = $qrCode->url($result["ticket"]);Cache::put(WxUser::QR_URL . $weChatFlag, $url, now()->addDay());}// 自定义参数返回给前端,前端轮询return $this->ajaxSuccess(compact('url', 'weChatFlag'))->cookie(WxUser::WECHAT_FLAG, $weChatFlag, 24 * 60);}
用户扫描二维码后处理
/*** 微信消息接入(这里拆分函数处理)** @return \Symfony\Component\HttpFoundation\Response* @throws \EasyWeChat\Kernel\Exceptions\BadRequestException* @throws \EasyWeChat\Kernel\Exceptions\InvalidArgumentException* @throws \EasyWeChat\Kernel\Exceptions\InvalidConfigException* @throws \ReflectionException*/public function serve() {$app = $this->app;$app->server->push(function ($message) {if ($message) {$method = camel_case('handle_' . $message['MsgType']);if (method_exists($this, $method)) {$this->openid = $message['FromUserName'];return call_user_func_array([$this, $method], [$message]);}Log::info('无此处理方法:' . $method);}});return $app->server->serve();}/*** 事件引导处理方法(事件有许多,拆分处理)** @param $event** @return mixed*/protected function handleEvent($event) {Log::info('事件参数:', [$event]);$method = camel_case('event_' . $event['Event']);Log::info('处理方法:' . $method);if (method_exists($this, $method)) {return call_user_func_array([$this, $method], [$event]);}Log::info('无此事件处理方法:' . $method);}/*** 取消订阅** @param $event*/protected function eventUnsubscribe($event) {$wxUser = WxUser::whereOpenid($this->openid)->first();$wxUser->subscribe= 0;$wxUser->subscribe_time = null;$wxUser->save();}/*** 扫描带参二维码事件** @param $event*/public function eventSCAN($event) {if ($wxUser = WxUser::whereOpenid($this->openid)->first()) {// 标记前端可登陆$this->markTheLogin($event, $wxUser->uid);return;}}/*** 订阅** @param $event** @throws \Throwable*/protected function eventSubscribe($event) {$openId = $this->openid;if ($wxUser = WxUser::whereOpenid($openId)->first()) {// 标记前端可登陆$this->markTheLogin($event, $wxUser->uid);return;}// 微信用户信息$wxUser = $this->app->user->get($openId);// 注册$nickname = $this->filterEmoji($wxUser['nickname']);$result = DB::transaction(function () use ($openId, $event, $nickname, $wxUser) {$uid = Uuid::uuid4()->getHex();$time = time();// 用户$user = User::create(['uid' => $uid,'created_at' => $time,]);// 用户信息$user->user_info()->create(['email'=> $user->email,'nickname' => $nickname,'sex' => $wxUser['sex'],'address' => $wxUser['country'] . ' ' . $wxUser['province'] . ' ' . $wxUser['city'],'avatar'=> $wxUser['headimgurl'],'code' => app(UserRegisterController::class)->inviteCode(10),'created_at' => $time,]);// 用户账户$user->user_account()->create(['gold' => 200,'created_at' => $time,]);$wxUserModel = $user->wx_user()->create(['subscribe'=> $wxUser['subscribe'],'subscribe_time' => $wxUser['subscribe_time'],'openid' => $wxUser['openid'],'created_at'=> $time,]);Log::info('用户注册成功 openid:' . $openId);$this->markTheLogin($event, $wxUserModel->uid);});Log::debug('SQL 错误: ', [$result]);}/*** 标记可登录** @param $event* @param $uid*/public function markTheLogin($event, $uid) {if (empty($event['EventKey'])) {return;}$eventKey = $event['EventKey'];// 关注事件的场景值会带一个前缀需要去掉if ($event['Event'] == 'subscribe') {$eventKey = str_after($event['EventKey'], 'qrscene_');}Log::info('EventKey:' . $eventKey, [$event['EventKey']]);// 标记前端可登陆Cache::put(WxUser::LOGIN_WECHAT . $eventKey, $uid, now()->addMinute(30));}
前端登录检查
/*** 微信用户登录检查** @param Request $request** @return bool|\Illuminate\Http\JsonResponse*/public function loginCheck(Request $request) {// 判断请求是否有微信登录标识if (!$flag = $request->wechat_flag) {return $this->ajaxSuccess(false);}// 根据微信标识在缓存中获取需要登录用户的 UID$uid = Cache::get(WxUser::LOGIN_WECHAT . $flag);$user = User::whereUid($uid)->first();if (empty($user)) {return $this->ajaxSuccess(false);}// 登录用户、并清空缓存auth('web')->login($user);Cache::forget(WxUser::LOGIN_WECHAT . $flag);Cache::forget(WxUser::QR_URL . $flag);return $this->ajaxSuccess(true);}
OK,很实用的一个功能吧,赶快加到你项目中吧!
如果觉得《实现微信扫码或关注公众号后网站自动登录》对你有帮助,请点赞、收藏,并留下你的观点哦!