PC站扫描公众号二维码点击收到的消息登录网站

于 2023-04-20 17:06:09 发布
阅读量172 收藏
点赞数
文章标签： html javascript 微信公众平台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40088333/article/details/130270802
版权

html内核心代码

<div class="baosub">
    <img src="{$public}images/down_11.png" class="zpic" alt="">
    {empty name=":session('user_id')"}
        <div class="subtxt" id="showmask">
            立即下载
        </div>
    {else /}
        <a href="{$info.download}" class="subtxt">
            立即下载
        </a>
    {/empty}
</div>

//隐藏的弹窗
<div class="popmask">
    <div class="tanbox">
        <div class="tanbai">
            <div class="tantitle">
                微信扫一扫登录
            </div>
            <img src="{$public}images/ma_03.png" id="weixinerweima" class="ermapic" alt="">
            <div class="ertxt">
                微信扫码登录/注册
            </div>
            <div class="erditxt">
                首次扫码关注公众号点击收到的链接完成登录
            </div>
            <img src="{$public}images/close.png" class="close" alt="">
        </div>
    </div>
</div>

js代码

<script>
    $('#showmask').click(function(){
        $.ajax({
            type:'post',
            url:"{:url('index/Wechat/createMpLoginQrCode')}",
            dataType:"json",
            success:function(data){
                if(data.code == 1){
                    //修改二维码的图
                    var img=document.getElementById("weixinerweima");
                    img.src=data.data.url;
                    $(".popmask").show()
                    //启动定时任务请求后台接口
                    var cishu = 0;
                    var autoInterval;
                    autoInterval = mySetInterval();
                    //定义定时器
                    function mySetInterval(){
                        return setInterval(function (){
                            cishu = cishu+1;
                            $.ajax({
                                type:'post',
                                url:"{:url('index/Wechat/getLoginResult')}",
                                data:{"id":data.data.id},
                                dataType:"json",
                                success:function(login){
                                    if(login.code == 1){
                                        clearInterval(autoInterval);
                                        layer.msg('登录成功',{icon:6,time:2000}, function(){
                                            location.reload();
                                        });
                                    } else {
                                        if(cishu>30){
                                            clearInterval(autoInterval);
                                            layer.open({title:"登录失败",content:'扫码超时',icon:5,anim:6});
                                        }

                                    }}
                            });
                        },1*1000); //秒
                    }

                } else {
                    layer.open({title:"{:lang('error')}",content:data.msg,icon:5,anim:6});
                }}
        });



    })
    $('.close').click(function(){
        $(".popmask").hide()
    })
    // wow效果启用
    new WOW().init();
</script>

thinkPHP后台代码

<?php
namespace app\index\controller;


use app\Request;
use EasyWeChat\Factory;
use think\exception\HttpResponseException;
use think\facade\Cache;
use think\facade\Config;
use think\facade\View;
use think\Response;
use think\facade\Log;
use think\facade\Route;

class Weixin
{
    // 这里是你设定的微信扫码通知URL
    public function index()
    {
        //你的公众号陪诊参考EasyWeChat
        $config = Config::get('app.weixingongzhonghao');
        $config['response_type'] = 'array';

        $app = Factory::officialAccount($config);

        $app->server->push(function ($message) {
            switch ($message['MsgType']) {
                case 'event':
                    $url = Route::buildUrl('userLogin',  ['id'=>$message['EventKey']])
                        ->suffix('html')
                        ->domain(true);
                    return "<a href=\"".$url."\">点击登录</a>";
                    break;
                default:
                    return '欢迎关注';
                    break;
            }
        });
        $response = $app->server->serve();
        $empty = strpos($response, '<Content></Content>');
        $success = strpos($response, 'success');
        if (!$empty && !$success) {
            return $response;
        } else {
            echo '';
        }
        exit;
    }

    public function event($data)
    {
        $event = $data['Event'];
        $open_id = $data['FromUserName'];
        switch ($event) {
            case 'subscribe':
                $id = explode('_', $data['EventKey'])[1];
                self::userLogin($open_id, $id);
                break;
            case 'unsubscribe':
                break;
            case 'SCAN':
                self::userLogin($open_id, $data['EventKey']);
                break;
        }
    }

