Vue前端实现微信扫码登录

微信登录两种实现方法：

说在前面：由于微信的限制不得不将vue的路由模式切换为history模式。

第一种：

后端实现二维码，将二维码的跳转链接返回前端，并且传一个state给前端做标识，前端需要点击跳转到一个单独的微信登录页面，然后开始调用轮询接口传入state监听用户扫码的操作

检测后端返回字段，success为后端检测到用户点击了授权，error为用户取消授权，

用户授权后用state继续请求微信数据，成功拿到用户数据

第二种：前端生成二维码

首先根据官方文档，需要建立一个放置二维码的容器（由于我的项目登录采用的是弹窗，所以不能再mounted中渲染二维码，因为弹窗在父组件加载时就已经渲染好，所以使用watch侦听控制登录弹窗的参数进行以下操作）

对其进行监听，此时验证码渲染完毕，

设置二维码的函数如下：

self_redirect: true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。

id：为二维码的容器id

appid：后台配置好的appid 问后台拿！

scope：网页应用目前仅填写snsapi_login即可

redirect_url：扫码成功后的回调地址，由于本项目需要多个地方进行登录操作，所以需要模板字符串拼接回调。

state：为了防止csrf（跨站请求伪造攻击），设置一个3位的随机数

配置好后用户点击登录就会跳转到扫码的页面，同时会发现地址后边已经携带了query

然后可以在router.js文件中监听到query值

紧接着调用vuex的action中保存的微信登录接口

判断 resultStatus和resultData中有值说明已经拿到了微信的数据，更新vuex

注意：设置微信二维码的回调地址一定要和部署好的地址路径一致，只能在线上进行调试。

Vue前端实现微信扫码登录相关推荐

Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录.相比传统的账号密码方便很多. 企业微信扫码登录流程文档:(链接) 对于前端来说,重要的是如何构造 ...
Vue前端开发——微信扫码支付
1.安装 qrcodejs2 (注意:安装的是qrcodejs2,不要安装qrcode ---> 会报错) npm install qrcodejs2 --save 2.Course.vue中页 ...
vue PC端微信扫码登录
我用的element,要是在弹窗里面使用,还是用自定义弹窗比较好,据说用官方的el-dialog会出不来.上代码: 在index.html页面里面引入对应的脚本 <script src=&quo ...
前端实现微信扫码登录网站 pc端(二维码嵌套页面) 超详细，包会
一.准备工作本人申明:本案例使用到的appid和AppSecret都是无效的 appid:应用唯一标识,在微信开放平台提交应用审核通过后获得 AppSecret:在微信开放平台提交应用审核通过后获得 ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...
vue实现pc端扫码登录
vue pc端微信扫码登录文章目录 vue pc端微信扫码登录效果图方式一:npm 安装并引入插件参数说明使用自定义样式方式二:通过js 引用js文件 vue 使用注意效果图方式一 ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
vue 微信扫码登录嵌入方式及开发踩的坑点
文章目录 1. 微信扫码登录开发文档申请AppID,AppSecret,配置回调地址 2. 微信扫码登录方式 3. 微信扫码登录代码 4. 使用 href 更改内嵌的样式 5. 坑点1:redire ...

Vue前端实现微信扫码登录

Vue前端实现微信扫码登录相关推荐

最新文章

热门文章