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

【问题标题】：Mechanism behind QR code scanning of WhatsApp web/desktop appWhatsApp 网页/桌面应用程序二维码扫描背后的机制
【发布时间】：2016-09-17 22:21:06
【问题描述】：

在WhatsApp Web上使用的二维码扫描工作机制我找不到任何答案。
手机（任何运行 WhatsApp 的智能手机）扫描浏览器上的二维码时如何进行身份验证。
我不想知道它们背后的技术栈。就像 WhatsApp 使用 xmpp 的修改版本，使用 erlang，使用 socket.io 和 ajax 等网络技术来实现此类功能。
这个问题可能很宽泛。但我很想知道它背后的实现。

【问题讨论】：

【解决方案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 码相关联！！！所以，知道二维码，服务器就知道是哪个WS与之关联了！

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

它也不需要你输入，因为服务器不能确定这个号码是否真的属于你。

所以，要让服务器知道 WS 会话属于特定手机，您需要使用手机进行二维码读取

3- 你拿起你的手机，它已经过身份验证（否则你将无法访问该部分以扫描二维码），然后进行二维码读取操作

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

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

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

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

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

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

就是这样。

使用 Chrome 和开发者工具，您可以实时看到这一切。您还可以查看 WS 通信（其中大部分是您需要另一个工具的二进制帧）并查看所有步骤中发生的情况。

还有：

【讨论】：

但是，您的手机也需要一直连接到互联网才能使用whatsapp web。该依赖项在哪里使用？就像你说你继续在 WS 上接收数据，但如果你断开手机，你不会在 WS 上收到任何数据。
没错。我只是认为那一点与问题无关，但这很容易。 Whatapp APP 不断向服务器发送心跳，一种保活 ping，所以如果你关闭保活 ping 停止的手机，当它停止时，服务器停止向手机和 WS 发送。 WS 可以保持活动状态，只是那里没有接收到数据。这种东西。问题是“whatsapp webapp 的 QR 码扫描背后的机制”，这是所描述的，而不是 whatapp 移动应用和网络应用的完整功能。
请您详细说明第 5 点和第 6 点关于通过 websocket 获取信息后如何对 Web 浏览器进行身份验证？谢谢。
@ĐứcThanhNguyễn 我不明白你的问题。没有什么可详细说明的。服务器创建一个 WS 和一个 QR 码。那是一个 Pair ，如果您知道 QR 码，您就知道关联的 WS。如果手机拍下二维码，然后发送到服务器：我拍了这个二维码的照片，那么你知道你应该与那个手机关联什么WS，.....因为二维码是一样的.此外，我还提供了代码和完整的教程，对此进行了更详细的解释。

【解决方案2】：

它使用类似下面的东西。

【讨论】：

例如，如果每个用户打开 web.whatsapp.com 时服务器会生成数千个令牌。由于 HTTP 是无状态的。服务器如何启动并找到与该特定用户相关联的浏览器窗口特定的令牌。
@dewnor 堆栈溢出如何区分你我。这是相似的，我们每个人都有不同的令牌。
这是真的当用户直接与浏览器交互时（表单加载 -> 用户输入凭据 -> 按下登录按钮 -> 被重定向到仪表板）。但是这里只呈现二维码，然后手机和服务器之间发生交互。一旦在服务器上进行身份验证，无需用户与浏览器进行任何交互。浏览器被重定向到仪表板。
以上评论请详细说明您的回答的第 5 点和第 6 点

【解决方案3】：

有两种方法可以像whatsapp一样实现二维码登录

我在 php 中做了演示两者都有

注意：Websocket apporach 需要 2 个端口，一个用于主应用程序，另一个用于侦听 websocket 连接。 Http server 和 websocket server 也可以通过某种代理或其他方式在同一个端口上运行。

我也在 nodejs 中找到了一个例子 QR login Websocket with nodejs

【讨论】：