qr-code - WhatsApp 网页/桌面应用程序二维码扫描背后的机制

Question

• 我找不到任何与WhatsApp Web上使用的二维码扫描工作机制相关的答案。 .
• 当手机(任何运行 WhatsApp 的智能手机)扫描浏览器上的二维码时，如何进行身份验证。
• 我不想了解他们背后的技术堆栈。就像 WhatsApp 使用 xmpp 的修改版本、使用 erlang、使用 socket.io 和 ajax 等 Web 技术一样网页版来实现此类功能。
• 这个问题可能很广泛。但我很想知道它背后的实现。

Answer 1

它的工作原理如下:

1- 您在浏览器上打开以下 URL: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 应用程序工作，但它不知道您的 ID 是什么(Whatsapp 标识符，即您的手机号码)，因为它无法真正从中获取您的电话号码稀薄的空气 。

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

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

3-您拿起经过身份验证的手机(否则您将无法访问扫描二维码的部分)，然后执行二维码读取操作

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

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

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

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

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

8- 界面现在已重绘，看起来像 WhatsApp 应用程序，您可以继续在 WS 上接收数据，并在需要时发送数据，并在数据到达 WS 时对界面进行更新。

就是这样。

使用 Chrome 和开发者工具，您可以实时看到这一切。您还可以查看 WS 通信(其中大部分是二进制框架，您需要另一个工具)并查看整个过程中发生的情况。

另外:

• 查看完整的教程:HERE

• 教程源代码:Android Client

• 教程源代码:Java Play Server