微信小程序非跳转式组件授权登录

更新日期: 2019-05-23阅读: 3.6k标签: 小程序

首先附上官方文档地址和授权流程,官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
流程图:


大致逻辑:授权 -> 发送code到服务器获取session_key - > 保存在小程序缓存内 -> 调用wx.getUserInfo和session_key获取用户信息 -> 登录成功返回访问token -> 记录登录状态 -> 执行登录成功监听(失败则不监听)

直接上代码,一下均为小程序组件模式有兴趣的可以看下官方文档

创建components(自定义名称)文件夹pages文件夹同级主要放置组件文件

创建 authorize (自定义名称)文件夹 还是一样的创建 对应的authorize.js ,authorize.wxml .authorize.wxss,authorize.json特别注意这里的 authorize.json 文件里面要定义当前页面为组件

{
"component": true
}

到这里准备工作完成

authorize.js 换成组件的写法,具体参考小程序官方文档,这里展示我定义的

Component({
    //组件的对外属性 说的确实很官方,用过vue组件的就很容易理解这点
    //父级向子级传值这里就是接收值得地方
  properties:{
      //名称要和父级绑定的名称相同
      //这里主要是控制自动授权弹框是否显示 true=隐藏 false=显示
    iShidden:{
      type:Boolean,//定义类型
      value: true,//定义默认值
    },
    //是否自动登录 这里主要用于没有授权是否自动弹出授权提示框 
    //**用在不自动登录页面但是某些操作需要授权登录**
    isAuto:{
      type: Boolean,
      value: true,
    },
  },
  //组件的内部数据,和 properties 一同用于组件的模板渲染
  data:{
    cloneIner:null
  },
  //组件所在页面的生命周期声明对象
  pageLifetimes:{
      //页面隐藏
      hide:function(){
      //关闭页面时销毁定时器
      if(this.data.cloneIner) clearInterval(this.data.clearInterval);
    },
    //页面打开
    show:function(){
      //打开页面销毁定时器
      if (this.data.cloneIner) clearInterval(this.data.clearInterval);
    },
  },
  //组件生命周期函数,在组件实例进入页面节点树时执行
  attached(){
      
  },
  //组件的方法 
  methods:{
  
  }
  });

注:以下的方法都需写在 methods 内


第一步:未授权用户判断是否执行授权还是直接进行获取用户信息

//检测登录状态并执行自动登录
   setAuthStatus(){
     var that = this;
     that.setErrorCount();
     wx.getSetting({
       success(res) {
       //这里会检测是否授权,如果授权了会直接调用自动登录
         if (!res.authSetting['scope.userInfo']) {
           //没有授权不会自动弹出登录框
           if (that.data.isAuto === false) return; 
           //自动弹出授权 
           that.setData({ iShidden: false });
         } else {
           //自动登录
           that.setData({ iShidden: true });
           if (app.globalData.token) {
           //这里是授权回调
             that.triggerEvent('onLoadFun', app.globalData.token);
             that.WatchIsLogin();
           } else {
             wx.showLoading({ title: '正在登录中' });
             //这里是已授权调用wx.getUserInfo
             that.getUserInfoBydecryptCode();
           }
         }
       }
     })
   }


第二步,没有授权执行打开授权弹出框

//授权
    setUserInfo(e){
      var that = this, pdata={};
      pdata.userInfo = e.detail.userInfo;
      pdata.spid = app.globalData.spid;
      wx.showLoading({ title: '正在登录中' });
      wx.login({
        success: function (res) {
          if (!res.code) return app.Tips({ title: '登录失败!' + res.errMsg});
          //获取session_key并缓存
          that.getSessionKey(res.code, function () {
            that.getUserInfoBydecryptCode();
          });
        },
        fail() {
          wx.hideLoading();
        }
      })
    },
    //从缓存中获取session_key,如果没有则请求服务器再次缓存
    getSessionKey(code,successFn,errotFn){
      var that=this;
      wx.checkSession({
        success: function (res){
          if(wx.getStorageSync('session_key'))
            successFn && successFn();
          else
            that.setCode(code, successFn, errotFn);
        },
        fail:function(){
          that.setCode(code, successFn, errotFn);
        }
      });
    },
    //访问服务器获得session_key 并存入缓存中
    setCode(code, successFn, errotFn){
      var that = this;
      app.basePost(app.U({ c: 'Login', a: 'setCode' }), { code: code }, function (res) {
        wx.setStorageSync('session_key', res.data.session_key);
        successFn && successFn(res);
      }, function (res) {
        if (errotFn) errotFn(res);
        else return app.Tips({ title: '获取session_key失败' });
      });
    }


第三步:执行getUserInfoBydecryptCode 登录获取访问权限

