微信小程序獲取用戶的 OpenId (附前端代碼)

OpenId是什麼?
openid 是表示用戶在你的當前應用中的 惟一標識,好比小程序,微信公衆號等,這些都算是一個應用,若是你有多個應用,同一個用戶的openId可能並不相同
**下圖是獲取OpenId的過程微信的官方文檔和時序圖**

clipboard.png

**小程序登陸的時序圖**

clipboard.png


思路:

  1. 首先調用wx.login({})獲取登陸憑證(code)
  2. 調用接口前,須要把微信小程序的appid 和 secret 告知後端
  3. 用拿到的code 換取 openid

實例:

App({
onLaunch: function() {
    var self = this;
    // 展現本地存儲能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

/** 重點來了****************
    |
    |
    |
    |
*********/
    // 登陸
    wx.login({
      success: res => {
        // 發送 res.code 到後臺換取 openId, sessionKey, unionId
        var Params = {
          code: res.code, //臨時登陸憑證
          key: self.globalData.MD5Key
        };
        //生成加密key
        Params.key = self.MD5(Params.code + "&" + self.getNowTime() + "&" + Params.key);
        wx.request({
          url: 'https://testurl/api/test/GetOpenId', //此處填寫第三方的接口地址
          data: '=' + JSON.stringify(Params),
          header: {
            'content-type': 'application/json'
          },
          method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          success: function(res) {
            var openid = res.data.RntData.openid //返回openid
            self.globalData.openid = openid;
            console.log(openid);
          }
        })
      }
    })
    /** 重點結束
    |
    |
    |
    |
********************************/
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經受權,能夠直接調用 getUserInfo 獲取頭像暱稱,不會彈框
          wx.getUserInfo({
            success: res => {
              // 能夠將 res 發送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 因爲 getUserInfo 是網絡請求,可能會在 Page.onLoad 以後才返回
              // 因此此處加入 callback 以防止這種狀況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  }
})
是否是很好奇,爲何會多了一步,用第三方服務器去訪問微信接口的過程呢?

若是appid和secret存在本地或者前端直接去獲取,很容易被抓包從而致使用戶信息泄露,所以,用第三方服務器去請求微信接口,能確保openID的安全性前端

相關文章
相關標籤/搜索