微信扫码登录原理解析

超、凢脫俗 2022-06-03 10:51 265阅读 0赞

（尊重劳动成果，转载请注明出处：[http://blog.csdn.net/qq\_25827845/article/details/78823861][http_blog.csdn.net_qq_25827845_article_details_78823861]冷血之心的博客）

最近针对扫码登录机制做了一个调研，以下以微信网页扫码登录为例进行一个总结。

# 1、微信扫码登录过程： #

1.  用户在浏览器端访问网页：https://wx.qq.com/ 页面中出现一个二维码
2.  用户拿着已经登录成功的移动终端（手机）扫码该二维码
3.  浏览器中获取到了移动终端已经登录的账号信息（包括头像），并且进行了显示
4.  在手机端点击确定登录，浏览器端登录网页版微信成功，可以进行信息交互

**步骤一和步骤三中的过程显示如图所示：**

![20171217112052611][] ![20171217112106535][]

# 2、扫码登录过程解析： #

在第一小节中，给出了微信扫码登录的过程，以下详细阐述在各个过程中都发生了什么。

步骤一：当打开https://wx.qq.com/ 时，其实是浏览器与微信服务器建立了一个连接。二维码中包含一个可唯一识别的字符串，称为uuid（注意，不是uid ,user id 因为此时的二维码并没有用户的任何信息）。二维码其实是一个链接，当我们使用其它扫码工具进行解析时，可以得到类似以下这样的链接：

https://login.weixin.qq.com/l/AfZJf7-ioA==

https://login.weixin.qq.com/l/QcanFWS4hQ==

后边的就是唯一识别码uuid，其实这是一个登陆请求链接。

步骤二：当一个可以与微信服务器进行交互的（已经登录）的客户端扫码该二维码时，客户端获得了该二维码中的uuid，并且与自身的账号进行绑定。

步骤三：浏览器端获取了客户端已经登录的账号信息，并且进行显示（头像），继续等待客户端点击确认登录

步骤四：客户端点击确认登录，将uuid+账号信息发送到微信服务器，微信服务器收到之后根据uuid找到该浏览器端的访问请求页面并且给出了访问令牌Token，随后网页版微信登录成功，可以进行信息交互了。

# 3、注意点： #

**（1）polling和 long polling的区别：**

当浏览器端与服务器建立连接之后，一般有两种方式可以获取到服务器的更新信息，即polling和long polling。

polling即轮询，是指浏览器通过周期性轮询，查看服务器是否有更新的信息；

long polling指的是长轮询，浏览器与服务器建立连接之后，服务器将此连接进行挂起，但有更新信息时，再将信息发送给浏览器端。浏览器端重新建立连接，如此循环反复，这是一种长连接的方式。

**借用一个比较形象的例子：**

传统的**polling**一般是由C向S询问：“有我的信件吗？”。S接到询问之后，会立即查询，并且把查询结果告诉C，不管有没有C的信件，要么回复：“嗯，你有X封信。”，要么回复：“没，没有你的信”。

而**Long Polling**更像是这样，C向S发出询问：“有我的信件吗？”，S开始查询，如果有则回复C：“嗯，有你x封信”。如果没有，则不作任何回复，而是让C等着，自己一遍一遍地查询是否有订阅者的信。

换句话说：当S收到C的查询请求之后，Polling则只查询一次，并且把查询结果告诉C;而Long Polling收到请求之后，则会一遍一遍地查询，直到有消息才会响应C，不然一直hold Client。

**优缺点分析：**

轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。  
优点：后端程序编写比较容易。  
缺点：**请求中有大半是无用，浪费带宽和服务器资源。**  
实例：适于小型应用。

长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。  
优点：**在无消息的情况下不会频繁的请求，耗费资源小。**   
缺点：**服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。**   
实例：WebQQ、Hi网页版、Facebook IM。

**（2）扫码登录原理图：**

![Image 1][]

[http_blog.csdn.net_qq_25827845_article_details_78823861]: http://blog.csdn.net/qq_25827845/article/details/78823861
[20171217112052611]: https://img-blog.csdn.net/20171217112052611
[20171217112106535]: /images/20220603/e38f785f100d48a48742a03a06157b0f.png
[Image 1]: