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


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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
完美的js图片轮换效果
Feb 05 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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+DBM的同学录程序(4)
2006/10/09 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python的变量与赋值详细分析
2017/11/08 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
学校少先队工作总结
2015/08/12 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
各种货币符号快捷输入
2022/02/17 杂记