1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信公众号网页授权--前端获取code及用户信息(vue)【简单详细版】

微信公众号网页授权--前端获取code及用户信息(vue)【简单详细版】

时间:2023-04-24 23:35:07

相关推荐

微信公众号网页授权--前端获取code及用户信息(vue)【简单详细版】

嗨喽大家好,前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的遇到的一些问题的见解,希望对你们有帮助。

一、测试号相关配置

首先在你公司申请的测试号上配置好相关信息,将你的域名配置好

URL与Token都是要后台配置好的,直接叫后台给过来就好啦,域名一定要和URL的域名保持一致。

然后,在体验接口权限表里面找到网页帐号--网页授权获取用户基本信息,点击修改:

二、获取code

配置好以上回调域名等后,就可以写代码了。首先是获取code,说道获取code我们就需要用到这个接口:

https://open./connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。

给大家看个使用列子

getCode () { // 非静默授权,第一次有弹框this.code = ''if (this.page == 'shopproductdetails') {var local = '你们自己的域名'} else {var local = '你们自己的域名'}var appid = '你们自己的appid' //公众号里有自己查,不会找的查一下百度this.code = this.getUrlCode().code // 截取codeif (this.code == null || this.code === '') { // 如果没有code,则去请求window.location.href = "https://open./connect/oauth2/authorize?appid=" + this.appid +"&redirect_uri=" +encodeURIComponent(local) + "&response_type=code&scope=snsapi_base#wechat_redirect"} else {// 你自己的业务逻辑}},getUrlCode() { // 截取url中的code方法var url = location.searchthis.winUrl = urlvar theRequest = new Object()if (url.indexOf("?") != -1) {var str = url.substr(1)var strs = str.split("&")for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])}}console.log(theRequest)return theRequest},

大家可以参照一下,回调后code在路径上第二个方法截取下来,大家缓存或者用其他方式存储起来就可以用了,好啦,今天就到这,谢谢大家!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。