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


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 live
May 15 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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
2006/12/14 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
PHP PDO操作总结
2014/11/17 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
python实现控制台打印的方法
2019/01/12 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
wxpython布局的实现方法
2019/11/01 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
const和static readonly区别
2013/05/20 面试题
结婚典礼证婚词
2014/01/08 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
高二政治教学反思
2014/02/01 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS