微信小程序登录如何实现

2021-06-09 05:38:00 前端

微信小程序登录

2021年4月12之后微信小程序使用getUserProfile替换了原来的getUserInfo接口，一些前后端的逻辑也要做相应的修改，来一起写一下最新的微信小程序登录的最佳实践吧

微信小程序登录的一些调整

通过wx.login接口获取的登录凭证可直接换取unionID，由原来需要通过wx.getUserInfo获取加密信息再去后台解密获取unionId变为通过wx.login返回的code，服务端可以直接获取到unionId，如此以来就可在不需要用户其他资料的情况下，不再调用wx.getUserInfo，接口的功能更加专注，也是一个解耦的实践。
回收wx.getUserInfo接口可获取用户个人信息能力，4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。

回收wx.getUserInfo接口可获取用户个人信息能力

前端最佳实践

最常见的问题

开始之前，想先提一下最容易遇到的两个问题：

调用wx.login后利用code去后端获取的sessionKey不能解密encryptedData，提示签名失败。这常常是由于顺序问题，要保证获取sessionKey在getUserProfile之前，否则就会出现解密失败的问题
对于第一个问题，很多同学会选择在wx.login中包裹getUserProfile，来保证获取code和获取的encryptedData顺序，从而避免解密失败，但随之而来的问题是，这时候可能会提示getUserProfile只能通过tap手势来触发[getUserProfile:fail can only be invoked by user TAP gesture]，所以这样是行不通的。

解决方案

使用Promise串行执行保证顺序。

实现

wx.getUserProfile和wx.login封装了成两个promise

wxGetUserProfile: function () {
    return new Promise((resolve, reject) => {
      wx.getUserProfile({
        lang: 'zh_CN',
        desc: '用户登录',
        success: (res) => {
          resolve(res)
          // res.encryptedData,
          // res.iv
        },
        // 失败回调
        fail: (err) => {
          reject(err)
        }
      })
    })
  },

  wxSilentLogin: function () {
    return new Promise((resolve, reject) => {
      wx.login({
        success (res) {
          resolve(res.code)
        },
        fail (err) {
          reject(err)
        }
      })
    })
  },

在wxml中绑定元素的tap事件

<view bindtap="wxLogin">微信登录</view>

在wxLogin中使用Promise.all来保证顺序性

wxLogin:function (e) {
      // 注意，一定要用这种把函数定义成变量的方式，不要直接用，否则就会出现[getUserProfile:fail can only be invoked by user TAP gesture]的错误
    let p1 = wxSilentLogin()
    let p2 = wxGetUserProfile()
    p1.then(code => {
      return code
    }).then(code => {
      return new Promise((resolve, reject) => {
        p2.then(res => {
          resolve({code, iv: res.iv, encryptedData: res.encryptedData})
        }).catch(err => {
          reject(err)
        })
      })
    }).then(res => {
            // 请求服务器
      wx.request({
        url: 'https://viencoding.com/api/v1/wx/login',
        method: 'post',
        data: {
          code: res.code,
          encrypted_data:  res.encryptedData,
          iv: res.iv
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          console.log(res.data)
        }
      })
    }).catch((err) => {
      console.log(err)
    })
}

而服务端，通过code获取sessionkey，再用sessionkey和iv去解密encryptedData就可以获取到用户信息了。

欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

微信小程序登录如何实现

微信小程序登录的一些调整

前端最佳实践

最常见的问题

解决方案

实现

猜你喜欢

评论

Eason - 3 years ago

ayue - 3 years ago

未登录

标签