微信公眾號h5獲取用戶openId的方法和步驟

微信h5靜默、非靜默授權獲取用戶openId的方法和步驟:

一、openId是什么？

openId是用戶在當前公眾號下的唯一標識（‘身份證’），就是說通過這個openId，就能區分在這個公眾號下具體是哪個用戶。

二、openId有什么用？

假如用戶A在當前公眾號下購買了一件商品，用戶的下單信息肯定要存儲到后台數據庫，那根據什么進行存儲呢？openId是用戶在當前公眾號下的唯一標識，通過openId和用戶的下單購買信息進行鍵值對的數據綁定。那么我要查詢該用戶購買過什么商品，就能夠通過openId去查詢，並且數據是唯一的，不會和另外的用戶數據有沖突。

拓展：UnionID：一個商家或公司可能會有多個公眾號，假如用戶A同時都關注了這個公司下面的三個公眾號，那么這個用戶就會有三個openId(一個公眾號就對應一個openID)。如果作為開發者的我們，要對這個用戶在這三個公眾號下消費的數據進行匯總，我怎么獲取到這三份數據（同一用戶的）？答案是 UnionId，微信開發者文檔：如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取用戶基本信息中的unionid來區分用戶的唯一性，因為同一用戶，對同一個微信開放平台下的不同應用（移動應用、網站應用和公眾帳號），unionid是相同的。就是說如果要獲取用戶在同一公司不同公眾號下的數據，后台表結構不但要關聯openId,還要關聯UnionId。

三、怎么獲取openId？

（一）登錄微信公眾平台后台獲取公眾號的AppId，設置回調地址。

回調地址設置頁面向導：開發>接口權限>網頁服務>網頁授權>修改。開發的項目需要放到已經解析好服務器域名的服務器下，同時把Mp***.text文件放到服務器根目錄下，此時你的服務器必須能聯通外網也就是有公網IP,並且80端口是打開的，可以使用阿里雲等服務器，默認配置就可以了。

（二）根據開發需要，靜默授權還是非靜默授權

   ① 靜默授權：snsapi_base，沒有彈窗，只能獲取用戶的openId。

   ②非靜默授權：snsapi_userinfo，有彈框彈出需要用戶手動點擊確認授權。可以獲取openId，用戶的頭像、昵稱等

（三）前端代碼，配置的參數要一一對應，獲取code，並調用后台接口，把code傳給后台

const code = this.getUrlParam('code')  // 截取路徑中的code
if (code == null || code === '') {
  const local = window.location.href
  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
} else {
  this.getOpenId(code) //把code傳給后台獲取用戶信息
}

redirect_uri，這個的意思是：授權完成后再重新回到當前頁面（又刷新了一次頁面）

getUrlParam的方法，可以百度下，就是獲取頁面路徑的某個字段所對應的參數。

getUrlParam(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    let url = window.location.href.split('#')[0]
    let search = url.split('?')[1]
    if (search) {
      var r = search.substr(0).match(reg)
      if (r !== null)
        return unescape(r[2])
      return null
    } else
      return null
  }

如果配置參數一一對應，那么此時已經通過回調地址刷新頁面后，你就會看到在地址欄中的code了。

(四)前端截取地址欄中的code后通過調接口把code傳給后台，后台通過code獲取openId和用戶頭像昵稱等信息並返回給前端

為什么，前端不能一起把獲取code和獲取openId的操作一並做了，還要請求后台，讓后台獲取openId？

（五）后台通過 code、AppSecret（公眾號平台后台取得）請求微信鏈接獲取openId

（六）通過openId做用戶的數據綁定或查詢等操作

    前后端都獲取了openId后，就能通過openId做用戶數據的綁定和查詢了。

 

完整案例：

// 強制關注公眾號，獲取openid
getCode = function () {
    if (sessionStorage.getItem("openid")&&sessionStorage.getItem("openid")!="undefined") {
        return false;
    }
    var code = getUrlParam('code') // 截取路徑中的code，如果沒有就去微信授權，如果已經獲取到了就直接傳code給后台獲取openId
    var local = window.location.href;
    var APPID = 'xxx';
    if (code == null || code === '') {
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
    } else {
        getOpenId(code) //把code傳給后台獲取用戶信息
    }
}
//把code傳給后台,得到openid
getOpenId = function (code) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'xxx',
        data: { code: code },
        success: function (res) {
            if (res.status == -1) {
                // 提示沒有關注公眾號 沒有關注公眾號跳轉到關注公眾號頁面
                console.log('您還未關注公眾號喔');
                //二維碼彈窗
                $('.openPopup').click();
                return;
            } else {
                // 本地存儲這個openid，並刷新頁面
                sessionStorage.setItem("openid", res.data.openid);
                location.reload();
            }
        }
    });
}
//獲取地址欄的參數
getUrlParam= function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
}
//頁面執行調用
getCode();