Mécanisme derrière la numérisation de code QR de WhatsApp Webapp
- Je n'ai pas pu trouver de réponses liées au mécanisme de travail de l'analyse de code qr utilisé sur WhatsApp web-app .
- Comment l'authentification se produit-elle lorsque le téléphone (tout smartphone exécutant Whatsapp) scanne le code qr sur le navigateur.
- Je ne veux pas de la pile technologique derrière eux.Comme WhatsApp utilise une version modifiée de
xmpp, utiliseerlang, utilise des technologies Web commesocket.ioetajaxpour la version Web pour implémenter une telle fonctionnalité. - La question est peut-être large, mais j'ai hâte d'en savoir plus sur la mise en œuvre.
Cela fonctionne comme ceci:
1- Vous ouvrez l'URL suivante sur votre navigateur: https://web.whatsapp.com/
2- Le navigateur charge la page avec toutes sortes de choses JS et CSS, mais ouvre également un WebSocket (wss: //w4.web.whatsapp.com/ws) - Vérifiez cette image:
2.1- Toutes les 20000 millisecondes, vous voyez du trafic sur le WebSocket pour une actualisation du code QR que vous avez sur votre écran. Celui-ci est envoyé par le serveur au navigateur, via le WebSocket (WS nous l'appelons désormais)
2.2- A chaque rafraîchissement du QR Code reçu sur le WS, votre navigateur fait une requête GET pour le nouveau QR Code en BASE64.
2.3 - Notez que ce WS spécifique que le serveur a ouvert entre le serveur et le navigateur est associé au code QR unique !!! Ainsi, connaissant le QR code, le serveur sait quel WS lui est associé!
---- À ce stade, votre navigateur est prêt à faire le travail de l'application WhatsApp, mais il ne sait pas quel est votre identifiant (identifiant Whatsapp qui est votre numéro de téléphone mobile), car il ne peut pas vraiment vous obtenir un numéro de téléphone.
Il ne vous demande pas non plus de le taper, car le serveur ne serait pas sûr que le numéro vous appartient vraiment.
Donc, pour faire savoir aux serveurs que la session WS appartient à un téléphone spécifique, vous devez utiliser le téléphone pour la lecture QR
3- Vous saisissez votre téléphone, qui est authentifié (sinon vous n'auriez pas accès à la section pour scanner les codes QR), et faites la lecture du code QR
4- Lorsque votre mobile lit le code QR, il contacte les serveurs WhatsApp et leur dit: Mon numéro est XXXX, Mes crédits d'authentification sont YYYYY, et le WS associé à ce code QR peut maintenant recevoir mes DONNÉES
5- Le serveur sait maintenant qu'il peut diriger le trafic vers le socket WS spécifique qui appartient à ce QR Code, et il le fait!
6- Sur le WS du navigateur, vous pouvez voir le serveur envoyer des données concernant l'utilisateur, concernant les conversations que vous avez et les miniatures de photos à parcourir et à saisir.
7- Le navigateur obtient ces données du WebSocket et effectue les requêtes GET correspondantes pour obtenir les Thumbs et autres ressources dont il a besoin, comme un MP3 pour les notifications
7.1 - L'écouteur WS du navigateur effectue également des appels Javascript, sur les fichiers javascript reçus à l'étape 1, pour redessiner la page DOM avec la nouvelle interface.
8- L'interface est maintenant redessinée pour ressembler à l'application WhatsApp, et vous continuez à recevoir des données sur le WS et à les envoyer en cas de besoin, et des mises à jour sont apportées à l'interface lorsque des données arrivent sur le WS.
C'est ça.
À l'aide de Chrome et des outils de développement, vous pouvez voir tout cela en direct. Vous pouvez également voir la communication WS (la plupart, les trames binaires dont vous auriez besoin d'un autre outil) et voir ce qui se passe à toutes les étapes du processus.
Également:
Consultez un didacticiel complet à ce sujet : ICI
Code source du didacticiel : client Android
Code source du didacticiel : Java Play Server
Il utilise quelque chose comme ci-dessous.
- L'application Web Whatsapp est ouverte par l'utilisateur via un navigateur Web.
- Le serveur crée un jeton UNIQUE (numéro) et incorpore ce numéro dans le QR-Code
- L'application de téléphone Whatsapp lit le code QR et décode le jeton.
- L'application téléphonique Whatsapp envoie des informations sur son utilisateur actuel et ce jeton nouvellement lu au serveur WhatsApp.
- Le serveur Whatsapp fait correspondre le jeton (+ les informations utilisateur de l'application téléphonique) avec le navigateur Web.
- Il authentifie automatiquement l'utilisateur et ouvre une nouvelle page Web avec ses informations.