Post Técnico
Comunicando-se com um Leitor de Cartão de Crédito via RS-232 com o Google Chrome
Um dos aspectos mais interessantes dos leitores de cartão ID TECH é a facilidade surpreendente com que é possível se comunicar com eles. Você sabia, por exemplo, que é possível interagir com a maioria dos nossos periféricos de pagamento diretamente pelo navegador Google Chrome? Vamos explicar como fazer isso, pois é extremamente prático conseguir se comunicar com dispositivos seriais e/ou USB usando apenas JavaScript e HTML.
Neste artigo, vou me concentrar na versão RS-232 do leitor de cartão SecuRED da ID TECH, com conformidade SRED leitor de cartão SecuRED (ilustrado abaixo), que é um leitor de tarja magnética (MSR) com criptografia permanente, capaz de se comunicar via USB-HID, USB-KB ou RS-232. Em artigos futuros, abordaremos detalhadamente como conectar leitores ID TECH via USB-HID no Chrome. Por ora, vamos nos concentrar no RS-232, que é ligeiramente mais simples do que o USB, ao mesmo tempo em que ilustra muitas das técnicas que utilizaremos posteriormente para comunicações via USB-HID.
Se você está pensando "Mas meu computador nem tem uma porta RS-232", fique tranquilo. Você pode conectar um dispositivo serial ao seu computador usando um cabo adaptador serial para USB (da Prolific ou de outro fabricante). Os dados seriais continuarão aparecendo como dados seriais, mesmo que estejam chegando pela porta USB.
O navegador Chrome do Google oferece conectividade RS-232 por meio da chrome.serial.* API, mas é importante destacar que essa API não está disponível para páginas web comuns. Para utilizá-la, é necessário implementar um Chrome app e instalá-lo por meio do mecanismo de extensões do Chrome (o que não é nada difícil). Veja a seguir o que isso envolve.
Para criar um Chrome app, basta reunir meia dúzia de arquivos pequenos em uma pasta. O aplicativo completo e já desenvolvido para o exemplo de hoje (incluindo os 6 arquivos necessários) pode ser encontrado aqui:
Baixe o arquivo Zip para o seu computador e descompacte-o em uma pasta própria. Ele deve conter os seguintes arquivos:
Em instantes, explicarei como instalar o aplicativo como uma extensão do Chrome. Mas antes, vejamos rapidamente os arquivos que compõem o aplicativo.
O background.js é um arquivo de texto que contém o seguinte conteúdo:
Este arquivo informa ao Chrome que ele deve usar um arquivo chamado window.html para criar a janela principal do aplicativo (com largura de 390 pixels e altura de 438 pixels).
Os próximos dois arquivos são simplesmente pequenos ícones PNG.
O manifest.json é um arquivo de texto que contém o seguinte:
O manifesto é um arquivo importante, pois os aplicativos Chrome são executados em um ambiente de segurança exclusivo no qual, por exemplo, as permissões devem ser especificadas explicitamente com antecedência. O manifesto informa ao Chrome quais permissões são necessárias, quais ícones devem ser associados ao aplicativo e outras informações essenciais.
O script.js (que será referenciado a partir de window.html) contém todo o JavaScript que faz nosso aplicativo funcionar. Ele é composto pelo seguinte código:
Certo. Isso pode não parecer um arquivo pequeno, mas na realidade estamos falando de menos de 200 linhas de código, o que (no contexto geral) é uma quantidade bastante trivial.
Por fim, há window.html, que é o arquivo contendo a marcação HTML do nosso aplicativo (a interface do usuário). Ele é composto pela seguinte marcação:
Observe que não há JavaScript inline em nenhuma parte da página. Cem por cento da lógica do aplicativo está em um arquivo externo (o arquivo script.js ). Isso garante uma separação muito clara entre a lógica do programa e a marcação de apresentação, o que facilita significativamente a manutenção e a depuração do código.
Em vez de percorrer o código linha a linha (que é bastante autoexplicativo), vamos falar sobre como instalá-lo e executá-lo.
Abra o navegador Chrome, caso ainda não tenha feito isso, e acesse sua página chrome://extensions . No canto superior direito, localize e marque o Developer Mode checkbox. Veja abaixo.
Quando você marcar a caixa de seleção do Modo Desenvolvedor, e somente quando marcá-la, o botão Carregar extensões descompactadas… (à esquerda) será exibido. Clique nesse botão. Navegue até a pasta que contém seus 6 arquivos. Basta designá-la como pasta de destino e clicar em OK. Você retornará à página chrome://extensions e o aplicativo aparecerá na lista de extensões disponíveis. Localize o aplicativo e clique no link Iniciar associado a ele (observe com atenção na captura de tela acima). A janela principal do aplicativo será exibida:
Esta é a aparência da janela caso você já tenha um leitor de cartão SecuRED (ou outro dispositivo serial!) conectado à porta COM3. Observe que o JavaScript em script.js (conforme mencionado anteriormente) está configurado para usar "COM3" como nome de porta. Se o seu computador utilizar uma porta serial diferente, edite manualmente o código para usar o nome correto. (Você pode verificar isso em "Dispositivos e Impressoras" no Windows. No Linux, sua porta serial pode ter um nome como /dev/tty0 ou /dev/ttyUSB0 ou /dev/tty1.) E sim, esta extensão funciona no Windows, Linux, Mac OS X ou ChromeOS, desde que o Chrome esteja instalado.
Se você se conectou com êxito ao seu dispositivo serial e esse dispositivo for o leitor de cartão SecuRED da ID TECH, passe um cartão de crédito pelo slot. Os dados do cartão aparecerão automaticamente na área de texto superior da janela do aplicativo (observe os valores hexadecimais na captura de tela abaixo):
Naturalmente, saber como interpretar esses dados requer o entendimento do Formato MSR Criptografado Aprimorado da ID TECH. (Da mesma forma, descriptografaros dados exige conhecimento de DUKPT, derivação de chaves, AES e/ou TDES.) Abordaremos esse tema em uma publicação futura. Por ora, basta destacar que o Serial Test Utility permite capturar dados de cartão de crédito de forma instantânea e automática pelo Google Chrome, em qualquer plataforma onde o Google Chrome esteja disponível. Além disso, você pode utilizar as excelentes ferramentas de depuração integradas do Chrome para depurar seu código, que é escrito simplesmente em JavaScript.
Ao percorrer o código, você verá (no final do código) que, para receber dados seriais, passamos uma função de callback de recebimento para chrome.serial.onReceive.addListener(). A função receive(), por sua vez, chama uma função collect() que acumula os bytes recebidos em um buffer. O buffer é gravado (como texto) na interface do aplicativo após um WAIT_TIME de 500 milissegundos. Ou seja, quando os dados chegam ao aplicativo provenientes do leitor de cartão, um temporizador é iniciado e os dados (que chegam em pequenos lotes, com alguns milissegundos de intervalo) são acumulados em um buffer; quando o temporizador expira (após 500 ms), o buffer é descarregado na tela (e o processo de buffering é reiniciado, caso ainda haja dados chegando). Isso nos permite agrupar uma quantidade razoável de dados antes de exibi-los na tela. (Caso contrário, estaríamos potencialmente gravando muitos pacotes muito curtos na tela em intervalos de poucos milissegundos.)
As únicas outras partes do aplicativo que podem não ser imediatamente óbvias são a pequena "janela de comandos" logo acima dos botões Enviar e Limpar (veja a captura de tela acima) e o menu suspenso ("Selecione um comando e clique em Enviar"). A pequena área de texto acima do botão Enviar é um campo onde você pode inserir manualmente comandos de firmware específicos aos quais o dispositivo de destino (o SecuRED da ID TECH, neste caso) sabe como responder. O menu suspenso contém alguns comandos pré-carregados (como 02 53 11 01 33 03 71, que faz o SecuRED emitir um bipe) prontos para uso. Se você conhecer outros comandos hexadecimais (talvez porque tenha a documentação do equipamento em mãos), poderá inserir comandos para controlar ou configurar o dispositivo.
Mesmo que você não utilize o controle do menu suspenso específico para o SecuRED, o Serial Test Utility é uma ferramenta bastante útil para monitorar qualquer conexão serial pelo seu navegador Chrome. Ele exibirá todos os dados que trafegarem pela porta serial, independentemente de terem sido originados por um leitor de cartões ID TECH ou não.
Espero que você tenha gostado deste projeto. Em uma próxima publicação, veremos o que é necessário para se comunicar com um dispositivo USB-HID usando as APIs de conectividade do Chrome. Vale muito a pena saber como fazer isso!