微信公众号开发订阅号如何获取用户信息(vue开发)

快来打我* 2021-09-02 09:52 562阅读 0赞

在公众号中配置开发接口权限(可以选择后期配置)

![2020101615181598.png][]

**可以先使用测试号** [http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index][http_mp.weixin.qq.com_debug_cgi-bin_sandboxinfo_action_showinfo_t_sandbox_index]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

![20201016152326868.png][]

**这里设置的回调页面域名是vue项目运行起来的地址**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

**创建一个空白组件**

<template>
      <div class="weixin">
    
      </div>
    </template>
    
    <script>
      // 判断是否为公众号模拟器环境
      const isWeChat = () => {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
      }
      export default {
        created() {
          this.getWXMessage();
        },
        methods: {
            getWXMessage() {
                if (isWeChat()) {
                    let appId = '', redirect_uri='',
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
                }
            }
          },
        }
    
    </script>
    <style scoped>
    </style>

[https://open.weixin.qq.com/connect/oauth2/authorize?appid=$\{appId\}&redirect\_uri=$\{redirect\_uri\}&response\_type=code&scope=snsapi\_userinfo&state=1\#wechat\_redirect][https_open.weixin.qq.com_connect_oauth2_authorize_appid_appId_redirect_uri_redirect_uri_response_type_code_scope_snsapi_userinfo_state_1_wechat_redirect]

该链接执行完，如果用户**授权成功会重定向到我们配置的redirect\_uri链接并且携带code和state**

![20201016154028469.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2][]

在重定向后的vue文件中，**用this.$route.query.code获取该用户的code**，将code传递给后端，接下来的请求为了数据安全必须在服务器端处理

测试时需要使用**微信开发工具**

**文档地址**[https://developers.weixin.qq.com/doc/offiaccount/OA\_Web\_Apps/Wechat\_webpage\_authorization.html][https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_Wechat_webpage_authorization.html]

[2020101615181598.png]: /images/20210813/6be17940e9e840a68e98fa7e8912dd07.png
[http_mp.weixin.qq.com_debug_cgi-bin_sandboxinfo_action_showinfo_t_sandbox_index]: http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/48e17933769246d4b118376f5f6a4bf4.png
[20201016152326868.png]: /images/20210813/14dab91a3f53485aa7d30e3ec1a1f72e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/b252f589bf6347978aaee1e491969b53.png
[https_open.weixin.qq.com_connect_oauth2_authorize_appid_appId_redirect_uri_redirect_uri_response_type_code_scope_snsapi_userinfo_state_1_wechat_redirect]: https://open.weixin.qq.com/connect/oauth2/authorize?appid=$%7BappId%7D&redirect_uri=$%7Bredirect_uri%7D&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect
[20201016154028469.png]: /images/20210813/08a489d3303c48518c3ac47919a010bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2]: /images/20210813/937c32ed5e864adf855a052bac48f6ee.png
[https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_Wechat_webpage_authorization.html]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html