亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

微信小程序 授權登錄 41003

標簽:
WebApp

最近遇到这么个坑,偶然请求己方服务器授权登录失败,百度上一堆复制黏贴的文章并不靠谱,最终在微信论坛上看到解决方案。
网上有些是说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) 
  },



作者:一本大书
链接:https://www.jianshu.com/p/5b472740c081


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
全棧工程師
手記
粉絲
233
獲贊與收藏
1006

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消