TheFrontEnd🔥

​​#learn #tools

I've recently had a proper deep dive into all QR code related stuff.

We needed to get a "check in" system on site with really poor Internet connection. People would come and scan their QR codes from the mobile app using tablet with a simple Web app.

Turns out it's not that difficult once you get a grasp of it.

I've used react-native-qr-svg on mobile to quickly render QR codes. And react-qr-reader on the web.

Now, each user on the server gets a unique id (duh) and also what's called hmac.

The QR itself on mobile is a combination of userId-hmac-totp

The first 2 are used to check if the user is the one they claim to be (aka you can hack userId, but you won't find out their hmac unless you know the secret key), this prevents random people generating QR codes and checking in on site for their friends.

The last totp part really is just One Time Password mechanism using OTPAuth. It refreshes every 10 seconds and rerenders the QR code, similar how you'd expect authenticator apps to work, except contained within QR.

This prevents users to screenshot and share their QR codes with friends for them to check in for you.

And that's it really. You get your fairly secured QR rendering and scanning mechanism, can now use it almost anywhere: office, sites, restaurants, parking, gyms, you name it.

www.tgoop.com/thefrontend/1041

4.0K viewsJul 23, 2023 at 11:00

​​#learn #tools

I've recently had a proper deep dive into all QR code related stuff.

We needed to get a "check in" system on site with really poor Internet connection. People would come and scan their QR codes from the mobile app using tablet with a simple Web app.

Turns out it's not that difficult once you get a grasp of it.

I've used react-native-qr-svg on mobile to quickly render QR codes. And react-qr-reader on the web.

Now, each user on the server gets a unique id (duh) and also what's called hmac.

The QR itself on mobile is a combination of userId-hmac-totp

The first 2 are used to check if the user is the one they claim to be (aka you can hack userId, but you won't find out their hmac unless you know the secret key), this prevents random people generating QR codes and checking in on site for their friends.

The last totp part really is just One Time Password mechanism using OTPAuth. It refreshes every 10 seconds and rerenders the QR code, similar how you'd expect authenticator apps to work, except contained within QR.

This prevents users to screenshot and share their QR codes with friends for them to check in for you.

And that's it really. You get your fairly secured QR rendering and scanning mechanism, can now use it almost anywhere: office, sites, restaurants, parking, gyms, you name it.

BY TheFrontEnd🔥