微信h5获取用户openid,将code发送给后台从而得到用户openid,解决redirect_uri参数错误

南有樛木

想要在h5页面获取用户code从而得到用户openid的方式有两种,scope=snsapi_base(静默方式,会重定向到当前页并将code返回在url上)或者scope=snsapi_userinfo(非静默方式,会弹出用户授权页面,用户确认授权才会重定向url)两种方式,两者的区别是,前者只能拿到用户oppenid,后者可以拿到用户的其他信息,当然我这里做的功能比较简单,只需要知道用户是否关注该公众号,使用的是第一种方式,本文两种方式都会介绍到。

在html页面中一定要 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 引入微信的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) //获取用户code
 
    //wx.confg设置成功后,即可通过
    wx.ready(function(){
        wx.onMenuShareTimeline({
            imgUrl:"", //绝对路径
            desc:"", //描述
        }) //这个是设置h5页面分享的一些参数,比如非公众号发布文档分享的小图片和描述等等,这只是举个例子,与获取用户code无关,可以忽略
    })
})

2.wx.config设置之后,就可以走获取用户code了,官方文档:https://developers.weixin.qq.... 

设置网页授权接口,设置——公众号设置——功能设置,微信后台后期如果更新,不在这个位置,可以在开发——接口权限中找到相应配置即可更改
image.png
代码:

    function getUserInfo(appId,redUrl){
        //公众号appid
        //redirect_uri 重定向的url,一般情况下会设置为当前url
        //response_type=code 默认值为code
        //scope=snsapi_base/snsapi_userinfo 静默/非静默方式
        
        let url = `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){
                const obj = new URLSearchParams(window.location.search)
                let params = {}
                for (const iterator of obj) { 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
*/

如果在调用getUserInfo的方法出现redirect_uri参数错误字样,一定就是redirect_uri的url没有使用  encodeURI  方法,这个很重要

我这里配置的是  www.XXXX.cn

redirect_uri的url是:http://www.XXXX.cn/XXXX.html 或者 http://www.XXXX.cn/XXXX/XXXX.... 都可以正常得到openid

 

会得到一个重定向的url,code=后面的参数就是用户code
image.png
如果使用非静默方式,会先弹出授权页面,点击确定后会返回静默方式的url,将得到的code发送给后台,后台会给你返回用户openid,即可完成授权功能
image.png

阅读 2k
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