admin管理员组文章数量:1531791
这里不做过多的解释,具体了解见官网文档。
网页授权官方文档
需要准备工作:
1、微信开发者工具
2、公众号添加开发者权限以及本地IP白名单
3、公众号唯一标识:appID
4、公众号配置网页授权域名
注:重定向地址的域名一定要和公众号所配置的域名为同一域名!!! 不然会报 redirect_uri 参数错误!!!
放代码:
<template>
<button type="primary" @click="handLogin()">微信授权登录</button>
</template>
<script>
export default {
data() {
code: '' // 前端获取 code 传给后端调用相应接口
},
created() {
// 从 window.location.href 中截取 code 并且赋值
if(window.location.href.indexOf('CSDN_state') !== -1) { // 此方法仅供参考!!!
this.code = window.location.href.split('?')[1].split('=')[1].split('&')[0];
}
if(this.code) { // 存在 code 直接调用接口
this.handGetUserInfo(this.code);
}
},
methods: {
handLogin() {
// 重定向地址重定到当前页面,在路径获取 code
const hrefUrl = window.location.href;
if (this.code === '') {
window.location.href = `
https://open.weixin.qq/connect/oauth2/authorize
?appid=appid
&redirect_uri=${encodeURIComponent(hrefUrl)}
&response_type=code
&scope=snsapi_userinfo
&state=CSDN_state#wechat_redirect
`
}
},
handGetUserInfo(code) {
// 调用后端接口,参数为 code 剩下工作量交给后端即可
wxLogin({
data: {
code: code
},
method: 'GET',
}).then(res => {
// res => 登陆成功!
......
})
},
},
}
</script>
就这么多,如果能帮助萌新那就再好不过了, 大佬的话浏览浏览就行啦,啊hahahaha~~~
版权声明:本文标题:VUE 实现公众号网页微信授权登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725632672a1033899.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论