whatsapp webapp二维码扫描背后的机制

Question

• 我找不到与whatsapp web-app上使用的qr代码扫描工作机制相关的任何答案。
• 当手机（任何运行whatsapp的智能手机）扫描浏览器上的qr代码时，如何进行身份验证。
• 我不想要它们背后的技术堆栈。像whatsapp使用xmpp的修改版本，使用erlang，使用socket.io和{{1}等网络技术用于Web版本来实现此类功能。
• 问题可能很广泛。但我很想知道背后的实施。

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码执行GET请求。

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

----在这个阶段你的浏览器已经准备好了WhatsApp App的工作，但它不知道你的ID是什么（Whatsapp标识符是你的手机号码），因为它无法真正获取你的电话号码稀薄的空气 。

它也不需要您输入它，因为服务器不能确定该号码真的属于您。

因此，要让服务器知道WS会话属于特定手机，您需要使用手机进行QR阅读

3-您抓住经过身份验证的手机（否则您将无法访问扫描QR码的部分），并执行QR码读取操作

4-当您的手机读取QR码时，它会联系WhatsApp服务器并告诉他们：我的号码是XXXX，我的身份证明是YYYYY，与此QR码相关联的WS现在可以接收我的数据

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

6-在浏览器WS上，您可以看到服务器发送有关用户的数据，关于您正在进行的对话以及要使用的照片缩略图和Grab。

7-浏览器从WebSocket获取此数据，并发出相应的GET请求以获取Thumbs及其所需的其他资源，如用于通知的MP3

7.1 - 浏览器上的WS侦听器还对在步骤1中收到的javascript文件进行Javascript调用，以使用新界面重绘页面DOM。

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

就是这样。

使用Chrome和开发人员工具，您可以看到所有这些现场直播。您还可以看到WS通信（大多数情况下，您需要其他工具的二进制框架），并查看所有步骤中发生的情况。

此外：

• 查看完整的教程：HERE

• 教程的源代码：Android Client

• 教程的源代码：Java Play Server

Answer 2

它使用类似下面的内容。

1. 用户通过网络浏览器打开Whatsapp网络应用程序。
2. 服务器创建一个UNIQUE标记（编号）并将该编号嵌入QR-Code
中
3. Whatsapp电话应用程序读取QR码并解码令牌。
4. Whatsapp手机应用程序将有关其当前用户和此新读取的令牌的信息发送给whatsapp服务器。
5. Whatsapp服务器使用网络浏览器匹配令牌（+电话应用用户信息）。
6. 它会自动对用户进行身份验证，并使用他/她的信息打开新的网页。