Comunicarse con un lector de tarjetas a través de RS-232 con Google Chrome

Una de las grandes ventajas de los lectores de tarjetas de ID TECH es lo increíblemente fácil que resulta comunicarse con ellos. ¿Sabías, por ejemplo, que puedes interactuar con la mayoría de nuestros periféricos de pago desde tu navegador Google Chrome? Vamos a ver cómo hacerlo, porque resulta tremendamente práctico poder comunicarse con dispositivos serie o USB utilizando únicamente JavaScript y HTML.

Para este artículo, me centraré en la versión RS-232 del lector de ID TECH compatible con SRED, SecuRED (que aparece en la imagen siguiente), un lector de banda magnética (MSR) con cifrado permanente que puede comunicarse mediante USB-HID, USB-KB o RS-232. En próximos artículos hablaremos en detalle sobre cómo conectarse a los lectores de ID TECH a través de USB-HID (en Chrome). Hoy nos centraremos en RS-232, que resulta algo más sencillo que USB, al tiempo que ilustra muchas de las técnicas que utilizaremos más adelante para las comunicaciones USB-HID.

Si estás pensando «pero mi ordenador ni siquiera tiene un puerto RS-232», tranquilo. Puedes conectar un dispositivo serie a tu ordenador mediante un cable adaptador de serie a USB (de Prolific o de otro proveedor). Los datos serie seguirán pareciendo datos serie, aunque lleguen a través del puerto USB.

El navegador Chrome de Google ofrece conectividad RS-232 mediante la API chrome.serial.*, pero ten en cuenta que esta API no está disponible para las páginas web normales. Para utilizar la API serie, hay que implementar una aplicación de Chrome e instalarla mediante el mecanismo de extensiones de Chrome (algo que no resulta nada complicado). Veamos qué implica.

Para crear una aplicación de Chrome basta con colocar media docena de archivos pequeños en una carpeta. La aplicación completa y ya compilada para el ejemplo de hoy (incluidos los 6 archivos pequeños que necesitarás) está disponible aquí:

Serial-Test-Tool.zip

Descarga el archivo Zip a tu disco local y descomprímelo en su propia carpeta. Debería contener los siguientes archivos:

Enseguida explicaré cómo instalar la aplicación como extensión de Chrome. Pero antes, echemos un vistazo rápido a los archivos que componen la aplicación.

El background.js es un archivo de texto con el siguiente contenido:

Este archivo indica a Chrome que debe utilizar un archivo llamado window.html para crear la ventana principal de la aplicación (con un ancho de 390 píxeles y un alto de 438 píxeles).

Los dos archivos siguientes son simplemente pequeños iconos en formato PNG.

El manifest.json es un archivo de texto con el siguiente contenido:

El manifiesto es un archivo importante, ya que las aplicaciones de Chrome se ejecutan en un entorno de seguridad particular en el que (por ejemplo) los permisos deben especificarse de forma explícita y por adelantado. El manifiesto le indica a Chrome qué permisos se necesitan, qué iconos deben asociarse a la aplicación y otra información esencial.

El script.js (al que se hará referencia desde window.html) contiene todo el JavaScript que hace funcionar nuestra aplicación. Consta del siguiente código:

Bien. Puede que no parezca un archivo pequeño, pero en realidad hablamos de menos de 200 líneas de código, lo cual (en general) es una cantidad bastante reducida.

Por último, está window.html, el archivo que contiene el marcado HTML de nuestra aplicación (la interfaz de usuario). Consta del siguiente marcado:

Observa que no hay JavaScript en línea en ninguna parte de la página. El cien por cien de la lógica de la aplicación se encuentra en un archivo externo (el script.js ). Esto permite una separación muy limpia entre la lógica del programa y el marcado de presentación, lo que a su vez facilita enormemente el mantenimiento y la depuración del código.

En lugar de repasar el código (que se explica por sí solo), hablemos de cómo instalarlo y ejecutarlo.

Inicie su navegador Chrome, si aún no lo ha hecho, y diríjase a su página chrome://extensions . En la esquina superior derecha, localice y marque la casilla Modo de desarrollador. Vea más abajo.

