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

#直接贴代码,复制可用哦。。。上干货

//app.js
App({
  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);
      }
    })
  }
})
复制代码



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值