web-dev-qa-db-ja.com

whatsapp webappのQRコードスキャンの背後にあるメカニズム

  • Whatsapp web-app で使用されるqrコードスキャンの動作メカニズムに関連する答えが見つかりませんでした。
  • 電話(whatsappを実行しているスマートフォン)がブラウザーでqrコードをスキャンすると、認証はどのように行われますか
  • Whatsappがxmppの修正バージョンを使用する、erlangを使用する、socket.ioおよびajaxは、そのような機能を実装するWebバージョン用です。
  • 質問は幅広いかもしれませんが、その背後にある実装について知りたいと思っています。
36
user6361120

それはこのように動作します :

1-ブラウザで次のURLを開きます。 https://web.whatsapp.com/

2-ブラウザーは、あらゆる種類のJSおよびCSSのものを含むページをロードしますが、WebSocket(wss://w4.web.whatsapp.com/ws)も開きます-この画像を確認してください:

enter image description here

2.1- 20000ミリ秒ごとに、画面上のQRコードを更新するためにWebSocketにトラフィックが表示されます。これは、サーバーからブラウザに送信され、WebSocketを介して送信されます(WSはこれから呼び出します)。

enter image description here

2.2- WSで受信したQRコードの更新ごとに、ブラウザはBASE64エンコードで新しいQRコードのGETリクエストを実行します。

2.3-サーバーとサーバーの間でサーバーが開いているこの特定のWSは、一意のQRコードに関連付けられていることに注意してください!!!したがって、QRコードを知っているサーバーは、どのWSがそれに関連付けられているかを知っています!

----この段階で、ブラウザはWhatsApp Appを実行する準備ができていますが、ID(Whatsapp ID、携帯電話番号)がわからないのは、電話番号を実際に取得できないためです。

また、サーバーは番号が本当にあなたのものであるかを確認できないため、入力する必要もありません。

したがって、WSセッションが特定の電話に属していることをサーバーに知らせるには、電話をQR読み取りに使用する必要があります

3-認証された携帯電話を取得し(そうでなければ、QRコードをスキャンするセクションにアクセスできません)、QRコード読み取り処理を実行します

4-モバイルがQRコードを読み取ると、WhatsAppサーバーに接続して通知します:私の番号はXXXX、私の認証情報はYYYYY、そしてこのQRコードに関連付けられたWSは私のデータを受け取ることができます

5-サーバーは、そのQRコードに属する特定のWSソケットにトラフィックを向けることができることを認識し、そうします!

6-ブラウザWSで、サーバーがユーザーに関するデータ、送信している会話に関するデータ、および移動する写真のサムネイルとグラブを確認できます。

enter image description here

7-ブラウザーはこのデータをWebSocketから取得し、対応するGET要求を作成して、Thumbs、および通知用のMP3などの必要な他のリソースを取得します

7.1-ブラウザのWSリスナーは、手順1で受信したjavascriptファイルに対して、新しいインターフェイスでページDOMを再描画するJavascript呼び出しも行います。

8-これで、インターフェイスがWhatsAppアプリのように再描画され、WSでデータを受信し続け、必要に応じて送信し、データがWSに到着するとインターフェイスが更新されます。

それだ。

Chromeとデベロッパーツールを使用すると、このすべてをライブで確認できます。また、WS通信(ほとんどの場合、別のツールが必要になるバイナリフレーム)を確認し、すべてのステップで何が起こっているかを確認できます。

また:

57
SysHex

以下のようなものを使用します。

  1. Whatsapp Webアプリケーションは、ユーザーがWebブラウザー経由で開きます。
  2. サーバーはUNIQUEトークン(番号)を作成し、その番号をQRコードに埋め込みます
  3. Whatsapp電話アプリケーションはQRコードを読み取り、トークンをデコードします。
  4. Whatsapp電話アプリケーションは、現在のユーザーとこの新しく読み取られたトークンに関する情報をwhatsappサーバーに送信します。
  5. Whatsappサーバーは、トークン(+電話アプリのユーザー情報)をWebブラウザーと照合します。
  6. 自動的にユーザーを認証し、ユーザーの情報を含む新しいWebページを開きます。
3
Atilla Ozgur