In this tutorial, I have explained how to implement https://web.whatsapp.com QR code authentication.
If you check Web Whatsapp, you will be amazed. It works like magic !
To check the Web Whatsapp :
1). open https://web.whatsapp.com in desktop browser . It shows a QR code.
2). open whatsapp in your android/windows device. Right now, iOS is not supported
3). Scan QR code from whatsapp app.
4). Now you can chat in whatsapp web.
[demo title1=”Web Whatsapp QR code Demo” url1=”http://hayageek.com/examples/nodejs/webwhatsapp/index.php” url2=”https://github.com/hayageek/WhatsApp-Web” title2=””]
Now I am going to show how to implement Web WhatsApp like authentication.
You need below technologies / APIs
1). You need to know basics of WebSockets (JavaScript)
2). You need a QR code generator at browser. I have used http://larsjung.de/jquery-qrcode/
3). You need a Webserver supporting Web sockets.
I selected Node.js + ws package + http package.
For the demo, I used Openshift Node.js server
4). You need a QR code reader at device side.
For iPhone -> You can use AVFoundation frameowrk
For Android ->You can use zxing library.
Web Whatsapp QR code implementation.
below diagram explains how the POC works.
Step 1) Browser sends hello message to Node.js server using Websocket.
Step 2) Node.js server generates a unique identifier and sends to browser using Websocket. Then browser generates a QR code using unique identifier and shows to user.
Step 3) User login to the mobile app using Facebook authentication.
Step 4) After the successful authentication, user scans the QR code.
Step 5) After scanning, App sends Unique ID (from QR), access token (from FB) to Node.js server.
Step 6) Node.js Server sends access token to the respective browser using Websockets.
Step 7) Browser get the Facebook user information using recevied FB access token.
How to debug Websockets
In Google chrome, you can see websocket communication. Go to “Inspect Element” -> “Network” as shown in the below image.
