关于html5:微信h5获取用户openid将code发送给后台从而得到用户openid解决redirecturi参数错误

9次阅读

共计 2281 个字符，预计需要花费 6 分钟才能阅读完成。

想要在 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….

设置网页受权接口，设置——公众号设置——性能设置，微信后盾前期如果更新，不在这个地位，能够在开发——接口权限中找到相应配置即可更改

代码：

    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

如果应用非静默形式，会先弹出受权页面，点击确定后会返回静默形式的 url，将失去的 code 发送给后盾，后盾会给你返回用户 openid，即可实现受权性能

正文完