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


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的message插件实现右下角弹出消息框
Jan 11 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
详解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 和 MySQL 基础教程(一)
2006/10/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php 上传功能实例代码
2010/04/13 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
phpinfo的知识点总结
2019/10/10 PHP
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
JS回调函数深入理解
2019/10/16 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python中标准模块importlib详解
2017/04/16 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
设置python3为默认python的方法
2018/10/31 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
上班早退检讨书
2014/01/09 职场文书
公司接待方案
2014/03/08 职场文书
授权收款委托书
2014/09/23 职场文书
欢迎新生标语2015
2015/07/16 职场文书
员工聘用合同范本
2015/09/21 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python