当前位置: 首页 > Web前端 > HTML5

微信h5获取用户openid,发送代码到后台获取用户openid,解决redirect_uri参数错误

时间:2023-04-04 23:29:30 HTML5

h5页面获取用户代码有两种方式获取用户openid,scope=snsapi_base(静默方式,会重复Directtothecurrentpageandreturnthecodeontheurl)或者scope=snsapi_userinfo(非静默方式,会弹出用户授权页面,用户确认授权后才会重定向url).两者的区别在于前者只能获取到用户oppenid,后者可以获取到用户的其他信息。当然,我这里做的功能比较简单。我只需要知道用户是否关注公众号。使用第一种方法。本文将介绍这两种方法。html页面中微信js文件中必须引入,否则wx不能使用以相同的方式执行所需的设置和操作非常重要。微信开发官方文档:https://developers.weixin.qq...1.根据微信提供的方法公众号官方文档:appId,timestamp,nonceStr,signature,使用wx.config({debug:false,appId:appId,timestamp:timestamp,nonceStr:nonceStr,signature:signature,jsApiList:["onMenuShareTimeline","onMenuShareAppMessage"]//这里根据自己需要设置,微信可用公众号在文档中找到相关设置,这里不再多介绍});getUserInfo(appId,window.location.href)//获取用户代码//wx.confg设置成功后,可以通过wx.ready(function(){wx.onMenuShareTimeline({imgUrl:"",//绝对路径desc:"",//Description})//这个是设置h5页面分享的一些参数,比如非公众号文档分享的小图片和描述等。这个只是举个例子,它有与获取用户码无关,可以忽略})})2.设置wx.config后,即可获取用户码。官方文档:https://developers.weixin.qq....setting网页授权界面,setting——公众号setting——功能设置,如果微信后台以后更新了,如果不在这个位置,可以在开发中找到相应的配置——接口权限更改代码:functiongetUserInfo(appId,redUrl){//公众号appid//redirect_uri重定向的url,一般设置为当前url//response_type=code默认值为code//scope=snsapi_base/snsapi_userinfo静默/非静默模式leturl=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURI(redUrl)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`//window.location.href=url//有问题在这里,如果你直接跳,它会一直跳下去。我们只需要他跳一次就可以拿到code了,所以我们需要在拿到code后停止跳转//因为重定向跳转后的url中一定要有code=这个词,所以我就用它作为停止跳转。如果有更好的方法,请指出if(window.location.href.indexOf('code=')!=-1){constobj=newURLSearchParams(window.location.search)letparams={}for(constiteratorofobj){params[iterator[0]]=iterator[1]}}else{window.location.href=url}}/**url这里我是用encodeURI方法转换的。微信官方文档没有提到需要使用这个方法转换url*encodeURI方法转换url很重要,因为一开始没有使用encodeURI转换,一直报redirect_uri域名错误。弄了半天才发现是这道题问题引起*网上也有很多教程说url和后台设置的网页授权url不一致,都是瞎说的,即使设置一样也会提示这个错误,完全是没有使用encodeURI方法转换url造成的*微信官网授权设置文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html*/如果有redirect_uri参数调用getUserInfo的方法出错,肯定是redirect_uri的url没有使用encodeURI方法,这点很重要我这里配置的www.XXXX.cnredirect_uriURL是:http://www.XXXX.cn/XXXX。html或者http://www.XXXX.cn/XXXX/XXXX....都可以正常获取openid会得到一个重定向的url,code=后面的参数就是用户代码。如果使用非静默方式,会先弹出授权页面。点击确定后,会返回静默方法的url,并将获取到的code发送给后台,后台给你返回用户openid,完成授权功能