WiFi QR code generator
Ever seen these QR codes displayed in public places such as restaurants, hotels, pubs, and other places where you scan it and connect to the internet instantly without sharing the WiFi credentials out load. It was all feeling of magic getting connected hassle-free. But it will not be magic anymore as I reveal how it actually works today.
To give a bit of history about the QR code(abbreviated from Quick Response code), The QR code system was invented in 1994 by Masahiro Hara from the Japanese company Denso Wave. Its purpose was to track vehicles during manufacturing; it was designed to allow high-speed component scanning.
A QR code consists of black squares arranged in a square grid on a white background, which can be read by an imaging device such as a camera, and processed using Reed–Solomon error correction until the image can be appropriately interpreted. The required data is then extracted from patterns that are present in both horizontal and vertical components of the image.
Some fields that use QR code is as follows:
- Augmented Reality: To determine the positions of objects in 3-dimensional space.
- Mobile operating systems: These devices support URL redirection, which allows QR codes to send metadata to existing applications on the device.
- Construction industry: QR Code usage in Safety Vertical of Construction industry aids in the usage of Resources, allocation of time, and usage of critical information.
- WiFi login: By specifying the SSID, encryption type, password/passphrase, and if the SSID is hidden or not, mobile device users can quickly scan and join networks without having to manually enter the data. The format of the encoded string is:
WIFI:S:<SSID>;T:<WPA|WEP|>;P:<password>;H:<true|false|>;Here we are more interested in WiFi login, when we scan the QR code this is what it comes down to when translated. For further more reading about encoding, decoding, and error correction you can read here.
After getting to know how WiFi login works, let's implement the same in our app. Recent days was learning React and thought this can be put to good use in developing this app. This is a standalone app where it doesn’t require any pre-requisites. Hence build a small UI with bootstrap, QR code, and joi npm packages. Also added responsiveness and bit of interactive features like export the QR code image, print the page.
Demo Link: https://wifi-qr-code-generator.netlify.app/
Steps in the use of the app:
- Enter the WiFi SSID name
- Enter the WiFi passphrase/password
- Select the WiFi encryption method
- Click on
Generate/Generate & Download/Generate & printbutton to generate the WiFi QR code
