h5页面 vue 微信扫码 |
您所在的位置:网站首页 › 微信h5扫码 › h5页面 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 注意:设置微信二维码的回调地址一定要和部署好的地址路径一致,只能在线上进行调试。
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |