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

Question

我找不到任何与whatsapp web-app上使用的qr代码扫描工作机制相关的答案.
当手机(任何运行whatsapp的智能手机)扫描浏览器上的qr代码时,如何进行身份验证.
我不想要它们背后的技术堆栈.喜欢whatsapp使用修改版本xmpp,使用erlang,使用Web技术socket.io和ajaxWeb版本来实现这样的功能.
问题可能很广泛.但我很想知道它背后的实施.

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 App的工作,但它不知道你的ID是什么(Whatsapp标识符是你的手机号码),因为它无法真正从空中获取你的电话号码.

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

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

3-您抓住经过验证的手机(否则您将无法访问扫描QR码的部分),并执行QR码阅读

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

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

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

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

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

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

这就对了.

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

也:

那是正确的。我只是不认为那一点与问题有关，但这相当容易。Whatapp APP 不断地向服务器发送心跳，各种保活 ping，因此如果您关闭保活 ping 停止的电话，当它停止时，服务器将停止向电话和 WS 发送信号。WS 可以保持活动状态，只是在那里没有接收到数据。这种东西。问题是“whatsapp webapp QR 码扫描背后的机制”，这就是所描述的内容，而不是 whatapp 移动应用程序和网络应用程序的完整功能。 (4认同)

Answer 2

它使用类似下面的东西。