    // 这里的$id 是咱们在第4步生成的id（用来请求登录状态那个），它通过微信的二维码带过来了，是贯穿全局的唯一标识
    public function userLogin($id)
    {
//未关注的用户微信通知服务器的时候EventKey前面多一个qrscene_
        $id = str_replace('qrscene_','',$id);
        Cache::set($id, ['status' => 1]);
        return View::fetch();
    }



    //验证消息
    public function valid()
    {
        $echoStr = $_GET["echostr"];
        if($this->checkSignature()){
            echo $echoStr;
            exit;
        }
    }

    //检查签名
    private function checkSignature()
    {
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];
        $token = Config::get('app.weixingongzhonghao.token');
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr, SORT_STRING);
        $tmpStr = implode($tmpArr);
        $tmpStr = sha1($tmpStr);

        if($tmpStr == $signature){
            return true;
        }else{
            return false;
        }
    }


    /**
     * 操作错误跳转
     * @param mixed   $msg    提示信息
     * @param string  $url    跳转的URL地址
     * @param mixed   $data   返回的数据
     * @param integer $wait   跳转等待时间
     * @param array   $header 发送的Header信息
     * @return void
     */
    protected function error($msg = '', string $url = null, $data = '', int $wait = 3, array $header = []): Response
    {
        if (is_null($url)) {
            $url = request()->isAjax() ? '' : 'javascript:history.back(-1);';
        } elseif ($url) {
            $url = (strpos($url, '://') || 0 === strpos($url, '/')) ? $url : app('route')->buildUrl($url);
        }

        $result = [
            'code' => 0,
            'msg'  => $msg,
            'data' => $data,
            'url'  => $url,
            'wait' => $wait,
        ];

        $type = (request()->isJson() || request()->isAjax()) ? 'json' : 'html';
        if ($type == 'html') {
            $response = view(app('config')->get('app.dispatch_error_tmpl'), $result);
        } else if ($type == 'json') {
            $response = json($result);
        }
        throw new HttpResponseException($response);
    }

    /**
     * 返回封装后的API数据到客户端
     * @param mixed   $data   要返回的数据
     * @param integer $code   返回的code
     * @param mixed   $msg    提示信息
     * @param string  $type   返回数据格式
     * @param array   $header 发送的Header信息
     * @return Response
     */
    protected function result($data, int $code = 0, $msg = '', string $type = '', array $header = []): Response
    {
        $result = [
            'code' => $code,
            'msg'  => $msg,
            'time' => time(),
            'data' => $data,
        ];

        $type     = $type ?: 'json';
        $response = Response::create($result, $type)->header($header);

        throw new HttpResponseException($response);
    }

    /**
     * 操作成功跳转
     * @param mixed   $msg    提示信息
     * @param string  $url    跳转的URL地址
     * @param mixed   $data   返回的数据
     * @param integer $wait   跳转等待时间
     * @param array   $header 发送的Header信息
     * @return void
     */
    protected function success($msg = '', string $url = null, $data = '', int $wait = 3, array $header = []): Response
    {
        if (is_null($url) && isset($_SERVER["HTTP_REFERER"])) {
            $url = $_SERVER["HTTP_REFERER"];
        } elseif ($url) {
            $url = (strpos($url, '://') || 0 === strpos($url, '/')) ? $url : app('route')->buildUrl($url);
        }

        $result = [
            'code' => 1,
            'msg'  => $msg,
            'data' => $data,
            'url'  => $url,
            'wait' => $wait,
        ];

        $type = (request()->isJson() || request()->isAjax()) ? 'json' : 'html';
        if ($type == 'html') {
            $response = view(app('config')->get('app.dispatch_success_tmpl'), $result);
        } else if ($type == 'json') {
            $response = json($result);
        }
        throw new HttpResponseException($response);
    }
}
<?php

namespace app\index\controller;

