微信网页开发之获取用户信息（四）

吐槽一波：真鸡儿坑，花了老子大半天时间。

获取信息的官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

准备工作：

说明： 个人订阅号无法使用这个功能，我用的微信提供的测试账号来完成的。

1、在测试账号页面添加测试用户(未添加则无法调用测试的JS_SDK功能)，如下图：

添加测试用户
2、在'体验接口权限表'下添加授权回调域名（域名填写必须与redirect_uri一致, 否则会提示10003错误码）
image.png

进入开发1：

说明：获取微信用户信息分为3个步骤，后面两个需要在服务器端进行。（坑~）

1、第一步先获取 code，需要用到的参数如下：(写一个按钮click触发getUserInfo方法)：
需要用到的参数：
appId (保存在后端，同wx.config{...}一起返回的)
redirect_uri 用户点允许后要跳转的路由全称url，微信服务器会再度重定向到redirect_uri并携带openid给你，这样就获取到了(vue项目使用history模式，不能使用hash模式，因为这个url后边跟了#，微信服务器无法解析两个#)

getUserInfo() {
  let appId = localStorage.getItem('appId')  // 可以保存在后端，同wx.config{...}一起返回的
  let url = `https://open.weixin.qq.com/connect/oauth2/authorize?  appid=${appId}&redirect_uri=${encodeURI('http://wx.zhulijun.club/getUserInfo')}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
  window.location.href = url  // 定义一个重定向到该url，微信服务器会再度重定向到redirect_uri并携带code给你
},

进入开发2：

说明：获取到code后，在后端新建一个接口用于获取用户信息。（注意：不能在前端获取到用户信息！！！）

后端开发过程：

1、获取用户信息前还需要获取access_token和openid
需要用到的参数：

code 前端传递过来的
appId 公众号的appId（如果是测试账号记得使用测试账号的appId）
secret 公众号的secret（如果是测试账号记得使用测试账号的secret）

请求地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${secret}&code=${code}&grant_type=authorization_code

2、获取到access_token和openid后就可以愉快的获取到用户信息了，开森！！！
需要用到的参数：
access_token 上个步骤获取到的（不同于获取微信签名里面的access_token）
openid 上个步骤获取到的

请求地址：

https://api.weixin.qq.com/sns/userinfo?access_token=${token}&openid=${openid}&lang=zh_CN

完整代码：

router.get('/getUserInfo', (req, res) => {
    let code = req.query.code // 前端传递的code
    let appId = wxConfig.appID
    let secret = wxConfig.appsecret
    let url1 = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${secret}&code=${code}&grant_type=authorization_code`
    https.get(url1, (response) => {
        let result = ''
        response.on('data', (chunk) => {
            result += chunk
        })
        response.on('end', () => {
            console.log('一、' + result)
            result = JSON.parse(result)  巨坑：node中http和http返回的数据都是字符串，需要JSON.parse转换为对象
            let token = result["access_token"]
            let openid = result["openid"]
            let url2 = `https://api.weixin.qq.com/sns/userinfo?access_token=${token}&openid=${openid}&lang=zh_CN`
            https.get(url2, (response) => {
                let result = ''
                response.on('data', (chunk) => {
                    result += chunk
                })
                response.on('end', () => {
                    console.log('二、' + result)
                    res.send(result)
                })
            })
        })
    })
})

总结:

虽然过程很痛苦，但弄出来的还是很开森滴~~~