Mit Google Chrome über RS-232 mit einem Kreditkartenlesegerät kommunizieren

Eines der großen Vorteile von ID TECH Kartenlesegeräten ist, wie unkompliziert die Kommunikation mit ihnen ist. Wussten Sie zum Beispiel, dass Sie mit den meisten unserer Zahlungsperipheriegeräte über Ihren Google Chrome-Webbrowser kommunizieren können? Lassen Sie uns erläutern, wie das funktioniert – denn es ist äußerst praktisch, mit seriellen und/oder USB-Geräten ausschließlich mit JavaScript und HTML zu arbeiten.

In diesem Artikel konzentriere ich mich auf die RS-232-Version von ID TECH's SRED-konformem SecuRED Kartenlesegerät (siehe Abbildung unten). Dabei handelt es sich um einen permanent verschlüsselnden Magnetstreifenleser (MSR), der über USB-HID, USB-KB oder RS-232 kommunizieren kann. In künftigen Artikeln werden wir ausführlich erläutern, wie man ID TECH Lesegeräte über USB-HID (in Chrome) verbindet. Heute konzentrieren wir uns auf RS-232, was etwas einfacher als USB ist, und veranschaulichen dabei viele der Techniken, die wir später auch für die USB-HID-Kommunikation einsetzen werden.

Falls Sie sich fragen: „Mein Computer hat doch gar keinen RS-232-Anschluss" – kein Problem. Sie können ein serielles Gerät über ein seriell-zu-USB-Adapterkabel (von Prolific oder einem anderen Anbieter) mit Ihrem Computer verbinden. Die seriellen Daten erscheinen weiterhin als serielle Daten, auch wenn sie über den USB-Anschluss übertragen werden.

Googles Chrome-Browser bietet RS-232-Konnektivität über die chrome.serial.* API– beachten Sie jedoch, dass diese API für gewöhnliche Webseiten nicht verfügbar ist. Um die serielle API zu nutzen, müssen Sie eine Chrome App implementieren und diese App über den Chrome-Erweiterungsmechanismus installieren (was gar nicht schwer ist). Schauen wir uns an, was dazu erforderlich ist.

Um eine Chrome App zu erstellen, müssen Sie lediglich ein halbes Dutzend kleine Dateien in einem Ordner ablegen. Die fertig erstellte App für das heutige Beispiel (einschließlich der 6 benötigten Dateien) finden Sie hier:

Serial-Test-Tool.zip

Laden Sie die ZIP-Datei auf Ihr lokales Laufwerk herunter und entpacken Sie sie in einen eigenen Ordner. Sie sollte die folgenden Dateien enthalten:

Ich erkläre gleich, wie Sie die App als Chrome-Erweiterung installieren . Doch zunächst werfen wir einen kurzen Blick auf die Dateien, aus denen die App besteht.

Die background.js Datei ist eine Textdatei mit folgendem Inhalt:

Diese Datei teilt Chrome mit, dass eine Datei namens window.html verwendet werden soll, um das Hauptfenster der App zu erstellen (mit einer Breite von 390 Pixeln und einer Höhe von 438 Pixeln).

Die nächsten beiden Dateien sind einfache kleine PNG-Symbole.

Die manifest.json Datei ist eine Textdatei mit folgendem Inhalt:

Das Manifest ist eine wichtige Datei, da Chrome-Apps in einer speziellen Sicherheitsumgebung ausgeführt werden, in der beispielsweise Berechtigungen explizit und im Voraus angegeben werden müssen. Das Manifest teilt Chrome mit, welche Berechtigungen benötigt werden, welche Symbole der App zugeordnet werden sollen und andere wesentliche Informationen.

Die script.js Datei (die von window.htmlreferenziert wird) enthält den gesamten JavaScript-Code, der unsere App zum Laufen bringt. Sie besteht aus folgendem Code:

Okay. Das mag zunächst nicht nach einer kleinen Datei klingen, aber in der Realität sprechen wir von weniger als 200 Codezeilen – was im Gesamtkontext tatsächlich eine recht überschaubare Menge ist.

Schließlich gibt es noch window.html, die Datei mit dem HTML-Markup unserer App (also der Benutzeroberfläche). Sie besteht aus folgendem Markup:

Beachten Sie, dass sich kein eingebettetes JavaScript auf der Seite befindet. Die gesamte Logik der App befindet sich in einer externen Datei (der script.js Datei). Dies ermöglicht eine saubere Trennung von Programmlogik und Präsentations-Markup, was die Codepflege und das Debugging erheblich erleichtert.

Anstatt den Code Schritt für Schritt durchzugehen (was recht selbsterklärend ist), sprechen wir darüber, wie er installiert und ausgeführt wird.

Öffnen Sie Ihren Chrome-Browser, falls noch nicht geschehen, und navigieren Sie zu Ihrer chrome://extensions Seite. Suchen Sie in der oberen rechten Ecke nach der Checkbox für den Entwicklermodus. Siehe unten.

