1 前言概述

公司对功能测试，性能测试，安全测试等等都做了比较好的自动化后，急需要一个MIS系统来统一管理这些结果及报表。

此MIS系统特点如下：

基于如上特点，显然让公司的人为这样一个内部系统而实现一个完整的账号不太现实，要兼顾隐私性和便捷性的需求，作者想到了使用微信扫码登录来做为身份认证，然后后台管理员审核，这样就可以达到如下的效果：

然后在开发完毕此系统后，觉得有必要再总结而且小升华一下，于是就有了本文的写作动机。

2 多账号原理

本来本文的目的是 “实现微信扫码登录” ，但是后来觉得仅仅是为了实现这个功能，本文的立意又显得太低。所以就在此处扩展一下为 “多账号授权登录系统” 。

在近些年来，随着互联网越来越开发和协作，目前的系统登录方式也越来越多，已经远远超越了以前的单用户名的方式了。除了用户名密码外，一般网站还提供如下的登录方式：

基于如上的几种登录方式，就形成了如下的 “多账号登录体系图”：
Web应用多账号系统设计及微信扫码登录实现
基本原理：

第三方授权
- 能够从可信第三方获取到相应的返回值（用户信息），然后和 user_id 绑定
- 不需要额外再输入密码便完成鉴权过程
- 会创建一组今后可以修改的 user_id 作为占位用户
- 鉴权成功后设置session状态
绑定账号
- 事先已经完成了 user_id 的注册
- 完成了相应账号绑定，即表示认可和 user_id 均能登录
- 使用和 user_id 同样的或者不同的密码体系（一般使用相同密码）登录完成鉴权
- 鉴权成功后设置session状态

关于 绑定账号 的方式比较简单，此处就不再赘述。

基于 第三方授权 的方式，则比较精妙，可学习性比较强，因为基于互联网越来越开放的特性，此方式肯定会越来越多的被应用，越来越成为主流。下面将以 微信扫码 授权登录为例子来进行讲解。

使用 微信扫码 授权登录的逻辑图如下：
Web应用多账号系统设计及微信扫码登录实现
其中主要处理的事情如下：

使用过微信扫码登录系统的人会有如下的过程体验（以著名社交网站知乎为例子）：

整个过程对于终端用户来说，只有短短几秒，而且不用输入任何密码，可以说是一种非常安全又便捷的体验。

那么问题来了，通过微信扫描二维码，并完成MIS系统注册登录这个短短几秒的时间里面，到底发生了哪些事情？

通过浏览器抓包，对几个关键通讯过程进行分析。
Web应用多账号系统设计及微信扫码登录实现
PC浏览器会依次发起两个长连接（比较长时处于 pending 状态）的请求：

这两个状态都会反馈到PC端的二维码页面，在手机端完成确认后，PC浏览器上面的页面就会生定向到授权后的页面（如知乎首页）。

具体各方通讯时序图如下：
Web应用多账号系统设计及微信扫码登录实现
上图对整个过程中通讯涉及的对象进行了清楚的描述，关于上图数字标注部分注解如下：

关于微信扫码认证部分的开发，本文不再赘述，只给出如**意事项：