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


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中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
Vue如何实现验证码输入交互
Dec 07 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
php+oracle 分页类
2006/10/09 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
毕业生求职的求职信
2013/12/05 职场文书
小区推广策划方案
2014/06/06 职场文书
中国合伙人观后感
2015/06/02 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
Python django中如何使用restful框架
2021/06/23 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS