微信小程序 授权登录 41003

作者: 一本大书 | 来源:发表于2018-09-19 11:17 被阅读16次

    最近遇到这么个坑,偶然请求己方服务器授权登录失败,百度上一堆复制黏贴的文章并不靠谱,最终在微信论坛上看到解决方案。
    网上有些是说iv内空格导致解密失败,我出错的情况下并没有出现空格,排除这种情况。
    有说是因为请求顺序,但是按照微信官方文档,似乎并不是最新的,至少我授权方式不完全跟文档一样。

    我的授权方式
    通过添加一个按钮并且设置 open-type="getUserInfo"

    <button class='wxBtn' 
            open-type="getUserInfo" 
            bindgetuserinfo="wechatAction">使用微信账号登录</button>
    

    在按钮点击事件里,会返回一些授权登录需要用到的字段如:iv、encryptedData、signature、rawData
    这个时候再调用 wx.login() 去获取code,整合以上数据向己方服务器发送请求获取用户唯一标识 token。
    通过以上的方式是可以成功登录,但是偶然会出现请求己方服务器授权登录失败,再一次就会成功。
    原因在于请求顺序,这里的请求顺序是先请求 wx.getUserInfo(按钮) 再请求 wx.login()。有时候获取code后iv已经失效,所以失败。
    解决方案:在请求 wx.login() 后,调用一次 wx.getUserInfo(废弃接口) ,更新iv等信息。注意:这里调用的废弃接口只是不再弹出授权请求窗口,但还是能够获取到 iv 等信息,授权接口弹窗已将在点击按钮的时候弹出,并且授权了,所以没毛病。
    再总结一下,正确的顺序:wx.getUserInfo(按钮) -> wx.login() -> wx.getUserInfo(废弃接口),整合以上操作获取到的最近数据 code、iv、encryptedData、signature、rawData 传给己方服务器,授权登录成功。

    以下贴上我的业务代码

      // 点击微信登录
      wechatAction: function(e) {  
        // 用户点击授权
        // 先保存获取到的微信用户信息
        const { nickName, avatarUrl } = JSON.parse(e.detail.rawData) 
        this.setData({
          nickName: nickName,
          avatarUrl: avatarUrl
        })
        // 获取微信code
        this.reqWechatCode()
      },
    
      // 微信登录:获取code
      reqWechatCode: function() {
        // 授权接口登录接口
        let that = this 
        // 从微信获取code
        wx.showLoading({
          title: '获取code',
        })
    
        wx.login({
          success: function (res) { 
            if (res.code) {
    
              wx.getUserInfo({
                success: function (res) {
                  // 保存微信登录参数
                  const { encryptedData, iv, signature, rawData } = res
                  that.setData({
                    encryptedData: encryptedData,
                    iv: iv,
                    signature: signature,
                    rawData: rawData
                  }) 
                  that.wxLoginReq(res.code)
                }
              })
    
            } else {
    
              wx.showToast({
                title: '获取code失败,请重试',
                icon: 'none'
              })
            }
            wx.hideLoading()
          }
        }) 
      },
      
      // 根据获取到的code 向服务器发送登录请求 获取token
      wxLoginReq: function (code) {
        let that = this 
    
        wx.showLoading({
          title: '获取token中',
        })
    
        // 拿到code 再加上 encryptedData, iv, rawData, signature 等参数,请求token
        let encryptedData = that.data.encryptedData
        let iv = that.data.iv
        let signature = that.data.signature
        let rawData = that.data.rawData
        var req = require('../../util/Request.js')
    
        // 请求成功
        let success = function(res) {
          // console.log(res)
          wx.hideLoading()
          // 缓存token
          const { token, user_id } = res.data.data
          let userInfo = {
            token: token,
            user_id: user_id,
            nickName: that.data.nickName,
            avatarUrl: that.data.avatarUrl
          }
          getApp().setUserInfo(userInfo)
          // 同步用户信息 
          getApp().loginSuccess(function () {
            wx.navigateBack({})
          })
        }
    
        // 请求失败
        let fail = function(res) {
          wx.hideLoading()
          wx.showToast({
            title: '获取token失败,请重试',
            icon: 'none'
          })
        } 
        // 登录请求
        req.reqLogin(code, encryptedData, iv, rawData, signature, success, fail) 
      },
    

    相关文章

      网友评论

      本文标题:微信小程序 授权登录 41003

      本文链接:https://www.haomeiwen.com/subject/azwbnftx.html