vue实现微信授权登录
mounted() {var WXInfo = localStorage.getItem('WXInfo') ? JSON.parse(localStorage.getItem('WXInfo')) : 'noLogin'let str = window.location.hrefvar ua = navigator.userAgent.toLowerCase()...
·
mounted() {
var WXInfo = localStorage.getItem('WXInfo') ? JSON.parse(localStorage.getItem('WXInfo')) : 'noLogin'
let str = window.location.href
var 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)关注了公众号后,才能调用成功的。
更多推荐
已为社区贡献1条内容
所有评论(0)