getUserInfoBydecryptCode: function () {
      var that = this;
      var session_key = wx.getStorageSync('session_key')
      //没有获取到session_key,打开授权页面
      //这里必须的判断存在缓存中的session_key是否存在,因为在第一步的时候,判断了
      //授权了将自动执行获取用户信息的方法
      if (!session_key) {
        wx.hideLoading();
        if(that.data.isAuto) that.setData({ iShidden: false })
        return false;
      };
      wx.getUserInfo({
        lang: 'zh_CN',
        success: function (res) {
          var pdata = res;
          pdata.userInfo = res.userInfo;
          pdata.spid = app.globalData.spid;//获取推广人ID
          pdata.code = app.globalData.code;//获取推广人分享二维码ID
          if (res.iv) {
            pdata.iv = encodeURI(res.iv);
            pdata.encryptedData = res.encryptedData;
            pdata.session_key = session_key;
            //获取用户信息生成访问token
            app.basePost(app.U({ c: 'login', a: 'index' }), { info: pdata},function(res){
              if (res.data.status == 0) return app.Tips(
                { title: '抱歉,您已被禁止登录!' }, 
                { tab: 4, url: '/pages/login-status/login-status' }
                );
              else if(res.data.status==410){
                wx.removeStorage({ key:'session_key'});
                wx.hideLoading();
                if (that.data.iShidden == true) that.setData({ iShidden: false });
                return false;
              }
              //取消登录提示
              wx.hideLoading();
              //关闭登录弹出窗口
              that.setData({ iShidden: true, ErrorCount:0});
              //保存token和记录登录状态
              app.globalData.token = res.data.token;
              app.globalData.isLog = true;
              //执行登录完成回调
              that.triggerEvent('onLoadFun', app.globalData.uid);
              //监听登录状态
              that.WatchIsLogin();
            },function(res){
              wx.hideLoading();
              return app.Tips({title:res.msg});
            });
          } else {
            wx.hideLoading();
            return app.Tips({ title: '用户信息获取失败!'});
          }
        },
        fail: function () {
          wx.hideLoading();
    that.setData({ iShidden: false });
        },
      })
    }


第四步:监听登录状态
再服务器无法获取到token时,当前页面会一直监听token是否为空,防止无限获取token设置错误次数,终止监听

监听token的用意为:token是服务器返回当前用户的访问凭证,凭证有过期的时候这时候所有的网络请求将无法访问,所以用了一个愚蠢的方法来监听token

//监听登录状态
    WatchIsLogin:function(){
      this.data.cloneIner=setInterval(function(){
        //防止死循环,超过错误次数终止监听
        if (this.getErrorCount()) return clearInterval(this.data.clearInterval);
        if (app.globalData.token == '') this.setAuthStatus();
      }.bind(this),800);
      this.setData({ cloneIner:this.data.cloneIner});
    }
 /**
     * 处理错误次数,防止死循环
     * 
    */
    setErrorCount:function(){
      if (!this.data.ErrorCount) this.data.ErrorCount=1;
      else this.data.ErrorCount++;
      this.setData({ ErrorCount: this.data.ErrorCount});
    },
    /**
     * 获取错误次数,是否终止监听
     * 
    */
    getErrorCount:function(){
      return this.data.ErrorCount >= 10  ?  true : false;
    }

以上就是组件内全部的方法需要在组件生命周期函数内调用第一步的方法检测授权,执行登录

 attached(){
    this.setAuthStatus();
  }

注:在网络请求中一定要处理token失效的操作,主要把 app.globalData.token和app.globalData.isLog 设置回空和false

这里附上没有定义的一些app内公用的快捷方法以下的方法最好是写在其他文件里面在app.js里面写一个快捷调用的方法

/*
* post网络请求 
* @param string | object 请求地址
* @param object data POST请求数组
* @param callable successCallback 成功执行方法
* @param callable errorCallback 失败执行方法
*/
const basePost = function (url, data, successCallback, errorCallback, header) {
  if (typeof url == 'object') url = U(url);
  wx.request({
    url: url,
    data: data,
    dataType  : 'json',
    method: 'POST',
    header: header,
    success: function (res) {
      try{
        if (res.data.code == 200) {
          successCallback && successCallback(res.data);
        } else {
          if (res.data.code == 402) getApp().globalData.token = '', getApp().globalData.isLog = false;
          //返回状态为401时,用户被禁止访问 关闭当前所有页面跳转至用户禁止登录页面
          if (res.data.code == 401) return Tips({ title: res.data.msg}, { tab: 4, url:'/pages/login-status/login-status'});
          errorCallback && errorCallback(res.data);
        }
      } catch (e) {
        console.log(e);
      }
    }, fail: function (res) {
      errorCallback && errorCallback(res);
    },
    complete: function (res) {

    }
  });
}
/*
* 组装URl
*@param object opt 
*/
const U = function (opt, url) {
  var m = opt.m || 'routine_two', c = opt.c || 'auth_api', a = opt.a || 'index', q = opt.q || '',
    p = opt.p || {}, params = '', gets = '';
  if (url == undefined) url=getApp().globalData.url;
  params = Object.keys(p).map(function (key) {
    return key + '/' + p[key];
  }).join('/');
  gets = Object.keys(q).map(function (key) {
    return key + '=' + q[key];
  }).join('&');
  return url + '/' + m + '/' + c + '/' + a + (params == '' ? '' : '/' + params) +'.html'+ (gets == '' ? '' : '?' + gets);
}

代码量有点多,都是能用到的,望大神们多多指点。

本小程序后台框架由 http://github.crmeb.net/u/blue 提供 ,TP5+EasyWeChat技术支持
如果对微信小程序授权不熟悉的可以用 EasyWeChat,确实好用;不是来吹这个EasyWeChat来了,只是个人觉得好用勿喷

原文来自:https://developers.weixin.qq.com/community/develop/article/doc/0004ac14894a683cf55848b4b5d813


链接: https://www.fly63.com/article/detial/3407

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序报错Do not have xx handler in current page的解决方法总汇

最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!