Wechat applet obtains user's OpenId (with front-end code)

What is OpenId?
openId is the unique identification of users in your current application, such as applet, WeChat public number and so on. These are all applications. If you have multiple applications, the openId of the same user may not be the same.

**The following figure is the official document and timing chart of wechat in the process of obtaining OpenId**

**Sequence diagram of applet login**

Train of thought:

  1. First call wx.login({}) to get the login credentials (code)
  2. Before calling the interface, you need to inform the backend of the appid and secret of the wechat applet
  3. Exchange the code for openid

Example:

App({
onLaunch: function() {
    var self = this;
    // Demonstrate local storage capabilities
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

/** Here comes the point****************
    |
    |
    |
    |
*********/
    // Sign in
    wx.login({
      success: res => {
        // Send res.code to the background to exchange for openId, sessionKey, unionId
        var Params = {
          code: res.code, //Temporary login credentials
          key: self.globalData.MD5Key
        };
        //Generate encryption key
        Params.key = self.MD5(Params.code + "&" + self.getNowTime() + "&" + Params.key);
        wx.request({
          url: 'https://testurl/api/test/GetOpenId ', / / enter the interface address of the third party here
          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 //Return to openid
            self.globalData.openid = openid;
            console.log(openid);
          }
        })
      }
    })
    /** Focus on the end
    |
    |
    |
    |
********************************/
    // Get user information
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // Authorized. You can directly call getUserInfo to get the nickname of the avatar without pop-up
          wx.getUserInfo({
            success: res => {
              // You can send res to the background to decode the unionId
              this.globalData.userInfo = res.userInfo

              // Because getUserInfo is a network request, it may be returned after Page.onLoad
              // So add callback here to prevent this
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  }
})

Are you curious about the process of using a third-party server to access wechat interface?

If the appid and secret are obtained locally or directly by the front-end, it is easy to be caught and thus lead to user information disclosure. Therefore, using a third-party server to request the wechat interface can ensure the security of openID

Tags: Javascript JSON network

Posted on Sat, 30 Nov 2019 05:01:25 -0800 by adammo