2016-05-20 6 views
19
  • whatsapp web-appで使用されているqrコードスキャンの作業メカニズムに関する回答が見つかりませんでした。
  • 電話機(whatsappを実行しているスマートフォン)がブラウザのqrコードをスキャンすると、どのように認証が行われますか。 them.LikeのWhatsAppの背後にある技術スタックは、xmppの修正版を使用していますerlangを使用して、このような機能を実装するためにsocket.ioとウェブ版のajaxなどのWeb技術を使用しています。について私はしたくない
  • 質問は広いかもしれませんが、私はそれの背後にある実装について知りたいです。

答えて

2

以下のようなものが使用されます。

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

例として、各ユーザーがweb.whatsapp.comを開くときにサーバーによって何千ものトークンが生成されます.HTTPはステートレスであるため、サーバーは特定のトークンに関連付けられた特定のユーザーのブラウザウィンドウを開始します。 –

+0

@dewnorスタックオーバーフローはあなたと私を区別する方法です。これは似ていますが、それぞれ異なるトークンを持っています。 –

+0

これは本当ですユーザーがブラウザと直接対話するとき(フォームの読み込み - >ユーザーが資格情報を入力 - >ログインボタンを押す - >がダッシュボードにリダイレクトされます)。しかし、ここではQRコードだけがレンダリングされ、電話とサーバーとの間でやりとりが行われます。ユーザーはブラウザとのやりとりなしにサーバーで認証されます。ブラウザはダッシュボードにリダイレクトされます。 –

20

それはこのように動作します:あなたは、ブラウザで次のURLを開く

の1-:https://web.whatsapp.com/

2 - ブラウザはJSとCSSのもののすべての種類にページをロードするだけでなく、開きましたWebSocketの(WSS://w4.web.whatsapp.com/ws) - このイメージを確認してください:あなたは、ARのためのWebSocket上のトラフィックを参照してください

enter image description here

2.1-をすべて20000ミリ秒あなたの画面上にあるQRコードにefreshを入力します。これは、(WS我々は今以降からそれを呼び出す)

enter image description hereリフレッシュWS上で受信した各QRコードに

2.2- WebSocketをthrought、ブラウザにサーバーによって送信され、お使いのブラウザはのためのGETリクエストを行いますBASE64の新しいQRコードがエンコードされます。

2.3 - サーバーとブラウザの間で開いているこの特定のWSは、固有のQRコードに関連付けられていることに注意してください。 QRコードを知っているので、サーバーはそれに関連付けられているWSを知っています!

----この段階では、WhatsApp Appの作業は可能ですが、実際に電話番号を取得できないため、あなたのID(Whatsapp識別子はあなたの携帯電話番号です)がわかりません。薄い空気から。

また、サーバーが実際にあなたのものであると確信しないので、入力する必要はありません。

ので、サーバーがWSセッションは、特定の携帯電話に属していることを知らせるために、あなたは

3-読んQRために携帯電話を使用する必要があります(認証され、お使いの携帯電話をつかむそうでない場合は、あなたではないだろう 4携帯電話でQRコードが読み取られると、WhatsAppサーバーに接続して、自分の番号がXXXXであることを伝えます。私の認証情報は以下のとおりです。 YYYYYであり、このQRコードに関連付けられたWSは今すぐ自分のデータを受け取ることができます

5サーバーはTそのQRコードに属する特定のWSソケットにrafficを送信してください。

6-ブラウザWSで、あなたが持っている会話とどの写真のサムネイルを移動してグラブするのかに関する、ユーザーに関するデータを送信しているサーバーを見ることができます。

enter image description here

7ブラウザがWebSocketのからこのデータを取得し、対応するGET要求が親指を取得することができ、および通知

7.1 MP3のようなことが必要他のリソース、 - WSブラウザ上のリスナーは、ステップ1で受け取ったjavascriptファイル上でJavascript呼び出しを行い、新しいインターフェースでページDOMを再描画します。

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

それです。

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

  • このに関する完全なチュートリアルをチェックしてください:HERE

  • チュートリアルのソース・コード:チュートリアルためAndroid Client

  • ソースコードを: Java Play Server