22. März 2023

Integration eines QR-Code-Scanners in eine Web-Anwendung

Mit folgender JavaScript-Library lassen sich QR-Codes scannen und interpretieren – sowohl auf einem Smartphone, als auch an einem Desktop-Rechner. Das ganze passiert Client-seitig und erfordert nur ein winzig kleines JavaScript (< 60 kb). Das ist nicht nur aus technischer Sicht sehr beeindruckend.

https://github.com/nimiq/qr-scanner

Da es sehr einfach in Anwendungen integrierbar ist, eröffnet diese Library fantastische Möglichkeiten. Der große Vorteil ggü. den meisten gängigen Systemen: Es muss keine spezielle Hardware zum Scannen angeschafft werden. Ein Smartphone oder ein Rechner mit Kamera ist ausreichend um die QR-Codes auszulesen.

Mögliche Anwendungsbereiche sind z.B.:

• Ticketsysteme
• Wertgutscheine
• Mitgliedskarten
• Zeiterfassungssyteme
• digitale Bonuskarten / Treuekarten
• u.v.m.

Ein solches System könnte ich mir z.B. folgendermaßen vorstellen:

Ein Ticket-System generiert nach dem Kauf eines Tickets eine Unique-ID. Diese ID, wird in einer Datenbank, zusammen mit anderen Informationen zum Ticketkauf, und einer Status-ID gespeichert. Außerdem wird aus dieser ID ein QR-Code generiert und per Mail verschickt oder gedruckt.

Sollte jemand diesen QR-Code scannen, sieht er zwar die ID, kann aber nichts damit anfangen.

Derjenige, den Code überprüft, loggt sich in eine passwort-geschützte Web-App ein. Wird der QR-Code gescannt, wird in der Datenbank nachgeschaut, ob die ID existiert. Ist die ID vorhanden, wird eine positive Rückmeldung gegeben und die Status-ID aktualisiert. Somit ist der Code, bzw. das Ticket entwertet und kann kein zweites Mal genutzt werden.

Oder alternativ, ja nach Anwendung, wird ein Timestamp gesetzt und dem User zugeordnet – z.B. bei einer Zeiterfassungs-Anwendung. Oder die Anzahl der „gesammelten Bonuspunkte“ wird erhöht.

Eine kleine Demo habe ich hier zusammengebaut: https://www.fbnfrtg.de/tools/qr-scanner/