授权整体步骤如下
-
引导用户进入授权页面同意授权后微信跳转回调地址并传递参数code 获取code
-
通过code换取网页授权access_token(与基础支持中的access_token不同)
-
如果需要,开发者可以刷新网页授权access_token,避免过期
-
通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)
image
其中 本页例子前端只做第1步,后端程序员做2,3,4包括配置公众号上的域名
新建一个index.vue的页面,在此页面进行授权
授权需要先拿到code ,获取code需要以下参数
const base_url = 'http://baidu.com'// 前端域名
const wx_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+base_url+'&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
export default {
components: {
},
data() {
return {
}
},
onLoad() {
// 获取URL 上code
const code = this.getUrlParam('code')
// 判断是否存在code
if(code == null || code == '') {
// 重新获取code
// console.log(code)
window.location.href = wx_url
} else {
// 发送code
this.postCode(code)
}
},
methods: {
// 解析URL 参数
getUrlParam(name) {
let reg = new RegExp('(^|&)'+ name + '=([^&]*)(&|$)')
let r = window.location.search.substr(1).match(reg)
if(r!=null){
return unescape(r[2])
}
return null
},
// 发送code 获取信息
postCode(code) {
uni.request({
url: 'https://www.example.com/request', //发送code给后台。
success: (res)=> {
//res里面包含用户信息 openid等
}
});
}
}
}
作者:微笑是我_f8bb
链接:https://www.jianshu.com/p/c0e8d35f5a85
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
网友评论