WhatsApp web/桌面应用程序QR代码扫描的机制

Question

• 我找不到任何答案，有关的工作机制的QR代码扫描使用的WhatsApp网站。
• 当手机(任何运行WhatsApp的智能手机)在浏览器.上扫描QR代码时，身份验证是如何发生的？
• 我不想知道他们背后的技术栈。就像WhatsApp使用修改版的xmpp，使用erlang，使用web技术(如socket.io和ajax )来实现这样的功能。
• 这个问题可能很广泛。但我很想知道它背后的实施情况。

Answer 1

它的工作方式如下：

1-在浏览器上打开以下网址：https://web.whatsapp.com/

2-浏览器加载包含各种JS和CSS内容的页面，但也打开一个WebSocket ( wss://w4.web.whatsapp.com/ws )--检查此图像：

​

​

2.1-每20000毫秒，您就会看到WebSocket上的通信量，以刷新屏幕上的QR代码。这是由服务器发送到浏览器，通过WebSocket (WS我们称为从现在起)

​

​

2.2-在WS上收到的每一次QR代码刷新时，浏览器都会以BASE64编码方式请求新的QR代码。

2.3 -请注意，服务器在服务器和浏览器之间打开的这个特定WS与唯一的QR代码相关联！因此，服务器知道QR代码，就知道哪个WS与它关联！

它也不要求您键入它，因为服务器无法确定该号码是否真的属于您。

因此，要让服务器知道WS会话属于特定的电话，您需要使用该电话进行QR读取。

3-你拿起你的手机，这是经过认证的(否则你就无法访问扫描QR代码的部分)，并做QR代码读取的事情。

4-当您的手机读取QR代码时，它会联系WhatsApp服务器并告诉他们:我的号码是XXXX，我的auth cred是YYYYY，与这个QR代码相关联的WS现在可以接收到我的数据。

5-服务器现在知道它可以将流量定向到属于该QR代码的特定WS套接字，并这样做！

6-在浏览器WS上，您可以看到服务器发送关于用户的数据、您正在进行的会话以及要抓取的图片缩略图。

​

​

7-浏览器从WebSocket获取这些数据，并发出相应的GET请求以获取其所需的拇指和其他资源，例如用于通知的MP3。

7.1 -浏览器上的WS侦听器还对步骤1接收的Javascript文件进行javascript调用，用新接口重新绘制页面DOM。

8-界面现在被重新绘制成类似于WhatsApp应用程序，并且您继续接收WS上的数据，并在需要时发送，并且在数据到达WS时对接口进行更新。

就是这样。

使用Chrome和开发工具，您可以看到所有这些发生在现场。您还可以看到WS通信(其中大部分是您需要另一个工具的二进制框架)，并查看正在发生的所有步骤。

另外：

• 检查关于本：这里的完整教程
• 教程源代码：Android客户端
• 教程源代码：Java服务器

Answer 2

它使用的东西如下所示。

1. Whatsapp应用程序由用户通过web浏览器打开。
2. 服务器创建一个唯一的令牌(编号)，并将该数字嵌入QR-代码中。
3. Whatsapp电话应用程序读取QR代码并解码令牌。
4. Whatsapp应用程序向whatsapp服务器发送有关其当前用户和这个新读取令牌的信息。
5. Whatsapp服务器将令牌(+电话应用程序用户信息)与web浏览器匹配。
6. 它自动对用户进行身份验证，并打开新的网页，其中包含他/她的信息。

Answer 3

有两种实现QR登录的方法，比如whatsapp

1. Ajax轮询
2. Websocket

我在php中做了两个演示

• 使用Websocket的QR登录
• 使用Ajax轮询的QR登录

注意: Websocket需要2个端口，一个用于主应用程序，另一个用于侦听websocket连接。Http服务器和websocket服务器也可以使用代理或其他方式在同一个端口上运行。

我在nodejs中也找到了一个带有nodejs的QR登录Websocket示例