Sobald Sie das Kontrollkästchen „Entwicklermodus" aktiviert haben – und nur dann –, erscheint die Schaltfläche Entpackte Erweiterungen laden… (auf der linken Seite). Klicken Sie auf diese Schaltfläche. Navigieren Sie zum Ordner, der Ihre 6 kleinen Dateien enthält. Wählen Sie diesen einfach als Zielordner aus und klicken Sie auf OK. Sie kehren zur chrome://extensions -Seite zurück, und die App erscheint in der Liste der verfügbaren Erweiterungen. Suchen Sie die App und klicken Sie auf den zugehörigen Link Starten (siehe Screenshot oben). Das Hauptfenster der App wird eingeblendet:

So sieht das Fenster aus, wenn Sie bereits ein SecuRED-Kartenlesegerät (oder ein anderes serielles Gerät!) an Ihrem COM3-Anschluss angeschlossen haben. Beachten Sie, dass das JavaScript in script.js (siehe weiter oben) ist fest kodiert, um „COM3" als Portnamen zu verwenden. Wenn Ihr Computer einen anderen seriellen Port verwendet, bearbeiten Sie den Code manuell, um den korrekten Namen einzutragen. (Sie können dies unter „Geräte und Drucker" in Windows herausfinden. Unter Linux kann Ihr serieller Port einen Namen wie /dev/tty0 oder /dev/ttyUSB0 oder /dev/tty1haben.) Und ja, diese Erweiterung funktioniert übrigens unter Windows, Linux, Mac OS X und ChromeOS – vorausgesetzt, Chrome ist installiert.

Wenn Sie erfolgreich eine Verbindung zu Ihrem seriellen Gerät hergestellt haben und es sich dabei um den SecuRED-Kartenleser von ID TECH handelt, können Sie eine Kreditkarte durch den Schlitz ziehen. Die Kartendaten erscheinen automatisch im oberen Textbereich des App-Fensters (beachten Sie die Hexadezimalwerte im Screenshot unten):

Das Parsen dieser Daten setzt natürlich ein Verständnis von ID TECHs Enhanced Encrypted MSR Format voraus. (Ebenso erfordert das Entschlüsselnder Daten Kenntnisse über DUKPT, Schlüsselableitung, AES und/oder TDES.) Darauf werden wir in einem zukünftigen Beitrag eingehen. Für den Moment genügt es festzustellen, dass das Serial Test Utility es ermöglicht, Kreditkartendaten sofort und automatisch über Google Chrome auf jeder Plattform zu erfassen, auf der Google Chrome läuft. Zudem können Sie Chromes hervorragende integrierte Debugging-Tools nutzen, um Ihren Code zu debuggen – der nichts weiter als JavaScript ist.

Wenn Sie den Code schrittweise durchgehen, werden Sie (ganz am Ende des Codes) feststellen, dass wir zum Empfang serieller Daten eine Empfangs-Callback-Funktion an chrome.serial.onReceive.addListener() übergeben. Die receive()-Funktion ruft ihrerseits eine collect()-Funktion auf, die empfangene Bytes in einem Puffer ansammelt. Der Puffer wird nach einer WAIT_TIME von 500 Millisekunden als Text in der App-Oberfläche angezeigt. Das heißt: Wenn Daten vom Kartenleser in der App eingehen, wird ein Timer gestartet, und die Daten werden – wie sie in kleinen Paketen im Abstand von wenigen Millisekunden eintreffen – in einem Puffer gesammelt. Nach Ablauf des Timers (nach 500 ms) wird der Puffer auf dem Bildschirm ausgegeben (und der Pufferungsprozess beginnt von vorne, falls noch Daten eingehen). Auf diese Weise lässt sich eine angemessene Datenmenge bündeln, bevor sie angezeigt wird. (Andernfalls würden potenziell viele sehr kurze Pakete im Abstand von wenigen Millisekunden auf dem Bildschirm ausgegeben.)

Die einzigen weiteren Bereiche der App, die möglicherweise nicht auf Anhieb selbsterklärend sind, sind das kleine „Befehlsfenster" direkt oberhalb der Schaltflächen „Senden" und „Löschen" (siehe Screenshot oben) sowie das Dropdown-Menü („Befehl auswählen und Senden drücken"). Das kleine Textfeld oberhalb der Schaltfläche „Senden" ist ein Bereich, in dem Sie manuell spezifische Firmware-Befehle eingeben können, auf die das Zielgerät (in diesem Fall ID TECH's SecuRED) reagieren kann. Das Dropdown-Menü enthält einige vorgeladene Befehle (wie 02 53 11 01 33 03 71, der den SecuRED einmal piepen lässt), die sofort einsatzbereit sind. Falls Ihnen weitere Hex-Befehle bekannt sind (beispielsweise weil Sie die Gerätedokumentation zur Hand haben), können Sie Befehle eingeben, mit denen sich das Gerät steuern oder konfigurieren lässt.

Auch wenn Sie das SecuRED-spezifische Dropdown-Menü nicht verwenden, ist das Serial Test Utility ein praktisches Werkzeug, um beliebige serielle Verbindungen über Ihren Chrome-Browser zu überwachen. Es zeigt alle Daten an, die über den seriellen Port übertragen werden – unabhängig davon, ob sie von einem ID TECH Kartenlesegerät stammen oder nicht.

Ich hoffe, dieses Projekt hat Ihnen gefallen. In einem kommenden Beitrag werden wir uns ansehen, was es braucht, um über Chromes Konnektivitäts-APIs mit einem USB-HID-Gerät zu kommunizieren. Das ist definitiv eine Fähigkeit, die sich lohnt zu erlernen!