vue websocket 公众号扫描二维码登录PC端

最新推荐文章于 2022-09-14 17:00:57 发布
最新推荐文章于 2022-09-14 17:00:57 发布
阅读量891 收藏 5
点赞数
分类专栏： 前端开发 nginx 文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxo_apple/article/details/106671655
版权
首先使用的是websocket进行消息的传递，当我们在pc端请求到二维码图片后，打开微信扫一扫，扫描二维码后，就可以在websocket里接收到扫描消息，然后进行自己的业务逻辑处理，具体代码如下：

在这里插入图片描述

websocketLink方法是在页面一开始就调用的

当用户扫完二维码后，就会进入function函数，user就是获取到到用户信息，需要的话要进行Json.parse(user.body)处理
这里有个巨坑的点是，在使用websocket时，前后端通过nginx代理的，有可能就会出现版本不一致的报错，会造成socket连接失败

在这里插入图片描述

解决方法：在Nginx的location中，加入这几句，就可以完美解决了

在这里插入图片描述

然后就可以自由的进行扫码绑定了
zxo_apple
关注
专栏目录
Vue2 - 详解实现网站接入微信扫码登录功能，微信授权生成登录二维码用户用手机扫描二维码登陆，微信扫描二维码登录详细流程及示例代码，支持弹框式、浏览器单独新开页显示，最新vue集成微信扫码授权登录！
王佳斌
06-25 2276
vue2，nuxt2，PC网站，网页，微信扫码登录，微信登陆，vue2微信扫码登录，获取个人信息，扫码登录后如何获取用户手机号，微信扫码授权登录，vue2详细实现微信扫一扫登陆，pc网页微信登录，vue集成微信扫码登录，详细流程和示例源码，第三方扫码登录，vue微信扫码登录怎么新开一页，跳页显示二维码，内嵌登录二维码，iframe，iframe新页面弹出，弹出一个小窗口显示登录二维码，登录报错，微信扫码没反应，解决手机点登录报错没反应，官方文档，手机扫描微信二维码登录网站，最好用的插件，vue-wxlogi
实现手机扫描二维码页面登录，类似web微信-第四篇，服务器端
热门推荐
王老狮专栏
12-08 1万+
终于到了服务器端，第三篇的手机客户端如果已经下载了的话，没有服务器是不能正常运行的。 服务器端要做得事很多，虽然逻辑不是很复杂，但是我们必须要分析清楚我们要做哪些事，请看下图： 通过这张图，我们看出，服务器端的接口一共有6个，分别处理： 手机客户端登录首页二维码图片流long polling维持接收手机客户端已扫描的通知接收手机客户端已确认登录的通知 那么一个一个解决
websocket 扫码登录
吃糖牙疼的博客
05-17 1544
用户在扫码成功后，自动登录网页 过程解析 用户加载登录页面，JS自动生成unicode，并且两秒钟后自动发送给websocket服务器，将unicode存储在websocketSession中， 用户点击微信扫码按钮，将Unicode用作sceneId，随机生成二维码，并在当前页面不跳转的情况下，显示给当前用户 用户扫码后，微信服务号后台获取到Unicode作为的sceneId，通知websoc...
WebSocket：扫码登录
Miss_Y0的博客
04-15 3476
WebSocket是一种在单个 TCP 连接上进行全双工通讯的协议。 只要建立连接，它就允许服务器主动向客户端发送数据，使得客户端和浏览器可以进行双向数据传输。 比如：扫码登录。 一般情况，需要用到用户唯一标识，可以借助uuid生成。 uuid 是通用唯一识别码（Universally Unique Identifier）的缩写。 npm install uuid --save 安装之后在页面中引入。uuid有5个版本，这里以v4为例 import { v4 as uuidv4 } from 'uuid'
vue实现pc端扫码登录
Smile_ping的博客
10-14 2705
vue pc端微信扫码登录 文章目录vue pc端微信扫码登录效果图安装并引入插件参数说明使用自定义样式注意 效果图 安装并引入插件 wxlogin // 安装 npm install vue-wxlogin -S // 局部引入 import wxlogin from 'vue-wxlogin'; // 注册组件 components: { wxlogin } 参数说明 使用 <wxlogin class="l
java springboot+redis+WebSocket实现微信扫码登录
夕颜的博客
09-04 890
微信扫码登录网站代码篇mavenapplication.ymlWeChatProperties.javaSHA1.javaWeChatUtils.javaWeChatService.javaApiWeChatController.java详细讲解篇官方文档获取access_token生成带参数的二维码长链接转短连接接收事件推送-扫描带参数二维码事件微信公众平台接口调试工具微信公众号配置测试有待后续更新 代码篇 maven <!--XML解析--> <dependency
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
10-15
几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决...
Vue实现手机扫描二维码预览页面效果
10-15
在Vue框架中实现手机扫描二维码预览页面是一个常见的需求，特别是在开发移动应用或者H5页面时。本篇文章将详细介绍如何利用Vue和相关的插件来实现这一功能。 首先，我们需要一个能够生成二维码的插件。在本例中，...
springboot+vue微信公众号实现网上商城前后端分离项目（包含数据库脚本文件）.zip
06-02
springboot+vue微信公众号实现网上商城前后端分离项目（包含数据库脚本文件）
vue生成二维码，pc支付【完整效果】
02-18
在Vue.js前端开发中，实现二维码生成和PC支付的完整效果涉及到多个技术栈的整合，包括JavaScript、ECMAScript以及Vue.js的特性。本篇将详细介绍如何在Vue项目中实现这个功能。 首先，我们需要理解二维码的基本原理...
vue项目PC端扫码授权绑定公众号
情非得已小猿猿
03-18 1564
场景需求： PC端点击授权按钮弹框提示立即绑定公众号 生成二维码提供微信扫码授权 PC端提示授权结果提示、微信公众号提示授权成功提示 解决方案： 利用qrcodejs2插件生成二维码（有容错率区别） 需要实时调取接口返回授权绑定公众号是否成功 setInterval定时器异步请求的回调反馈问题无法获取（利用Promise函数） 插件引入使用方法可点击查看以往博客 点击这里 1、view...
实现手机扫码登录PC网站
10-09
该Demo为.NET Core Web环境，集成SignalR，依据SignalR实时通讯特性实现手机扫码登录，代码简洁清晰，可直接使用。该Demo为原理解析，并未实现复杂业务及Token验证（小白提示：扫码登录需保证手机与网站在同一局域网，运行调试为localhost域名，扫码登录页面手机不可访问，需把程序发布到IIS或其他站点才能看到完整流程）
vuejs用APP客户端扫描PC端二维码登录
weixin_34303897的博客
08-31 1718
最近在做APP客户端扫描PC端二维码登录，于是记录一下实现过程，前端是vuejs，APP是IOS和安卓客户端：1.安装QRCode，npm i QRCode --save-dev就可以了。2.安装成功后在对应的单页面中引用import QRCode from 'qrcode',如果此时页面没有报错，说明引入成功了3.向服务端获取qrcod...
php websocket 是否在线_人生苦短我用python[0x0C] 小试tornado(websocket)
weixin_39759995的博客
11-25 76
tornado简介 python不仅可以用来做系统或者业务层面的开发，还可以做跟web相关的项目，目前有3个比较广泛流行的python开源web框架，有web.py、tornado、django。web.py //http://webpy.org/ 它相对于其他两个框架来讲比较精简上手也比较快，当然了精简的另外一方面就是功能比较简单。tornado http://www.tornadoweb....
公众号支持websocket_为统一公众号内容链接跳转体验，公众号不再支持外链识别和跳转...
weixin_40006963的博客
01-12 318
今天真是热闹，两大平台头条和微信都有动静啊，头条今天宣布微头条和问答的统计方式升级，增加「展现量」，详情大家可以看看《头条升级微头条、问答统计方式，新增展现量指标，调整阅读量统计》这篇文章，在这里就不加赘述了。我接下来要讲的是另一大平台微信，刚刚小编在我自己的微信公众号@田云上发文章的时候发现的。微信公众号从20204月10号开始，取消所有文字消息中包含的外链，详情如下：为统一公众号内容的链接跳转...
基于springBoot 实现webSocket方式的扫码登录
公众号-老炮说Java
10-19 239
点击上方蓝色字体，选择“标星公众号”优质文章，第一时间送达关注公众号后台回复pay或mall获取实战项目资料+视频https://blog.csdn.net/q826qq1878/arti...
webSocket vue pc端使用
Myqqlady的博客
09-14 540
第一步：创建一个websocket.js文件。2.在main.js里面挂载。3.在相对应的页面使用。有不懂的地方可以私信我。
公众号支持websocket_“红包封面”支持定制，轻松跳转公众号视频号！
weixin_39608116的博客
12-18 263
不平凡的2020年即将结束不知不觉到最后一个月马上就到了...发红包的时候啦！最近，小编了解到微信红包可以定制封面了！红包封面如何定制？据微信派消息，红包封面开放平台支持个人创作者定制专属红包封面，符合条件的个人创作者可在电脑端前往官网(cover.weixin.qq.com)定制。企业账号需认证公众号，便可以进行封面定制。个人创作者只需满足两大要求：1. 已开通视频号；2. 已完成视频...
基于WebSocket实现二维码的被扫描即失效（VUE+SpringBoot）
无脑程序猿
01-09 1623
基于WebSocket实现二维码的被扫描即失效（VUE+SpringBoot） 算是记录贴，目的是给小程序的webview使用的，因为微信的限制，目前还没全部完成，在浏览器已经可以实现了 下面正文： 后端代码： 1、依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websoc
vue实现钉钉扫描二维码登录
最新发布
05-26
要实现钉钉扫描二维码登录，需要进行以下步骤： 1. 在钉钉开放平台注册应用，并获取到应用的 `AppId` 和 `AppSecret`。 2. 在前端页面上实现钉钉扫描二维码的功能，可以使用钉钉提供的 `DingTalkPC.runtime....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值