Mit Google Chrome über RS-232 mit einem Kreditkartenleser 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 darüber sprechen, wie das funktioniert – denn es ist äußerst praktisch, mit seriellen und/oder USB-Geräten ausschließlich mithilfe von JavaScript und HTML zu kommunizieren.

In diesem Artikel konzentriere ich mich auf die RS-232-Version von ID TECH's SRED-konformem SecuRED Kartenlesegerät (unten abgebildet). Dabei handelt es sich um ein dauerverschlüsselndes Magnetstreifenlesegerät (MSR), das ü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 Hersteller) mit Ihrem Computer verbinden. Die seriellen Daten werden weiterhin wie serielle Daten aussehen, auch wenn sie über den USB-Anschluss übertragen werden.

Googles Chrome-Browser bietet RS-232-Konnektivität über die chrome.serial.* API, jedoch ist zu beachten, dass diese API für gewöhnliche Webseiten nicht verfügbar ist. Um die serielle API zu nutzen, muss eine Chrome App implementiert und über den Chrome-Erweiterungsmechanismus installiert werden (was keineswegs schwierig ist). Schauen wir uns an, was dazu erforderlich ist.

Um eine Chrome App zu erstellen, müssen lediglich ein halbes Dutzend kleine Dateien in einem Ordner abgelegt werden. Die vollständige, bereits fertig gestellte App für das heutige Beispiel (einschließlich der 6 benötigten Dateien) ist hier zu finden:

Serial-Test-Tool.zip

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

Ich werde gleich erläutern, wie die App als Chrome-Erweiterung installiert wird. Doch zunächst werfen wir einen kurzen Blick auf die Dateien, aus denen die App besteht.

Der 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.

Der 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.

Der 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 nicht wie eine kleine Datei wirken, doch in der Realität sprechen wir von weniger als 200 Codezeilen – was im Großen und Ganzen eine äußerst überschaubare Menge an Code darstellt.

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

Beachten Sie, dass sich kein eingebettetes JavaScript auf der Seite befindet. Die gesamte Programmlogik der App befindet sich in einer externen Datei (der script.js Datei). Dies sorgt für eine saubere Trennung von Programmlogik und Präsentations-Markup, was wiederum die Codewartung und das Debugging erheblich erleichtert.

Anstatt den Code Schritt für Schritt durchzugehen (der weitgehend selbsterklärend ist), erläutern wir, wie man ihn installiert und ausführt.

Starten Sie Ihren Chrome-Browser, falls noch nicht geschehen, und rufen Sie die Seite chrome://extensions auf. Suchen Sie in der oberen rechten Ecke das Kontrollkästchen „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 zu dem Ordner, der Ihre 6 kleinen Dateien enthält. Wählen Sie diesen Ordner 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 Starten -Link (achten Sie genau auf den obigen Screenshot). 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-Port angeschlossen haben. Beachten Sie, dass das JavaScript in script.js (siehe weiter oben) ist fest darauf ausgelegt, „COM3" als Portnamen zu verwenden. Falls Ihr Computer einen anderen seriellen Port nutzt, passen Sie den Code manuell an und tragen Sie den korrekten Namen ein. (Den richtigen Port ermitteln Sie unter „Geräte und Drucker" in Windows. Unter Linux kann Ihr serieller Port einen Namen wie /dev/tty0 oder der /dev/ttyUSB0 oder der /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 das SecuRED-Kartenlesegerät von ID TECH handelt, ziehen Sie eine Kreditkarte durch den Schlitz. 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. Festzuhalten bleibt, dass das Serial Test Utility es ermöglicht, Kreditkartendaten sofort und automatisch über Google Chrome auf jeder Plattform zu erfassen, auf der Chrome läuft. Und Sie können Chromes leistungsstarke integrierte Entwicklertools verwenden, um Ihren Code zu debuggen – der lediglich aus JavaScript besteht.

Wenn Sie den Code schrittweise durchgehen, werden Sie (ganz unten im Code) feststellen, dass wir zum Empfangen von seriellen Daten eine Rückruffunktion an chrome.serial.onReceive.addListener() übergeben. Die Funktion receive() ruft ihrerseits eine Funktion collect() auf, die empfangene Bytes in einem Puffer sammelt. Der Puffer wird nach einer Wartezeit (WAIT_TIME) von 500 Millisekunden als Text in der App-Oberfläche angezeigt. Das bedeutet: Sobald Daten vom Kartenlesegerät in der App eingehen, wird ein Timer gestartet, und die Daten werden – wie sie in kleinen Paketen im Abstand von wenigen Millisekunden eintreffen – im Puffer gesammelt. Nach Ablauf des Timers (500 ms) wird der Puffer auf dem Bildschirm ausgegeben (und der Puffervorgang beginnt erneut, falls noch weitere Daten eintreffen). So lässt sich eine angemessene Datenmenge bündeln, bevor sie angezeigt wird. (Andernfalls würden möglicherweise viele sehr kurze Pakete im Millisekundentakt auf dem Bildschirm ausgegeben.)

Die einzigen weiteren Teile der App, die möglicherweise nicht auf den ersten Blick verständlich sind, sind das kleine „Befehlsfenster" direkt oberhalb der Schaltflächen „Send" und „Clear" (siehe Screenshot oben) sowie das Dropdown-Menü („Select a command and hit Send"). Der kleine Textbereich über der Schaltfläche „Send" ermöglicht die manuelle Eingabe spezifischer Firmware-Befehle, auf die das Zielgerät (in diesem Fall ID TECHs SecuRED) reagieren kann. Das Dropdown-Menü enthält einige vorgeladene Befehle (wie z. B. 02 53 11 01 33 03 71, der das SecuRED einmal piepen lässt) – fertig zur Verwendung. Falls Ihnen weitere Hexadezimalbefehle bekannt sind (beispielsweise weil Sie die Gerätedokumentation zur Hand haben), können Sie Befehle eingeben, um das Gerät zu steuern oder zu konfigurieren.

Auch wenn Sie das SecuRED-spezifische Dropdown-Menü-Steuerelement nicht verwenden, ist das Serial Test Utility ein praktisches Werkzeug, um beliebige serielle Verbindungen in Ihrem Chrome-Browser zu überwachen. Es zeigt alle Daten an, die über den seriellen Port übertragen werden – unabhängig davon, ob diese 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 ein Thema, das es sich zu kennen lohnt!