H5在微信中獲取openid

爲何要獲取openid

    openId是用戶在當前公衆號下的惟一標識（‘身份證’）。在微信中進行微信分享、支付等操做時須要用戶的openid。H5要在微信中獲取到用戶openid，須要得到微信受權，受權分兩種方式：靜默受權和手動受權

靜默受權：用戶使用過程當中不知不覺獲取到openid，不須要用戶手動受權，可是會在原頁面進行刷新

手動受權：須要用戶點擊贊成受權，能獲取到更多用戶信息

    （我本次使用的是靜默受權，因此詳細記錄一下靜默受權的方式）

獲取方法

一、首先，要有一個公衆號，以及公衆號的appid，而後在公衆號後臺上設置你的網頁受權域名（注意不加http://和https://）

二、靜默受權，在進入網頁以後，訪問微信提供的url，在其中設置受權方式以及回調頁面url，返回的頁面url中就會包含一個code參數

（注意：此處的url是轉碼事後的url）

url轉碼方法：

var url = this.urlencode(url_old);

// 編碼函數

    urlencode (str) { 

      str = (str + '').toString(); 

      return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28'). 

      replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+'); 

    },

具體獲取code方法：

// 獲取code

    getBaseInfos(){

      var url_code = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+你的appid+"&redirect_uri="+當前頁面url+"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";

      window.location.href = url_code;//打開這個連接，你的url後面就會跟上code的參數

    }

若是配置參數所有正確，那麼此時經過回調地址刷新頁面後，你就會看到在地址欄中的code了。

注意：要監測當前url中是否含有code參數，若是包含的話就繼續下一步操做，不然頁面是一直重複刷新反覆獲取code。且要注意code碼只能使用一次，使用事後就失效了。

三、拿到code以後，須要把code傳給後端，後端去請求微信獲取openid等參數，前端是獲取不到的，微信開發文檔中是這麼寫的：

微信開發文檔

後端請求成功後，獲得的數據應該是這樣的

四、這樣咱們就能獲取到用戶的openid進行開發了

開發建議：

判斷是否微信內置瀏覽器，若是是微信內置瀏覽器的話，去獲取用戶的openid，不然在外面瀏覽器中打開獲取不到code是會報錯的。

一、判斷是不是微信瀏覽器

isWeiXin() {

        var ua = window.navigator.userAgent.toLowerCase();

        if (ua.match(/MicroMessenger/i) == 'micromessenger') {

            return true;

        } else {

            return false;

        }

}

二、根據以上函數判斷值進行不一樣的操做

if(this.isWeiXin()){

        console.log(" 是來自微信內置瀏覽器")

        if(url_s.indexOf("code") > 0 ){// 若是url字符串包含code字段

          this.code = cs.code;//則獲取code參數值並存入緩存

          localStorage.setItem("code", cs.token);

            this.getOpenId();//繼續下一步獲取openid

        }else{//不然，就先調取函數獲取code

          this.getBaseInfos();

        }

    }else{

        console.log("不是來自微信內置瀏覽器")

    }