Механизм сканирования QR-кода whatsapp webapp

Ответ 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- При каждом обновлении QR-кода, полученном на WS, ваш браузер выполняет запрос GET для нового QR-кода в кодировке BASE64.

2.3 - Обратите внимание, что этот специфический WS, который открыт сервером между Сервером и Браузером, связан с уникальным QR-кодом!!! Итак, зная QR-код, сервер знает, с какой WS связан с ним!

---- На этом этапе ваш браузер готов сделать работу приложения WhatsApp, но он не знает, что такое ваш идентификатор (идентификатор Whatsapp, который является вашим номером мобильного телефона), потому что он не может действительно получить вам номер телефона от разреженный воздух.

Кроме того, вам не нужно вводить его, потому что сервер не будет уверен, что номер действительно принадлежит вам.

Итак, чтобы серверы знали, что сеанс WS принадлежит определенному телефону, вам нужно использовать телефон для чтения QR

3. Вы захватываете свой телефон, который аутентифицирован (иначе у вас не было бы доступа к разделу для сканирования QR-кодов), а также для чтения QR-кода.

4- Когда ваш мобильный телефон считывает QR-код, он связывается с серверами WhatsApp и сообщает им: "Мой номер равен XXXX", "Мои авторизационные кредиты" - YYYYY, а WS, связанный с этим QR-кодом, теперь может получать мои DATA

5 Теперь сервер знает, что он может направлять трафик на определенный сокет WS, принадлежащий этому QR-коду, и делает это!

6- В браузере WS вы можете видеть, как Сервер отправляет данные о пользователе, в отношении разговоров, которые у вас есть, и какие миниатюры фотографий должны выполняться и захватывать.

7- Браузер получает эти данные из WebSocket и делает соответствующие запросы GET для получения Thumbs и других ресурсов, которые ему нужны, например MP3 для уведомлений

7.1. Слушатель WS в браузере также делает Javascript-вызовы в файлах javascript, полученных на шаге 1, для перерисовки страницы DOM с помощью нового интерфейса.

8- Интерфейс теперь перерисовывается, чтобы выглядеть как приложение WhatsApp, и вы продолжаете получать данные на WS и отправляете, когда это необходимо, и обновления поступают в интерфейс по мере поступления данных на WS.

Вот и все.

Используя инструменты Chrome и Developer, вы можете увидеть все это в прямом эфире. Вы также можете увидеть WS-связь (большинство из них, бинарные фреймы, в которых вам понадобится другой инструмент) и посмотреть, что происходит на всех этапах.

также:

• Проверьте полное руководство по этому: ЗДЕСЬ

• Исходный код учебника: Клиент Android

• Исходный код учебника: Сервер Java-просмотра

Ответ 2

Он использует что-то вроде ниже.

• Веб-приложение Whatsapp открывается пользователем через веб-браузер.
• Сервер создает UNIQUE токен (число) и вставляет это число в QR-код
• Приложение телефона Whatsapp считывает QR-код и декодирует токен.
• Приложение Whatsapp phone отправляет информацию о своем текущем пользователе и этом недавно прочитанном токене на сервер whatsapp.
• Сервер Whatsapp сопоставляет токен (+ пользовательская информация о приложении телефона) с веб-браузером.
• Он автоматически аутентифицирует пользователя и открывает новую веб-страницу со своей информацией об этом.