前端vue+公众号授权登录开发

前期准备：

1、申请自己的公众号，选择公众号类型为服务号（服务号才能进行以下步骤，订阅号是干不了的）；

2、拥有自己的域名，并且需要备案，备案成功后进行解析（备案域名在公众号获取用户信息的时要用，否则无法获取用户信息），购买域名+备案这个过程比较长，需要提前十天半个月准备，腾讯阿里的都可以，但是建议同一个运营商的云服务器+域名备案，其中原因不详述；

微信授权登录：

授权登录的文章很多，想看整体设计比较详细的推荐：

https://www.cnblogs.com/lpblogs/p/7445763.html，等等等；

微信官方：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

很多文章都讲的比较复杂，微信官方步骤详细，这里讲点实际简单的；

设计思路：前端获取code，上传到后台，后台通过code获取用户唯一的openid，就用这个openid作为自己系统的用户唯一标识即可。

直接上整体逻辑图：

整体流程一看就明了，系统只要根据openid+电话号码进行用户认证登录即可，当然电话号码是我自己系统需要的，如果不需要的可以忽略，只使用openid即可。

具体前端步骤如下，后台自行找后台人员解决。

1、找到你的appid、appSecret，这里在公众号管理后台的基本配置查看；

2、在公众号的，开发-》接口权限-》网页授权，设置你的回调域名；

3、前端获取code；mouted中获取code，这里务必要填写你自己的回调域名；并且这个前端界面是可以通过域名直接访问得到的，如何设置域名直接访问到这几界面，自行百度配置了，我自己的是部署在nginx上；

  mounted() {
    this.wxCode = this.getQueryString('code')
  },
  methods: {
    /**
     * 获取url中的某个参数
     * @param name 参数名称
     * @returns {string}
     * @constructor
     */
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
      var context = "";
      if (r != null)
        context = r[2];
      reg = null;
      r = null;
      return context == null || context == "" || context == "undefined" ? "" : context;
    },
    toGetWXCode() {
      let redirectUrl = encodeURIComponent('你的域名')
      let oAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${WX_APPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect`
      window.location.href = oAuthUrl
    },
   }

上不走完，后面的逻辑基本上是属于业务逻辑了，这里就拜拜了。