微信公众号开发之测试号入坑大法（二）——获取关注公众号的用户信息

一、前言

很多时候，我们都会看到访问一些公众号，然后就会问你是否允许授权获取个人信息，这个功能实怎么做的呢？且看下面一一分解。

二、在测试号页面找到授权第三方网页获取个人信息的接口

在这个页面往下翻

                                                                                                   图1-1

我们可以找到一堆接口简介，如下图1-2

                                                                                                     图1-2

我们不妨可以点击进去看看文档怎么写的，我简单总结出来就是：

1.通过https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect获取到code

这里要注意的是，redirect_uri在测试号的必备条件是http或者https而且要是80端口的域名，而且是经过urlEncode处理的url回调地址，最好就可以使用内网穿透（比如ngrok，免费的）去配置了

回调地址有什么用处呢？就是微信服务器判断成功后，会去到你回调的地址那里，并且往地址后面加上?code=xxxx，这个时候你就可以获取到code了

2.配置测试号对应的授权回调地址。

回到下图这个页面

点击修改，出现下图

填写完成后，我们可以进入下一步了

3.可以测试一下第一步代码是否成功了，这里要打开微信开发者工具，然后输入自己的前端网址（我的是lzy123.front.com）

具体代码如下

4.当你发现页面跳到你希望回调的页面当中时，那就成功一半了！接下来，就是通过跳转的地址后面跟着的参数code，拿到这个code去请求access_token

注意！！！access_token有效期是2小时7200秒，所以我这里使用了redis存储，并设置了失效时间，失效后会重新请求微信服务器上图的链接重新获取，获取方式如下

5.通过第3步的openid获取到用户信息

后面的4，5步都比较简单，只是api接口的调用，这里就不细说了。

最后上一些关键的代码：

• 前端页面

这是我的登录页

<template>
  <div>
    <!-- 点击按钮进行微信快捷登录，获取个人信息 -->
    <van-button type="primary" @click="goToAuth">微信登录</van-button>
  </div>
</template>

<script>
export default {
  methods: {
    /**
     * @description 跳转url获取code
     * redirectUrl——拿到code的回调函数，必须要把对应的url进行encode
     * scope要写snsapi_userinfo才能拿到用户的信息
     * state可以随便乱填写
     * @author lvzhiyuan
     * @date 2020/5/6
     */
    goToAuth () {
      const redirectUrl = 'http%3a%2f%2flzy2.wxfront.com%2fauth';
      location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?` +
        `appid=${process.env.VUE_APP_APPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
    }
  }
};
</script>

• 这是授权页

<script>
export default {
    created() {
       /**
         * @description 因为这里是微信帮你回调到的页面了，它还会为你在url后面加上参数code
         * 通过code可以获取access_token
         */
        const code = this.$route.query.code;
        this.getAccessToken(code);
    },
    methods: {
       /**
         * @description 获取微信网页授权的token
         * 通过code获取对应的access_token
         */
        async getAccessToken (code) {
          try {
            const { data } = await axios.get(`http://lzy123.free.idcfengye.com/user/authToken?code=${code}`);
            if (data.code === 200) {
              this.getUserInfo(data.data);
            }
          } catch (e) {
            console.log(`src/views/auth/index.vue-getAccessToken getAccessToken error: ${e}`);
          }
        },
        /**
     * @description 根据token和openid获取对应的用户信息
     * 通过token获取对应的
     * @author lvzhiyuan
     * @date 2020/5/5
     */
    async getUserInfo (obj) {
      try {
        const { data } = await axios.get(`http://lzy123.free.idcfengye.com/user/info?`
          + `access_token=${obj.access_token}&openid=${obj.openid}&lang=zh_CN`);
        if (data.code === 200) {
          this.userInfo = data.data;
        }
      } catch (e) {
        console.log(`src/views/auth/index.vue-getUserInfo error: ${e}`);
      }
    }
    }
};
</script>