use think\exception\HttpResponseException;
use think\facade\Cache;
use EasyWeChat\Factory;
use think\facade\Config;
use think\facade\Request;
use think\Response;
use think\facade\Session;
class Wechat
{
// 创建登录二维码
    public function createMpLoginQrCode()
    {
        $ip = Request::ip();

        $id = self::createID($ip);

        $config = Config::get('app.weixingongzhonghao');
        $app    = Factory::officialAccount($config);
        $result = $app->qrcode->temporary($id, 120); // 生成临时二维码 有效时间2分钟，这里是秒数，可以自己修改，临时最高为1个月
        if (!isset($result['ticket'])) $this->error('二维码请求失败，网络繁忙');
        $url = $app->qrcode->url($result['ticket']);
        $this->success('获取成功','',['url' => $url, 'id' => $id,'result'=>$result]);
    }

    private function createID($ip)
    {
        $id = md5(time() . $ip . rand(0, 999));
        if (Cache::has($id)) {
            return self::createID($ip);
        }
        return $id;
    }

    // 查询登录结果
    public function getLoginResult()
    {
        $id = input('id') ?? $this->error('参数错误：id');
        if (Cache::has($id)) {
            Session::set('user_id', $id);
            $this->success('登录成功');
        }
        $this->error('请在手机上完成后续操作');
    }

    /**
     * 操作错误跳转
     * @param mixed   $msg    提示信息
     * @param string  $url    跳转的URL地址
     * @param mixed   $data   返回的数据
     * @param integer $wait   跳转等待时间
     * @param array   $header 发送的Header信息
     * @return void
     */
    protected function error($msg = '', string $url = null, $data = '', int $wait = 3, array $header = []): Response
    {
        if (is_null($url)) {
            $url = request()->isAjax() ? '' : 'javascript:history.back(-1);';
        } elseif ($url) {
            $url = (strpos($url, '://') || 0 === strpos($url, '/')) ? $url : app('route')->buildUrl($url);
        }

        $result = [
            'code' => 0,
            'msg'  => $msg,
            'data' => $data,
            'url'  => $url,
            'wait' => $wait,
        ];

        $type = (request()->isJson() || request()->isAjax()) ? 'json' : 'html';
        if ($type == 'html') {
            $response = view(app('config')->get('app.dispatch_error_tmpl'), $result);
        } else if ($type == 'json') {
            $response = json($result);
        }
        throw new HttpResponseException($response);
    }

    /**
     * 返回封装后的API数据到客户端
     * @param mixed   $data   要返回的数据
     * @param integer $code   返回的code
     * @param mixed   $msg    提示信息
     * @param string  $type   返回数据格式
     * @param array   $header 发送的Header信息
     * @return Response
     */
    protected function result($data, int $code = 0, $msg = '', string $type = '', array $header = []): Response
    {
        $result = [
            'code' => $code,
            'msg'  => $msg,
            'time' => time(),
            'data' => $data,
        ];

        $type     = $type ?: 'json';
        $response = Response::create($result, $type)->header($header);

        throw new HttpResponseException($response);
    }

    /**
     * 操作成功跳转
     * @param mixed   $msg    提示信息
     * @param string  $url    跳转的URL地址
     * @param mixed   $data   返回的数据
     * @param integer $wait   跳转等待时间
     * @param array   $header 发送的Header信息
     * @return void
     */
    protected function success($msg = '', string $url = null, $data = '', int $wait = 3, array $header = []): Response
    {
        if (is_null($url) && isset($_SERVER["HTTP_REFERER"])) {
            $url = $_SERVER["HTTP_REFERER"];
        } elseif ($url) {
            $url = (strpos($url, '://') || 0 === strpos($url, '/')) ? $url : app('route')->buildUrl($url);
        }

        $result = [
            'code' => 1,
            'msg'  => $msg,
            'data' => $data,
            'url'  => $url,
            'wait' => $wait,
        ];

        $type = (request()->isJson() || request()->isAjax()) ? 'json' : 'html';
        if ($type == 'html') {
            $response = view(app('config')->get('app.dispatch_success_tmpl'), $result);
        } else if ($type == 'json') {
            $response = json($result);
        }
        throw new HttpResponseException($response);
    }
}

