微信小程序讀取用戶openid【前端+後端代碼】

微信小程序讀取用戶openid

場景

小程序中須要加入一個「收藏」功能。用戶能夠點擊「個人收藏」看到本身收藏的文章。
在這個需求中，咱們須要獲得一個關聯用戶的惟一標示，那就是openid,在小程序中怎麼獲取用戶的openid呢？

登陸憑證（code）

首先咱們調用wx.login(object)接口獲取登陸憑證（code）進而換取用戶登陸態信息，包括用戶的惟一標識（openid） 及本次登陸的 會話密鑰（session_key）。用戶數據的加解密通信須要依賴會話密鑰完成。

onReady: function (options) {
    const that = this;
    wx.login({
      // 獲取code
      success: function (res) {
        var code = res.code; // 返回code
      }
    })
  },
複製代碼

獲取openid和session_key

微信提供接口：
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
將APPID和SECRET換成本身小程序的。再將上面login接口返回的code傳入JSCODE來調用接口；

這是一個 HTTPS 接口，開發者服務器使用登陸憑證 code 獲取 session_key 和 openid。其中 session_key 是對用戶數據進行加密簽名的密鑰。爲了自身應用安全，session_key 不該該在網絡上傳輸。

onReady: function (options) {
    const that = this;
    wx.login({
      // 獲取code
      success: function (res) {
        var code = res.code; // 返回code
        var APPID = ''; // 換成本身的APPID
        var SECRET = '' // 換成本身的SECRET
        var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + APPID + '&secret=' + SECRET + '&js_code=' + code + '&grant_type=authorization_code';

        wx.request({
            url,
            data: {},
            headers: {
                "content-type": "application/json",
            },
            success: function(res){
                that.setData({
                    openid: res.openid
                });
            }
        })
      }
    })
  },
複製代碼

在這段代碼就完成了讀取用戶openid的操做，可是你會發現這段代碼只能在微信開發者工具中調用成功【固然是在你勾選了不校驗HTTPS合法域名】的狀況下，勾選這個的好處就是咱們在開發的時候可使用本地服務，而不用HTTPS域名。

由於小程序的前端接口調用必須使用HTTPS,並且那麼這段代碼使用手機體驗會出現什麼問題呢？
接口報錯：

request:fail url not in domain list
複製代碼

報錯提示說請求的url不在域名列表裏，應該是尚未配置服務器域名；
沒有配置那咱們就進入小程序進行配置嘛。
登錄小程序 - 開發 - 開發中心 - 服務器域名【添加https://api.weixin.qq.com】這個域名

可是你會發現提示錯誤信息。

瞭解詳情，能夠看到這一大段說明；

這個說明爲了安全性着想。咱們讀取用戶的openid是不能放入前端來寫的。咱們必須把appid和Secret放在後端進行，而後經過接口的形式返回給前端。

後端讀取openid

筆者用的是node寫後端哈。使用request模塊來發起url請求

// 獲取openid
router.get('/getopenid', function(req,res, next){
    var appId = ''; // 換成本身的APPID
    var secret = ''; // 換成本身的secret
    var params = URL.parse(req.url, true).query;
    var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + params.code + '&grant_type=authorization_code';
    request(url, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body) 
        }
        res.send(body);
    })
})
複製代碼

前端讀取getopenid接口

修改前面讀取openid的方法

onReady: function (options) {
    const that = this;
    wx.login({
      //獲取code
      success: function (res) {
        var code = res.code; //返回code
        wx.request({
          url: `${BASE_URL}/apis/getopenid`,
          method: 'get',
          data: {
            code: code,
          },
          success: function (res) {
            that.setData({
              openid: res.data.openid
            })
          }
        })
      }
    })
  },
複製代碼

這樣就完美的實現了讀取用戶的openid。
記住不要把本身的appid和secret放在前端代碼中。

若是有什麼好的建議或者意見請關注公衆號