浅析微信扫码登录原理(小结)


Posted in Javascript onOctober 29, 2018

微信扫码登录原理解析

扫码登录是现在流行的登录方式,使用这种方式及其方便,而且安全

扫码登录流程

浅析微信扫码登录原理(小结)

原理

获取唯一的uuid, 以及包含uid信息的二维码

浅析微信扫码登录原理(小结)

// 获取uuid
 getUUID: function() {
  var e = t.defer();
  return window.QRLogin = {},
  $.ajax({
   url: i.API_jsLogin,
   dataType: "script"
  }).done(function() {
   200 == window.QRLogin.code ? e.resolve(window.QRLogin.uuid) : e.reject(window.QRLogin.code)
  }).fail(function() {
   e.reject()
  }),
  e.promise
 }

浏览器轮询服务器,获取扫码状态

// 查看扫码状态
checkLogin: function(e, a) {
 var n = t.defer()
  , a = a || 0;
 return window.code = 0,
 window.checkLoginPromise = $.ajax({
  url: i.API_login + "?loginicon=true&uuid=" + e + "&tip=" + a + "&r=" + ~new Date,
  dataType: "script",
  timeout: 35e3
 }).done(function() {
  new RegExp("/" + location.host + "/");
  if (window.redirect_uri && window.redirect_uri.indexOf("/" + location.host + "/") < 0)
   return void (location.href = window.redirect_uri);
  var e = {
   code: window.code,
   redirect_uri: window.redirect_uri,
   userAvatar: window.userAvatar
  };
  n.resolve(e)
 }).fail(function() {
  n.reject()
 }),
 n.promise
}

根据服务器返回的扫码状态,进行相应的操作

408 扫码超时 如果手机没有扫码或没有授权登录,服务器会阻塞约25s,然后返回状态码 408 -> 前端继续轮询

浅析微信扫码登录原理(小结)

浅析微信扫码登录原理(小结)

400 二维码失效 大约5分钟的时间内不扫码,二维码失效

浅析微信扫码登录原理(小结)

201 已扫码 如果手机已经扫码,服务器立即返回状态码和用户的基本信息 (window.code=201,window.code.userAvator="..."),-> 前端继续轮询

浅析微信扫码登录原理(小结)

200 已授权 如果手机点击了确认登录,服务器返回200及token -> 前端停止轮询, 获取到token,重定向到目标页

浅析微信扫码登录原理(小结)

// 根据服务器返回的扫码状态,进行相应的操作
function o(c) {
 switch (c.code) {
 case 200:
  t.newLoginPage(c.redirect_uri).then(function(t) {
   var o = t.match(/<ret>(.*)<\/ret>/)
    , r = t.match(/<script>(.*)<\/script>/)
    , c = t.match(/<skey>(.*)<\/skey>/)
    , s = t.match(/<wxsid>(.*)<\/wxsid>/)
    , l = t.match(/<wxuin>(.*)<\/wxuin>/)
    , d = t.match(/<pass_ticket>(.*)<\/pass_ticket>/)
    , f = t.match(/<message>(.*)<\/message>/)
    , u = t.match(/<redirecturl>(.*)<\/redirecturl>/);
   return u ? void (window.location.href = u[1]) : o && "0" != o[1] ? (alert(f && f[1] || "登陆失败"),
   i.report(i.AUTH_FAIL_COUNT, 1),
   void location.reload()) : (e.$emit("newLoginPage", {
    Ret: o && o[1],
    SKey: c && c[1],
    Sid: s && s[1],
    Uin: l && l[1],
    Passticket: d && d[1],
    Code: r
   }),
   void (a.getCookie("webwx_data_ticket") || n.report(n.ReportType.cookieError, {
    text: "webwx_data_ticket 票据丢失",
    cookie: document.cookie
   })))
  });
  break;
 case 201:
  e.isScan = !0,
  n.report(n.ReportType.timing, {
   timing: {
    scan: Date.now()
   }
  }),
  t.checkLogin(e.uuid).then(o, function(t) {
   !t && window.checkLoginPromise && (e.isBrokenNetwork = !0)
  });
  break;
 case 408:
  t.checkLogin(e.uuid).then(o, function(t) {
   !t && window.checkLoginPromise && (e.isBrokenNetwork = !0)
  });
  break;
 case 400:
 case 500:
 case 0:
  var s = a.getCookie("refreshTimes") || 0;
  s < 5 ? (s++,
  a.setCookie("refreshTimes", s, .5),
  document.location.reload()) : e.isNeedRefresh = !0;
  break;
 case 202:
  e.isScan = !1,
  e.isAssociationLogin = !1,
  a.setCookie("login_frequency", 0, 2),
  window.checkLoginPromise && (window.checkLoginPromise.abort(),
  window.checkLoginPromise = null ),
  r()
 }
 e.code = c.code,
 e.userAvatar = c.userAvatar,
 a.log("get code", c.code)
}

总结

  • 轮询采用的是JSONP的形式,排除了跨域问题
  • 轮询采用的后台根据扫码情况阻塞前台请求,优化轮询及减少前端的无效轮询

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

Javascript 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
js实现全选和全不选功能
Jul 28 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 #Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 #Javascript
vue mounted 调用两次的完美解决办法
Oct 29 #Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 #Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 #Javascript
深入浅析javascript函数中with
Oct 28 #Javascript
You might like
PHP的FTP学习(一)
2006/10/09 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
用Django写天气预报查询网站
2018/10/21 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
机械个人求职信范文
2014/01/24 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server