ETO_冬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信扫码关注公众号登录功能php实战分享
09-27 341
可以使用轮询或者长连接的方式通过ticket刷新用户扫码状态，检测到已扫描刷新登录状态，用户成功和公众号关联。配置接口，需要是线上能正确收到微信推送消息的地址，关注如果有关注、扫码、收到消息等事件都会推送到该地址。配置接口，需要是线上能正确收到微信推送消息的地址，关注如果有关注、扫码、收到消息等事件都会推送到该地址。此接口地址需要对应微信后台配置的服务器地址，下面示例只添加了关注 扫码，更多方法参考微信官方文档。前端拿到二维码地址后，将二维码展示给页面，二维码过期需要刷新二维码或者提示已过期。
PHP原生代码实现微信扫码关注公众号并同时登录
11-17
PHP微信扫码登录看起来简单，但做起来有点复杂，微信接口的坑有点多，稍不注意，就费很多时间。PHP判断是否首次关注公众号，获取微信用户头像、openid和省市等信息
用户扫描二维码进入公众号后自动发送指定消息_微信公众号模板消息怎么用？...
weixin_39875760的博客
11-27 1495
微信公众号模板消息是公众号自带的一个功能，仅用于公众号向用户发送重要的服务通知，只能用于符合其要求的服务场景中，如复购提醒通知，上新产品信息通知等等。在公众号平台开通模板消息功能，仅公众号类型为服务号才能实现，订阅号无法实现，所以如果想要实现微信第三方平台发模板消息，只有微信服务号才能办到；微信服务号发模板消息功能，解决公众号平台无法在线发模板消息的问题，通过功能可以实现模板消息定时群发，可以实现...
PC端微信扫码关注公众号并登录
北海之灵的博客
04-20 8125
碰到这样一个需求，PC端生成公众号二维码，用户用手机微信扫描，如果用户未关注公众号，则关注公众号后自动登录，如果用户已经关注过公众号，则直接登录。 前端Vue，后端Java实现 分3步来完成： 1.生成带参数的临时二维码 https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html 2. 公众号后台服务监听扫码事件并获取用户信息 https...
    参数异常,也返回系统异常?
