Post Técnico
Como Comunicar-se com um Leitor de Cartão de Crédito via RS-232 com o Google Chrome
Uma das grandes vantagens 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 útil 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, compatível com 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 em detalhes 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 nas 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 parecendo 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 observe com atenção: a API em questão não está disponível para páginas web comuns. Para utilizar a API serial, é 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). Vejamos o que está envolvido nesse processo.
Para criar um Chrome app, basta colocar meia dúzia de arquivos pequenos em uma pasta. O aplicativo completo e já compilado para o exemplo de hoje (incluindo os 6 arquivos necessários) pode ser encontrado aqui:
Baixe o arquivo Zip para o seu disco local e descompacte-o em sua própria pasta. Ele deve conter os seguintes arquivos:
Falarei sobre como instalar o aplicativo como uma extensão do Chrome em instantes. Mas, por ora, vamos analisar 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 dois arquivos seguintes são simplesmente ícones PNG de pequeno porte.
O manifest.json é um arquivo de texto que contém o seguinte:
O manifesto é um arquivo importante, pois os aplicativos Chrome funcionam em um ambiente de segurança exclusivo no qual, por exemplo, as permissões devem ser especificadas explicitamente e 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 responsável pelo funcionamento do nosso aplicativo. Ele é composto pelo seguinte código:
Tudo bem. Isso pode não parecer um arquivo pequeno, mas na realidade estamos falando de menos de 200 linhas de código, o que (em termos gerais) é uma quantidade bastante trivial de código.
Por fim, há window.html, que é o arquivo contendo a marcação HTML do nosso aplicativo (a interface do usuário do aplicativo). Ele consiste na 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 proporciona uma separação muito clara entre a lógica do programa e a marcação de apresentação, o que facilita enormemente a manutenção e a depuração do código.
Em vez de percorrer o código (que é bastante autoexplicativo), vamos falar sobre como instalá-lo e executá-lo.
Abra o navegador Chrome, caso ainda não o tenha feito, e acesse a página chrome://extensions . No canto superior direito, localize e marque a caixa de seleção Modo do Desenvolvedor. Veja abaixo.
Após marcar a caixa de seleção Modo de Desenvolvedor — e somente após 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 pequenos. Basta indicá-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 da 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ões 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, interpretar esses dados requer conhecimento do Formato MSR Criptografado Aprimorado da ID TECH. (Da mesma forma, descriptografaros dados exige compreensão de DUKPT, derivação de chaves, AES e/ou TDES.) Abordaremos esse tema em uma publicação futura. Por ora, basta observar que o Serial Test Utility permite capturar dados de cartões de crédito de forma instantânea e automática, a partir do Google Chrome, em qualquer plataforma onde ele seja executado. Além disso, você pode usar as excelentes ferramentas de depuração integradas do Chrome para depurar seu código, que é escrito em JavaScript.
Ao percorrer o código passo a passo, você verá (no final do código) que, para receber dados seriais, passamos uma função de callback de recepção 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 vindos do leitor de cartões, iniciamos um temporizador e acumulamos os dados (que chegam em pequenos lotes, com alguns milissegundos de intervalo) em um buffer. Quando o temporizador expira (após 500 ms), o buffer é enviado para a 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, poderíamos estar 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 é onde você pode inserir manualmente comandos de firmware específicos que o dispositivo de destino (o SecuRED da ID TECH, neste caso) sabe como processar. 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. Caso você conheça outros comandos hexadecimais (por exemplo, se tiver a documentação do dispositivo em mãos), poderá inserir comandos para controlar ou configurar o dispositivo.
Mesmo que você não utilize o controle de menu suspenso específico do SecuRED, o Serial Test Utility é uma ferramenta muito ú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 aproveitado este 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!