mpvue开发微信小程序用户登录功能的实现过程

资料预习：

1.一次性授权
常规写法，需要获取用户公开信息（头像，昵称等）时，判断调取授权登录接口，但是此方法如果不经处理的话用户如果拒绝授权或者删除该微信小程序后需要重新调取并获取用户公开信息（头像，昵称等），此方法用户体验较差，不建议使用；

2.永久授权
在不必要使用用户公开信息（头像，昵称等）时，不调取授权登录接口，只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库，这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息（头像，昵称等）即可，此方法在删除小程序后不用再次去授权登录（因为在用户第一次授权登录时已经把用户的公开信息存入数据库了以后直接向数据库索取即可），建议使用；

3.不授权
不需要授权登录获取用户公开信息（头像，昵称等），使用wx.login获取用户code并传入后台，后台可以通过用户的code值向微信要一个值（具体需要问后台，我只是个小前端，后台的东西不是很懂，只是知道一些逻辑而且也已经成功实现）然后通过这个用code换取的值就可以识别到指定用户，如果需要的话，前端要显示的头像、昵称等这些信息可以使用自定义可编辑的功能，当然，也可以通过小程序提供的这个组件显示用户的头像及昵称（不过这个组件只有显示功能），用户如果想直接使用自己的头像昵称，也可以自行授权（比如添加个引导按钮什么之类的），建议使用；”

我司，目前的登录处理方式是：可以使用用户名+密码登录；也可以使用手机号+手机验证码登录；还可以使用微信认证授权登录。

而我们的微信授权登录，是先获取用户的手机号，再去后台匹配，如果数据库没有手机号，就直接返回新增用户登录。

所有，我们的前端处理时，就不是获取用户的用户信息了，而是只需要获取用户的手机号就行。

具体操作：

step1:
进入登录页面，就调用wx.login拿到code后，立马去请求后台接口，换取一个authorToken, 本质是和openId关联的一个东西。

    // 调用wx.login获取code后去后台换取auhortoken保存在本地
    wxLogin () {
      wx.login({
        success (res) {
          wxloginForCode({code: res.code, appId: AppId}).then(res => {
            let {authToken} = res.data
            wx.setStorageSync('authToken', authToken)
          }).catch(err => {
            console.log(err)
          })
        },
        fail (e) {}
      })
    },

setp2:

<van-button color="#2BCAD9" round block open-type="getPhoneNumber" @getphonenumber="bindGetUserInfo" @click="getUserInfoClick" >微信授权登录</van-button>

用户点击微信授权登录，触发手机号授权。拿到手机号后，请求后台接口，去换取登录后的token、用户手机号等。（这一步，相当于用户密码登录的那一步）

扫描二维码关注公众号，回复： 11562684 查看本文章

注意：vant-bottn 是先触发click方法后，才会触发getphonenumber这个事件的。

// 授权按钮点击事件先出发，才会触发获取用户信息的绑定事件
    getUserInfoClick () {
    },
    // 获取用户的敏感信息
    bindGetUserInfo (e) {
      let that = this
      // console.log(e.mp.detail)
      // encryptedData里面保存的就是手机号的加密信息，需要传递到后台去解密。后台怎么知道是哪个用户的呢？这就需要拿第一步获取到的openId(authorToken)传递给后台的原因。后台拿到这些参数，就可以去请求微信的服务器解密出来手机号了。前端不用管。
      if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
        let { encryptedData, iv } = e.mp.detail
        let authToken = wx.getStorageSync('authToken')
        let para = {
          authToken: authToken,
          encryptedData,
          iv
        }
        wx.showLoading()
        // 这里调用的是后台服务器的api接口。登录成功后，会返回成功后的结果。具体以自己公司为准。
        that.$store.dispatch('loginByWx', para).then(() => {
          wx.hideLoading()
          // 登录成功
            wx.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 3000
            })
            // 跳转首页
            setTimeout(function () {
              wx.switchTab({
                url: '/pages/index/main'
              })
            }, 600)
        }).catch(() => {})
      } else {
        // 用户按了拒绝按钮
        wx.showToast({
          title: '微信登录需要您的授权！',
          icon: 'none',
          duration: 4000
        })
      }
    },

mpvue开发微信小程序用户登录功能的实现过程

猜你喜欢