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


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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
通过url查找a元素并点击
Apr 09 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
JS实现读取xml内容并输出到div中的方法示例
Apr 19 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JS与C#编码解码
2013/12/03 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python ljust rjust center输出
2008/09/06 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python实现BackPropagation算法
2017/12/14 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
YUV转为jpg图像的实现
2019/12/09 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
nohup的用法
2012/11/26 面试题
医生自荐信
2013/10/11 职场文书
爱护草坪标语
2014/06/24 职场文书
体育馆的标语
2014/06/24 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
西柏坡观后感
2015/06/08 职场文书
观后感开头
2015/06/19 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python