Mechanisme achter het scannen van QR-codes van WhatsApp web-/desktop-app

Het werkt als volgt:

1- U opent de volgende URL in uw browser: https://web.whatsapp.com/

2- De browser laadt de pagina met allerlei JS- en CSS-dingen, maar opent ook een WebSocket (wss://w4.web.whatsapp.com/ws) – Controleer deze afbeelding:

voer hier de afbeeldingsbeschrijving in

2.1- Elke 20000 milliseconden ziet u verkeer op de WebSocket voor een verversing van de QR-code die u op uw scherm heeft. Dit wordt door de Server naar de Browser gestuurd, via de WebSocket (WS noemen we het vanaf nu)

voer hier de afbeeldingsbeschrijving in

2.2- Bij elke QR-codeverversing die op de WS wordt ontvangen, doet uw browser een GET-verzoek voor de nieuwe QR-code in BASE64-codering.

2.3 – Merk op dat deze specifieke WS die de server heeft geopend tussen de Server en de Browser is gekoppeld aan de unieke QR-code !!! Dus als de server de QR-code kent, weet hij welke WS eraan is gekoppeld!

—- In dit stadium is uw browser klaar om de WhatsApp-app te laten werken, maar hij weet niet wat uw ID is (Whatsapp-identificatie die uw mobiele nummer is), omdat hij uw telefoonnummer niet echt kan ophalen ijle lucht .

Je hoeft het ook niet te typen, omdat de server niet zeker weet of het nummer echt van jou is .

Dus, om de servers te laten weten dat de WS-sessie bij een specifieke telefoon hoort, moet je de telefoon gebruiken om QR te lezen

3- U pakt uw telefoon, die is geverifieerd (anders zou u geen toegang hebben tot het gedeelte om QR-codes te scannen) en doet het QR-code lezen

4- Wanneer uw mobiel de QR-code leest, neemt deze contact op met de WhatsApp-servers en vertelt hen: Mijn nummer is XXXX, Mijn auth-creds zijn YYYYY en de WS die aan deze QR-code is gekoppeld, kan nu mijn GEGEVENS ontvangen

5- De server weet nu dat hij het verkeer naar de specifieke WS-socket kan leiden die bij die QR-code hoort, en doet dat ook!

6- In de Browser WS kun je zien dat de server gegevens verzendt over de gebruiker, over de gesprekken die je voert en welke fotominiaturen je moet gaan en pakken.

voer hier de afbeeldingsbeschrijving in

7- De browser haalt deze gegevens uit de WebSocket en doet de bijbehorende GET-verzoeken om de Thumbs en andere bronnen te krijgen die het nodig heeft, zoals een MP3 voor meldingen

7.1 – De WS-listener op de browser maakt ook Javascript-aanroepen, op de javascript-bestanden die zijn ontvangen bij stap 1, om de pagina-DOM opnieuw te tekenen met de nieuwe interface.

8- De interface wordt nu opnieuw getekend om eruit te zien als de WhatsApp-app en u blijft gegevens op de WS ontvangen en indien nodig verzenden, en er worden updates aangebracht in de interface wanneer gegevens binnenkomen op de WS.

Dat is het.

Met Chrome en ontwikkelaarstools kun je dit allemaal live zien gebeuren. Je kunt ook de WS-communicatie zien (het meeste, de binaire frames waarvoor je een ander hulpmiddel nodig hebt) en zien wat er in alle stappen gebeurt.

Ook:


Antwoord 1, autoriteit 100%

Het gebruikt zoiets als hieronder.

  1. Whatsapp-webtoepassing wordt door de gebruiker geopend via een webbrowser.
  2. Server maakt een UNIEK token (nummer) en sluit dat nummer in QR-code in
  3. Whatsapp-telefoontoepassing leest QR-code en decodeert token.
  4. Whatsapp-telefoontoepassing verzendt informatie over de huidige gebruiker en dit nieuw gelezen token naar WhatsApp-server.
  5. Whatsapp-server komt overeen met token (+ gebruikersgegevens telefoonapp) met webbrowser.
  6. Het authenticeert de gebruiker automatisch en opent een nieuwe webpagina met zijn/haar informatie erop.

Antwoord 2

er zijn twee manieren om QR-login te implementeren, zoals WhatsApp

  1. Ajax-peiling
  2. Websocket

Ik heb demo’s gemaakt in php of
beide

Opmerking: Websocket-apporach vereist 2 poorten, één voor hoofdapp en andere voor luisterende websocket-verbinding.
Http-server en websocket-server kunnen ook op dezelfde poort draaien met een of andere proxy of een andere manier.

Ik vond ook een voorbeeld in nodejs
QR-aanmelding Websocket met nodejs

Other episodes