Cuando haya marcado la casilla Modo de desarrollador, y solo entonces, aparecerá el botón Cargar extensiones descomprimidas… (a la izquierda). Haga clic en ese botón. Navegue hasta la carpeta que contiene sus 6 pequeños archivos. Simplemente designe esa como la carpeta de destino y haga clic en Aceptar. Volverá a la chrome://extensions página, y la aplicación aparecerá en la lista de extensiones disponibles. Localice la aplicación y haga clic en el enlace Iniciar asociado a ella (fíjese bien en la captura de pantalla anterior). La ventana principal de la aplicación aparecerá:

Este es el aspecto que tendrá la ventana si ya tiene un lector de tarjetas SecuRED (¡u otro dispositivo serie!) conectado a su puerto COM3. Tenga en cuenta que el código JavaScript en script.js (véase más arriba) está codificado de forma fija para usar “COM3” como nombre de puerto. Si su ordenador utiliza un puerto serie distinto, edite manualmente el código para usar el nombre correcto. (Puede averiguarlo en “Dispositivos e impresoras” de Windows. En Linux, su puerto serie puede tener un nombre como /dev/tty0 o /dev/ttyUSB0 o /dev/tty1.) Y sí, por cierto, esta extensión funcionará en Windows, en Linux, en Mac OS X o en ChromeOS, siempre que Chrome esté instalado.

Si se ha conectado correctamente a su dispositivo serie, y resulta que ese dispositivo es el lector de tarjetas SecuRED de ID TECH, pase una tarjeta de crédito por la ranura. Los datos de la tarjeta aparecerán automáticamente en el área de texto superior de la ventana de la aplicación (observe los valores hexadecimales en la captura de pantalla siguiente):

Por supuesto, saber analizar estos datos requiere comprender el formato Enhanced Encrypted MSR de ID TECH. (Del mismo modo, descifrarlos datos requiere comprender DUKPT, derivación de claves, AES y/o TDES.) Lo trataremos en una próxima entrada. Por ahora, basta con señalar que la Serial Test Utility le permite capturar datos de tarjetas de crédito al instante y de forma automática desde Google Chrome, en cualquier plataforma donde se ejecute Google Chrome. Y puede utilizar las fantásticas herramientas de depuración integradas en Chrome para depurar su código, que no es más que JavaScript.

Si recorre el código paso a paso, verá (al final del todo) que, para recibir datos serie, pasamos una función de callback de recepción a chrome.serial.onReceive.addListener(). La función receive(), a su vez, llama a una función collect() que va acumulando los bytes recibidos en un búfer. El búfer se escribe (como texto) en la interfaz de la aplicación tras un WAIT_TIME de 500 milisegundos. Es decir, cuando llegan datos a la aplicación desde el lector de tarjetas, iniciamos un temporizador y vamos acumulando los datos (a medida que llegan en pequeños lotes, con unos pocos milisegundos de diferencia) en un búfer; luego, cuando el temporizador expira (tras 500 ms), volcamos el búfer en la pantalla (y comenzamos de nuevo el proceso de almacenamiento si siguen llegando datos). Esto nos permite agrupar una cantidad razonable de datos antes de mostrarlos en pantalla. (De lo contrario, podríamos estar escribiendo en pantalla muchos paquetes muy cortos con intervalos de pocos milisegundos.)

Las únicas otras partes de la aplicación que tal vez no resulten evidentes son la pequeña “ventana de comandos” situada justo encima de los botones Send y Clear (véase la captura anterior), y el menú desplegable (“Select a command and hit Send”). El pequeño área de texto encima del botón Send es una zona donde puede introducir manualmente comandos de firmware específicos a los que el dispositivo de destino (en este caso, el SecuRED de ID TECH) sabe responder. El menú desplegable contiene algunos comandos precargados (como 02 53 11 01 33 03 71, que hace que el SecuRED emita un pitido) listos para usar. Si conoce otros comandos hexadecimales (porque, por ejemplo, tiene la documentación del equipo delante), puede introducir comandos que controlen o configuren el dispositivo.

Aunque no utilice el control desplegable específico del SecuRED, la Serial Test Utility es una herramienta práctica para inspeccionar cualquier conexión serie desde su navegador Chrome. Mostrará cualquier dato que pase por el puerto serie, provenga o no de un lector de tarjetas ID TECH.

Espero que haya disfrutado de este proyecto. En una próxima entrada veremos qué hace falta para comunicarse con un dispositivo USB-HID utilizando las APIs de conectividad de Chrome. ¡Sin duda merece la pena saber cómo se hace!