Wechat applet authorized login (including obtaining basic information and binding mobile number)

1、 Authorize to obtain wechat personal information

wx.getUserProfile({
    
  desc: ' Display user information ',
  success: (res) => {
    
    this.setData({
    
      nickName: res.userInfo.nickName,
      avatarUrl: res.userInfo.avatarUrl
    })
  },
  fail: res => {
    
    wx.showToast({
    
      title: ' You have refused to authorize , Please click again and authorize ',
      icon:'none'
    })
  }
})

2、 call wx.login() Get temporary login credentials code

wx.login({
    
	success: res => {
    
	   this.setData({
    
	      jsCode: res.code
	   })
  }
})

3、 use code Call the interface in exchange for the unique identification of the user openId、 The unique identification of the user under the wechat open platform account unionId And session key session_key
（1） Front end access

wx.request({
    
// Wechat developer tool check - Do not verify legal domain name 
	url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
	data:{
    },
	header:{
    
	  'content-type':'json'
	},
	success:function(res) {
    
	  console.log(res);
	}
})

Be careful ： This method will not be used in normal development , It will call wechat public platform interface through background acquisition openid, In order to protect some sensitive information, such as appid,secret The key is not compromised . The front end can be used in testing to achieve results .
（2） Call the background interface to get

getOpenId({
    jsCode:this.data.jsCode}).then(res => {
    
  if (res.data.code === 1) {
    
    this.setData({
    
       openid: res.data.data.openid,
       sessionKey: res.data.data.sessionKey,
       unionid: res.data.data.unionid
     })
  }
})

4、 Authorization to obtain mobile phone number
（1） Use button The button triggers the authorization pop-up

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> Get your phone number </button>

getPhoneNumber(e){
    
	console.log(e.detail.iv);// Initial vector of encryption algorithm 
	console.log(e.detail.encryptedData);// Encrypted data of complete user information 
	console.log(e.detail.code);// Get voucher by mobile phone number 
}

（2） Through parameters encryptedData,iv,sessionKey Or is it code,sessionKey Request backend interface , The back end decrypts and returns the user's mobile phone number
Be careful ： If you pass code To get , When testing with wechat developer tools , May not show code, This is the reason for debugging the basic library , There will be no problem in real machine debugging .
5、 Bind wechat
Just authorize and use the acquired openid,unionid,sessionKey Call back-end interface

wx.getUserProfile({
    
  desc: ' Display user information ',
  success: (res) => {
    
    let data = {
    }
    data.openid = this.data.openid
    data.unionid = this.data.unionid
    data.sessionKey = this.data.sessionKey
    miniBind(data).then(res => {
    
      if (res.data.code === 1) {
    
        wx.showToast({
    
          title: ' Authorized success !'
        }) 
      } else {
    
        wx.showToast({
    
          icon: "none",
          title: res.data.msg,
        })
      }
    })
  }
})