前端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
    },
   }

上不走完，後面的邏輯基本上是屬於業務邏輯了，這裏就拜拜了。