微信小程序> 微信小程序用户登录授权处理

微信小程序用户登录授权处理

浏览量:1794 时间: 来源:还是那个zpp
登录授权流程:(2019.5.31更新)

  目前微信小程序是不支持自动获得授权页的,需要开发者设置授权按钮,并绑定自定义的登录授权方法bindGetUserInfo。登陆授权这里坑很多,网上的博客教程也良莠不齐,博主就在这儿折腾了很久。

登陆授权页wxml:

!-- 如果只是展示用户头像昵称,可以使用 open-data / 组件 --view class='avatar'  open-data type="userAvatarUrl" class="userImage"/open-data  open-data type="userNickName" class="userNickName"/open-data/viewview class="box" wx:if="{{canIUse}}"    button class='bottom' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo"        授权登录    /button/view view class="box" wx:else请升级微信版本/view

登陆授权页js:

Page({  data: {    //判断小程序的API,回调,参数,组件等是否在当前版本可用。    canIUse: wx.canIUse('button.open-type.getUserInfo'),    userInfo:''  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    wx.hideShareMenu();//禁用分享功能    var that = this;    // 查看是否授权    wx.getSetting({      success: function (res) {        console.log(res);        if (res.authSetting['scope.userInfo']) {          wx.getUserInfo({            success: function (res) {              //从数据库获取用户信息              // that.queryUsreInfo();              //用户已经授权过              wx.switchTab({                url: '/pages/index/index'              })              // wx.clearStorage()   //清理所有缓存            }          });        }      }    })  },  // 封装post请求  requestData: function (url, data0, successCallback, errorCallback) {    wx.request({      url: app.globalData.rootApi + url,   //这里将根域名存在全局数据中      data: data0,      method: "POST",      success: function (res) {        successCallback(res);      },      error: function (res) {        errorCallback(res);      },    });  },  // 封装授权登录函数  login: function (data0, successCallback, errorCallback) {    this.requestData('接口url', data0, successCallback, errorCallback);  },  //点击授权按钮的处理函数  bindGetUserInfo: function (e) {    if (e.detail.userInfo) {   //用户按了允许授权按钮      var that = this;      // 调用登录方法      wx.login({        success: res = {          //获取用户的code          const code = res.code;          // 获取用户信息          wx.getSetting({            success: res = {              if (res.authSetting['scope.userInfo']) {                // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框                wx.getUserInfo({                  success: res = {                    // console.log(res);                    //获取到用户数据,将 res 发送给后台解码出                    this.userInfo = res.userInfo;                    var nickName = res.userInfo.nickName;                    var avatarUrl = res.userInfo.avatarUrl;                    // 本地缓存存储用户名和头像                    wx.setStorageSync('nickName', nickName);                    wx.setStorageSync('avatarUrl', avatarUrl);                    var postData = {};                    postData.code = code;                    postData.nickName = nickName;                    postData.avatarUrl = avatarUrl;                    //将其他用户信息存在全局数据中                    app.globalData.userInfo = res.rawData;                    //后台服务器授权登录接口                    this.login(postData,                      (res) = {                        // 请求成功处理函数                        if (res.statusCode === 200) {//获取成功                                                    var uToken = res.data;                          // 先移除可能需要更改的storage                           wx.removeStorageSync('uToken');                          //设置本地缓存,存储服务器端返回的uToken标识                          wx.setStorage({                            key: 'uToken',                            data: uToken,                          });                          //用户已经授权过                          wx.reLaunch({                            url: '/pages/index/index'                          });                        }                        //请求失败处理函数                        else {                           wx.showModal({                            title: '温馨提示',                            content: res.errMsg                          })                        }                      }                    )                    // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回                    // 所以此处加入 callback 以防止这种情况                    if (this.userInfoReadyCallback) {                      this.userInfoReadyCallback(res)                    }                  }                })              }            }          })        }      })    } else {      //用户按了拒绝按钮      wx.showModal({        title: '警告',        content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!',        showCancel: false,        confirmText: '返回授权',        success: function (res) {          if (res.confirm) {            // console.log('用户点击了“返回授权”')          }        }      })    }  },})

注意点:

  我们登陆的流程是,小程序端将code以及需要的用户数据头像、昵称等)请求到后端接口,后台用code请求腾讯微信小程序的接口 https://api.weixin.qq.com/sns/jscode2session 获取用户的openId,同时返回给前端一个生成的uToken作为身份验证,由前端本地存储。(后台java代码略)之所以在后台请求而不是小程序端直接请求,更多的考虑到安全性,不建议小程序端直接获取到openId。

  每次用户在上传表单数据或者图片时,都要附带发送uToken作为用户的身份验证。uToken后台会设置过期时间,过期后小程序端需要清理缓存,重新登录。

  后台请求官方接口时,返回的数据中openId和错误码是一起发送的,需要分开接收,这也是坑爹点之一。最好用map接收。切记后台请求接口时需要AppId和AppSecret。

  本小程序登陆部分没有用Promise,明显感觉代码结构很差,还是可以改进的,使用箭头函数与Promise。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