vue实现微信授权登录

mounted() {var WXInfo = localStorage.getItem('WXInfo') ? JSON.parse(localStorage.getItem('WXInfo')) : 'noLogin'let str = window.location.hrefvar ua = navigator.userAgent.toLowerCase()var isWeixin = ua.indexOf('micromessenger') !== -1 // 是否 在微信浏览   器内let isURL = window.location.href.indexOf('code=') === -1 // 是否 没有授权重定向回来console.log("参数1：", str, ua, isWeixin, isURL)if (isWeixin && isURL) {this.getLogin()} else {console.log("没有执行")}// 重定向回来if (!isURL) {let num1 = str.indexOf('code=')let num2 = str.indexOf('&state=')this.wxcode = str.slice(num1 + 5, num2)localStorage.setItem('WXcode', JSON.stringify(this.wxcode))// this.$message({//     showClose: true,//     message: "重定向回来：" + JSON.stringify(this.WXcode)// });console.log("wxcode:", JSON.stringify(this.WXcode))}
},关键方法：
methods: {getLogin() {let urlrouter = window.location.href.split('#/')[1] // 当前路由//hostName是后台服务器域名//url 是当前页面的地址。//appId 是公众号appid（注意：确定后台提供的appid和相关的token是同一个公众号的）let url = this.$api.hostName + 'nakAppServer/ncpReport' // 重定向返回地址let str = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.$api.wxAppId + '&redirect_uri=' + url + '/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'console.log("微信授权连接：", str)window.location.href = str},}

关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

vue实现微信授权登录相关推荐

微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
Vue 移动端 hash模式下微信授权登录
需求分析: 1.移动端微信公众号项目,需要获取微信授权进行登录 2.默认打开首页,在路由进入之前进行判断,有如下三种情况 3.本项目有两种账号类型:商家.企业,需在登录页进行选择未授权过,跳到微信授 ...
VUE 实现公众号网页微信授权登录
这里不做过多的解释,具体了解见官网文档. 网页授权官方文档需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...
关于微信公众号页面获取code进行微信授权登录
关于微信公众号页面获取code进行微信授权登录前言提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...
硅谷课堂 12_公众号消息和微信授权登录
硅谷课堂第十二天-公众号消息和微信授权登录文章目录硅谷课堂第十二天-公众号消息和微信授权登录一.公众号普通消息 1.实现目标 2.消息接入 2.1.公众号服务器配置 2.2.验证来自微信服务器消 ...
uniappH5+springboot微信授权登录获取用户数据(非静默授权)
uniappH5+springboot微信授权登录获取用户数据(非静默授权) 微信网页授权开发文档准备工作微信公众号appid和appSecret及配置相关的ip白名单配置网页授权域名,具体操作 ...
慕课网_《微信授权登录》学习总结
时间:2017年08月12日星期六说明:本文部分内容均来自慕课网.@慕课网:http://www.imooc.com 教学源码:无学习源码:https://github.com/zccodere/ ...
html5+ mui框架微信授权登录后跳回app无任何回调事件
2019独角兽企业重金招聘Python工程师标准>>> 微信授权登录可以调起微信,但是在微信上点击确认登陆后跳回app,但是之后无任何回掉事件. 问题原因: 1 因为我在集成Face ...
thinkphp 微信授权登录以及微信实现分享
<?php namespace app\wechat\controller; use think\Controller; use think\Request; /** * 微信授权登录类 * U ...

vue实现微信授权登录

vue实现微信授权登录相关推荐

最新文章

热门文章