The login for QR authorization seem very abstract, but it is this simple. The project shall be the basic blueprint for QR authorization implementation.
Run the websocket server
cd server && npm i && npm run dev
Now your server is running at http://0.0.0.0:4000. We need to used host "0.0.0.0" to expose the port publicly in the local network so that you can use other device to scan.
** Run html5 client **
Setup completed, now the client has 3 routes.
locahost:4000/
is protected. You need to login first.
locahost:4000/scan
is also protected. You must login to scan to authorized others to login too.
locahost:4000/login
you can put any emails with password 123
Run the react client
# Get the machine ip
LOCAL_IP=$(node ip.js)
# Change the endpoint for client to connect
sed -i "s/endpoint\ =\ .*/endpoint\ =\ \"http:\/\/${LOCAL_IP}:4000\"/" client/src/contexts/Socket.jsx
# start the client
cd client && npm i && npm run dev -- --port 3000 --host "0.0.0.0" --open
Setup completed, now the client has 3 routes.
/
is protected. You need to login first.
/scan
is also protected. You must login to scan to authorized others to login too.
/login
you can put any emails with password 123
NOTE
- Your devices must be in the same local network
- Your phone camera will not work in
/scan
because it requiredhttps
to use this feature for security perposes, so use your computer webcam to scan or implement https by yourself.
- First device, go to
/login
using: example@email.com - First device, go to
/scan
- Second device, go to
/login
the open the QR tab - Second device, one authorization completed, the device with redirect it self to
/
showing JSON below.
{ "user": "example@email.com" }