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


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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JavaScript中操作字符串小结
May 04 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python的Tqdm模块的使用
2018/01/10 Python
彻底搞懂Python字符编码
2018/01/23 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Django ORM filter() 的运用详解
2020/05/14 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
linux下进程间通信的方式
2014/12/23 面试题
Shell如何接收变量输入
2016/08/06 面试题
体育系毕业生求职自荐信
2014/04/16 职场文书
企业文化演讲稿
2014/05/20 职场文书
学习型党组织心得体会
2014/09/12 职场文书
社会工作专业自荐信
2014/09/26 职场文书
招标保密承诺书
2015/01/20 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
工作证明格式范文
2015/06/15 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Java字符串逆序方法详情
2022/03/21 Java/Android