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


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 tips提示框组件实现代码
Nov 19 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
理解javascript回调函数
Dec 28 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
大学校庆邀请函
2014/01/11 职场文书
健康教育评估方案
2014/05/25 职场文书
行政处罚听证告知书
2015/07/01 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL