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


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中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JS分页效果示例
2013/10/11 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python实现小球弹跳效果
2019/05/10 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
pytorch实现查看当前学习率
2020/06/24 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
Android面试宝典
2013/08/06 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
毕业生自荐书
2014/02/03 职场文书
爱护公物演讲稿
2014/09/09 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书