何新生(Daniel) 勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑
01-01 7536
参数异常,也是显示系统异常? 一.前言 在系统异常显示中,我们常用到BaseResult作为系统返回的封装实体, 最近遇到一个问题, 不管是什么错误,都是返回 code: 500, 这对定位系统问题是非常不友好的, 那么能怎么更好的定位后端问题呢? 这次的问题是, 当前端参数拼写错误或参数输入不正常提醒,怎么返回code和status? ...
java微信扫描公众号二维码实现登陆功能
08-30
主要为大家详细介绍了PHP微信扫描公众号二维码实现登陆功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
java实现手机扫描二维码后网站跳转新页面
10-21
手机扫描二维码后自动跳转到特定网页，这种功能在很多场景下都有应用，如营销推广、信息传递等。本篇文章将详细讲解如何使用Java来实现这一功能，主要涉及两种库：ZXing（Zebra Crossing）和Hutools。 ZXing是一个...
PHP微信PC二维码登陆的实现思路
12-20
另外看微信开发文档中存在一个scan事件，可以检测用户使用微信扫描二维码并获取值。其实问题的关键就在于这个值，这个值算是一个联通PC和微信的通信ID了。 二、具体实现流程（下面代码使用了TP5的框架，有个大前提是...
一套电商产品（包含PC端+后端+手机端（公众号+小程序））.zip
最新发布
03-11
用户通过搜索或扫描二维码，瞬间即可开启使用，享受快速加载、流畅运行的服务。 该小程序界面设计简洁明了，布局合理，易于上手。同时，其特色功能如实时更新的信息推送、个性化推荐以及社交分享功能，让用户能够...
H5调用摄像头和扫一扫功能测
08-29
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照解析...说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。
PC端微信扫码关注公众号登陆
12-21
完整封装微信服务号扫码登陆代码,复制修改配置即可使用，带文档说明，流程介绍
pc网站实现扫码关注公众号并登录
m0_64224936的博客
03-20 510
pc网站实现扫码关注公众号并登录
微信授权登录：PC端扫码登录[unionid]（二）
热门推荐
博客
01-23 1万+
需求场景：实现使用微信扫描PC二维码的方式登录PC端网站 一，准备工作 ①，申请微信开放平台（微信公众平台无法实现）微信开放平台 ②，申请创建网站应用 ③，申请网站应用成功后会为你分配APPID和APPSecret ④，微信登录接口开通（需要花费300RMB） ⑤，授权回调域名设置 至此，开发准备工作已经完成，可以进行开发就行。 备注：在开放平台下绑定的所有类型的应用uni...
小程序提示code：500错误的解决经验分享
惠惠软件
05-25 6242
小程序提示code：500错误，常规解决方案应该查看Redis是否正常。然后有针对性的解决。清除缓存，重启服务器，应该就恢复正常！
记录微信扫码,实现 pc 网站登录
Seventeen
02-02 764
记录微信扫码关注公众号实现pc 网站登录 1.公众号基本设置 完成token验证 2.服务器端获取access_token 官方文档 3.根据 access_token 换取 ticket 官方文档 4.根据 ticket 获得图片路径 5.获取微信推送消息 备注(微信推送路径是上方1 公众号配置的 url) 官方文档接收事件推送 上代码: 发送curl 请求封装: /** * * 发送curl请求 * @param $url * @param string $method 球球方法
微信小程序生态5-微信公众号扫码登录PC端网页
summon的博客
06-02 2203
1、已认证的公众号(必须为服务号，订阅号没有该接口的权限)2、一个网址，用于微信回调，推荐一个内网穿透的工具：内网穿透3、Redis，用于存储token4、一个SpringBoot项目1、使用微信公众号(服务号)的appId和appSecret生成一个token，这个token可以复用，但是有时效性2、使用token当做参数调用微信api：qrcode/create创建一个二维码3、使用微信扫码，用户订阅后，微信官方会回调我们的一个地址，将openId传过来4、将openId保存下来，下次扫描时根据open
500状态码
james_18的博客
04-09 1万+
406状态码 前言 前几天运行项目前端页面找不到js文件 报错406 一、出现406状态码是什么问题引起的 状态码406：HTTP协议状态码的一种，表示客户端无法解析服务端返回的内容。其实就是后台的返回结果前台无法解析就报406错误。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnin
微信公众号开发(4)-实现PC扫码登录
cxh1299543968的博客
10-13 2464
一、PC微信扫码登录原理简介 PC端调用微信服务端的ticket接口，微信服务端获取ticket，PC端拿到ticket之后,生成带参数登录二维码，用户扫码之后会发送扫码事件消息到微信服务端，这个消息中会带上用户微信的openId，根据openId调用获取用户接口拿到用户信息，包含unionId、昵称、头像、性别等字段，这里可以将用户信息存入redis,在PC获取登录二维码之后我们要加一个轮询获取用户扫码状态，原理就是查询redis是否存入的用户信息，如果存入，那么开始做登录流程。 二、代码实现 1、微信服
pc端实现微信扫码登录
qq_35946021的博客
03-18 9496
当我们打开微信扫一扫，此时二维码组件会有变化，显示扫描成功 我们的手机就会弹出一个授权页面。 记住让后端绑定一个微信公众，通过授权该公众就可以了 当点击同意之后，网站就会重定向一个链接，这个code的值是后端给的，前端监听路由变化，就可以拿到code，通过接口就可以获取到微信信息，从而实现微信授权登录 实现pc端实现微信扫码登录 1.安装 npm install vue-wxlogin --save-dev 2.引用 3.使用 APPID是你授权的公众号，sco.....
微信群公众号二维码导航大全网站源码 带整站数据聚合seo+手机版带伪静态源码
07-23
总之，微信群公众号二维码导航大全网站源码是一个功能强大且具有良好用户体验的网站源码，可以帮助用户方便地找到各种微信群和公众号的二维码，并提供整站数据聚合和SEO优化功能，是一个非常实用的工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值