WhatsApp 网页/桌面应用程序二维码扫描背后的机制 [英] Mechanism behind QR code scanning of WhatsApp web/desktop app

问题描述

• 我找不到与

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

  2.2- 在 WS 上接收到的每次 QR 码刷新时，您的浏览器都会对 BASE64 编码的新 QR 码执行 GET 请求.

  2.3 - 请注意，服务器在服务器和浏览器之间打开的这个特定 WS 与唯一的二维码相关联！！！所以，知道二维码，服务器就知道是哪个WS与之关联了！

  ---- 在这个阶段，您的浏览器已准备好执行 WhatsApp 应用程序的工作，但它不知道您的 ID(Whatsapp 标识符，即您的手机号码)，因为它无法真正获取您的电话号码稀薄的空气 .

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

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

  3- 拿起经过身份验证的手机(否则您将无法访问该部分以扫描 QR 码)，然后读取 QR 码

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

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

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

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

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

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

  就是这样.

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

  还有:

  • 查看完整教程:这里

  • 教程的源代码:Android 客户端

  • 教程的源代码:Java Play服务器

  • I could not find any answers related to the working mechanism of QR code scanning used on WhatsApp Web.
  • How does the authentication happen when the phone (any smartphone running WhatsApp) scans the QR code on the browser.
  • I don't want to know about the technology stack behind them. Like WhatsApp uses modified version of xmpp, uses erlang, uses web technologies like socket.io and ajax for the web version to implement such functionality.
  • The question might be broad. But I am eager to know about the implementation behind it.

  解决方案

  It works like this :

  1- You open the following URL on your browser : https://web.whatsapp.com/

  2- The Browser loads the page with all sorts of JS and CSS stuff , but also opens a WebSocket ( wss://w4.web.whatsapp.com/ws ) - Check this image :

  2.1- Every 20000 milliseconds you see traffic on the WebSocket for a refresh on the QR code you have on you screen. This is sent by the Server to the Browser, throught the WebSocket (WS we call it from now onwards)

  2.2- On each QR Code refresh received on the WS , your browser does a GET request for the new QR Code in BASE64 encode .

  2.3 - Notice that this specific WS that the server has open between the Server and the Browser is associated with the unique QR code !!! So, knowing the QR code, the server knows which WS is associated with it!

  ---- At this stage your browser is ready do the WhatsApp App work , but it does not know what is your ID (Whatsapp identifier which is your mobile number) , because it can't really get you phone number from thin air .

  It also does not require you to type it, because the server wouldn't be sure that the number really belongs to you .

  So, to let the Servers know that the WS session belongs to a specific phone, you need to use the phone for QR reading

  3- You grab your phone, which is authenticated (otherwise you wouldn't have access to the section to scan QR codes) , and do the QR Code reading thing

  4- When your mobile reads the QR code, it contacts the WhatsApp servers and tells them : My number is XXXX , My auth creds are YYYYY , and the WS associated with this QR code can now receive my DATA

  5- The server now knows that it can direct Traffic to the specific WS socket that belongs to that QR Code, and does so !

  6- On the Browser WS you can see the Server sending data regarding the user, regarding the conversations that you are having and which photo thumbnails to go and Grab.

  7- The Browser gets this data from the WebSocket , and makes the corresponding GET requests to get the Thumbs, and other resources it needs, like an MP3 for notifications

  7.1 - The WS listener on the Browser also makes Javascript calls, on the javascript files that were received at step 1 , to redraw the page DOM with the new interface .

  8- The interface is now redraw to look like the WhatsApp app , and you continue to receive data on the WS , and sending when needed, and updates are made to the interface as data is arriving on the WS .

  That is it.

  Using Chrome, and Developer tools , you can see all this happening live. You can also see the WS communication (most of it, the binary frames you would need another tool ) and see what is happening all steps of the way.

  Also:

  • Check a complete Tutorial on this : HERE

  • Source code for the Tutorial : Android Client

  • Source code for the Tutorial : Java Play Server

  这篇关于WhatsApp 网页/桌面应用程序二维码扫描背后的机制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！