微信小程序非跳转式组件授权登录的方法示例


Posted in Javascript onMay 22, 2019

首先附上官方文档地址和授权流程

官方地址: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来了,只是个人觉得好用勿喷

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
javascript中Object使用详解
Jan 26 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
javascript for循环性能测试示例
Aug 07 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 #Javascript
JavaScript中的 new 命令
May 22 #Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 #Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
基于对象合并功能的实现示例
2017/10/10 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
Python中DJANGO简单测试实例
2015/05/11 Python
django foreignkey(外键)的实现
2019/07/29 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python基于template实现字符串替换
2020/11/27 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
垃圾桶标语
2014/06/24 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
2014年手术室工作总结
2014/11/26 职场文书
人事文员岗位职责
2015/02/04 职场文书
医院见习总结
2015/06/24 职场文书
党章学习心得体会2016
2016/01/14 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python