Electron开发实战之14-webwxapi-02

源码 j相关视频

分析 微信网页版 扫码登录

一、来源于index.html的三个js文件

  1. aq_common.js: 与网络安全方面相关
  2. vendor_7ee9f11.js: 第三方依赖和库
  3. index_f5ac071.js: 重点!业务逻辑在这里面
来源于index.html的三个js文件
index.html 头
index.html 尾

二、jslogin: 请求二维码

jsloginResponse Headers 中的 Content-Typetext/javascript

Response Headers

所以在拿到 Response 返回值后,全局变量window.QRLogin的属性uuid被赋值,而这个uuid就是二维码图片的地址
jslogin 二维码

从函数栈中可以看到:首先r方法调用getUUID,再由getUUID方法向微信服务器发送 ajax请求,请求的url为"jslogin?appid=...",拿到uuid
jslogin 调用函数栈

我们看看源码,r方法做了什么?
function r

大致是r先调用t.getUUID方法返回一个Promise, then调用t.checkLogin方法,
t.checkLogin也返回一个PromisecheckLogin成功后调用o, o在下面会讲到,
现在看看 checkLogin
从函数栈中可以看到:checkLogin方法向微信服务器发送 ajax请求,请求的url为"login?loginicon=..."
login 调用函数栈

getUUID and checkLogin

三、login: 检查 code 状态

login code

四、login: 循环

下图黄色区域中我们看到,资源列表显示浏览器每间隔25秒左右就请求一次 login

login loop

为什么会这样? 我们分析一下 function o

五、o函数: 递归调用

函数o会检查参数ccode属性。

index_f5ac071.js

分析下 case 408:
当 code === 408 时,调用t.checkLogin方法,后面跟了一个then表示checkLogin是一个Promisethen方法有两个参数,第一个参数是当Promise变成接受状态时调用函数o,而 o正是function o自身,由此我们得知,这是一个递归调用,所以会出现上图中循环请求login的情况;
200201等等其它情况请大家自行参看源码。

六、总结 Login 流程

对于loginResponse返回值我们考虑下面几种情况就差不多了:

  • 当我们不做任何操作时,系统循环请求login
    window.code=408;
  • 当我们通过手机扫码后
    window.code=201;
    (当前用户有头像时返回值后面还会有 userAvatar = 'data:img/jpg;base64...';)
  • 当我们在手机上确认登录后
    window.code=200; window.redirect_uri="https://wx2.qq.com/...";
  • 当返回值为其它值时,我们刷新系统重新开始

伪代码

  • login.js

const login = {
  start () {
    // 终止外循环 code === 200
    // 内循环条件 code === 408 201
    const code = ''

    while (true) {
      if (code === '200') {
        // 终止外循环
        break
      }
      
      const uuid = jslogin()
      code = login(uuid, 1)
      
      while (true) {
        if (code !== '201' && code !== '408') {
          // 终止内循环
          break
        }
        
        code = login(uuid, 0)
      }
    }
  }
}

Login流程图

登录流程

上一节 Electron开发实战之13-webwxapi-01
目录
下一节 Electron开发实战之15-webwxapi-03

推荐阅读更多精彩内容