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


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 Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
js闭包学习心得总结
Apr 17 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
详解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
Yii2语言国际化自动配置详解
2018/08/22 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python 3 判断2个字典相同
2019/08/06 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
实习护士自荐信
2014/06/21 职场文书
新课培训心得体会
2014/09/03 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
python套接字socket通信
2022/04/01 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
python解析照片拍摄时间进行图片整理
2022/07/23 Python