微信小程序> 聊聊微信小程序用户授权登录,无感知登录,强制授权~~~

聊聊微信小程序用户授权登录,无感知登录,强制授权~~~

浏览量:702 时间: 来源:weixin_34163553
#直接贴代码,复制可用哦。。。上干货

//app.jsApp({  setConfig: {            //一些配置数据    url:  '',             //配置请求地址的baseUrl    requestConfig:{       //自己封装了个request 处理一些共用的抛错toast ,requestConfig是app.request里的参数,配置些默认参数      data:{},      token:"",           //在小程序授权后,本教程基于token处理用户登录凭证      type:"POST",      callback:function(){},      failCb:function(){}    }  },  globalData: {          // 小程序推荐全局共用的数据,存在 globalData里    userInfo: null,    token:''  },  onLaunch: function () {    this.userLogin();    // 调用登录方法,处理登录  },  //登录  userLogin: function(callback){  //callback是用户授权登录后的一些回调函数    var that = this;    //获取登录code    wx.login({           // 小程序登录接口,成功后拿到code 到后台换取 openId, sessionKey, unionId      success: function (res) {        if (res.code) {          var codes = res.code;          //获取用户信息  // 因为 我们程序 要收集用户头像,昵称等,有一套用户体系          wx.getSetting({ //先调用getSetting 拿到用户已经授权的一些列表,如果已经授权 再后面代码 就无需再wx.authorize 授权            success: res => {              if (res.authSetting['scope.userInfo']) {      // 用户信息已经授权过,                // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框                callback?(that.getUserInfoHandle(codes,callback)): (that.getUserInfoHandle(codes));     //getUserInfoHandle 方法是处理用户信息,提取出来              }else{                wx.authorize({                             // 如果在那用户授权信息的时候 没有拿到,则调用wx.authorize 授权,拿用户userInfo                  scope: 'scope.userInfo',                  success: res => {                    //用户已经同意小程序授权                    callback?(that.getUserInfoHandle(codes,callback)): (that.getUserInfoHandle(codes));  //同上                  },                  fail: (e) =>{                            //如果用户点击拒绝授权,则调用wx.openSetting 调起客户端小程序设置界面,返回用户设置的操作结果。在这边做了个封装                    that.openSetting()                                       }                })              }            }          });        } else {          that.userLogin();                                 //登录失败的话 ,重新调用 登录方法          return false;        }      }    })  },  //getUserInfo  getUserInfoHandle: function (codes,callback){         // codes是wx.login 后拿到的code,callback是登录成功的回调函数    var that = this;    wx.getUserInfo({                                    // 获取用户信息      success: res => {        // 可以将 res 发送给后台解码出 unionId        that.globalData.userInfo  = res.userInfo;       // 存在全局 之后供各个page拿数据        // 所以此处加入 callback 以防止这种情况        if (that.userInfoReadyCallback) {               // userInfoReadyCallback是个回调函数 由于wx.getUserInfo 是异步的,当各个page需要userInfo信息时,先判断全局userInfo是否有信息,没有则定义个回调app.userInfoReadyCallback 自己传个回调函数,才能拿到userInfo数据          that.userInfoReadyCallback(res)        }        //用户信息入库        var url = that.setConfig.url + '/login';        // 拿到信息后 ,调用登录接口        var data = {                                    // 登录接口 需要的数据          code: codes,          encryptedData: res.encryptedData,             // 这个参数和下面那个参数  我们没有直接将用户头像,昵称传递,防止数据篡改,采用加密的方式 ,后端再解密拿到用户信息 详情请看官方文档          iv: res.iv         }        callback?that.request({url, data},callback):that.request({url, data});      //登录请求      }    })  },  //openSetting  openSetting:function(){                                   var that = this;    wx.showModal({                                    // modal 提示用户      title: '提示',      content: '小程序需要获取用户信息权限,点击确认。前往设置或退出程序?',      showCancel:false,      success: function(res) {                      wx.openSetting({                              // 调起客户端小程序设置界面          success: (res) => {            var userInfoFlag = res.authSetting['scope.userInfo'];    //拿到用户操作结果            if(!userInfoFlag){                        // 如果用户没有点开同意用户授权 ,则再调用openSetting 弹框提示,总之 同意了 才会关闭modal 进入我们小程序              that.openSetting();            }else{              that.userLogin();                       // 用户成功设置授权后,再调用登录方法 ,给到后台 拿用户信息 等操作            }          }        })      }    })  },  //数据交互  request: function (opts,loginCb){    let {url,data,token,callback,type,failCb}= {...this.setConfig.requestConfig,...opts}    var that = this;    //发起网络请求    wx.request({      url: url,      data: data,       method:type,      header: {         'content-type': 'application/x-www-form-urlencoded',        'token':token||that.globalData.token       //每次请求都带token,进行用户认证      },      success:function(res){        //根据全局做处理        var status = ''+res.statusCode;        var firstStatus = status[0];        switch (firstStatus){          case '2':          case '3':            if(res.data.err_code){              wx.hideLoading();              wx.showToast({                title: res.data.err_msg,                icon:'none',                mask: true,                duration: 1500              })              if(res.data.err_code == '1'){  //没有登陆的错误码 重新登陆                that.userLogin();              }              return false;            }            if(url.indexOf('/login')>-1){    //登陆接口 返回token,存在全局globalData中              if (res.data.result){                that.globalData.token = res.data.result.token;              }            }            callback(res);                  // 成功后大回调函数            break;          case '4':            wx.showToast({              title:'客户端错哦~',              mask:true,              icon:'none',              duration:1500            })            break;          case '5':            wx.showToast({              title:'服务端错误哦~',              mask:true,              icon:'none',              duration:1500            })                 break;           default:            break;        }      },      fail:function(e){        wx.showToast({          title:'当前网络状态不佳,请稍后再试',          mask:true,          icon:'none',          duration:1500        })        failCb&&failCb(e);      }    })  }})复制代码



小程序

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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