vue微信公众号授权页面获取openid、跨域

大家在开发微信公众号的时候，势必会遇到页面授权的这一问题。

于是我上网查了查。

这是我所看到的原创作者的分享

https://blog.csdn.net/a1034386099/article/details/104914784

微信公众号开发需要获取用户的openid，根据微信公众号的官方文档说明，需要做以下几个准备工作
1.开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”配置选项中，修改授权回调域名。请注意，这里填写的是域名。注意：不能是ip地址

如果不进行域名授权配置，微信在授权回调的时候会返回redirect_uri错误。

2.配置域名是要求在web服务器中有微信提供的能访问到的文件，所以还需要一个web服务器，如下图

20200317094654940.jpg

第一步：跳转到授权页，获取code

appid在微信开发者工具中获取

 let urlNow=encodeURIComponent(window.location.href);
// let scope='snsapi_userinfo';    //snsapi_userinfo 非静默授权用户有感知 snsapi_base 静默授权用户无感知  
 
let url= 'https://open.weixin.qq.com'+'/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+urlNow+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
window.location.href = url

授权成功后会重定向的页面中，会带有code参数，通过以下代码获取code，code每5分钟会更新，请勿保存。

getUrlKey:function(name){//获取url 参数
    return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},

第三步.解决刚开始的两个问题

3.1由于本地测试没有域名，可以使用natapp用临时域名映射到本地。参考

3.2有了配置后需要配置web服务器，这里我使用Tomcat，下载Tomcat并安装。

打开Tomcat的目录进入webapps目录下，新建文件夹：myapp,并在该目录下创建WEB-INF文件夹，新建web.xml

 
  myword
  
     404
     /index.html
  
 

第四步.vue打包

打包前在vue.config.js中配置（这里使用vue-cli3.0）。

  publicPath: process.env.NODE_ENV === 'production'
    ? '/myapp/'
    : '/',

执行 npm run build

将打包好的放入tomcat的myapp文件夹下

20200317102815837.png

此时的目录结构如上。

启动Tomcat，mac的启动命令： sudo sh ./startup.sh

5.跨域

由于微信限制，微信授权页面必须在微信开发中工具中打开。由于本地服务和微信接口的api存在跨域问题，本地调试时可以调用一下命令打开微信开发中工具：
open -a /Applications/wechatwebdevtools.app --args --disable-web-security --user-data-dir --allow-running-insecure-content

或者使用Nginx解决跨域问题。

在微信开发中工具中输入： http://xxx.xxx.cc/myapp

vue的完整代码

export default {
  data() {
    return {
      appid: "wx33c5c41d131719ac",
      appsecret: "1115a6551dbb95d3229039188eb64120",
      openid: "",
    };
  },

  created() {
    let code = this.getUrlKey("code");
    if (code) {
      this.$axios
        .get(
          "https://api.weixin.qq.com" +
            "/sns/oauth2/access_token?appid=" +
            this.appid +
            "&secret=" +
            this.appsecret +
            "&code=" +
            code +
            "&grant_type=authorization_code"
        )
        .then((res) => {
          this.openid = res.data.openid;
          console.log(this.openid);
        })
        .catch((error) => {
          alert(error);
        });
    } else {
      this.getCodeApi();
    }
  },
  methods: {
    getCodeApi() {
      //获取code
      let urlNow = encodeURIComponent(window.location.href);
      // let scope='snsapi_userinfo';    //snsapi_userinfo snsapi_base   //静默授权 用户无感知

      let url =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        this.appid +
        "&redirect_uri=" +
        urlNow +
        "&response_type=code&scope=snsapi_userinfo#wechat_redirect";
      window.location.href = url;
    },
    getUrlKey: function (name) {
      //获取url 参数
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
  },
};

以上就是vue微信公众号授权页面获取openid、跨域的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~