Article technique
Contrôlez un lecteur de carte à puce depuis votre navigateur !
Dans un article précédent, j'ai montré comment établir une connectivité USB à l'aide de NodeJS, le moteur d'exécution JavaScript très répandu. Dans un article de suivi, nous avons vu comment les Websockets peuvent être utilisés pour la communication interprocessus entre NodeJS et n'importe quel navigateur (même les navigateurs plus anciens qui ne prennent pas en charge les Websockets).
En combinant le code de connectivité USB et le code Websockets, il devient possible pour une page web de contrôler un périphérique USB (comme notre lecteur de carte trois-en-un VP3300, illustré à droite) en utilisant uniquement JavaScript. C'est ce code que je souhaite vous présenter aujourd'hui.
Si vous n'avez pas encore téléchargé les scripts de mes articles précédents, pas d'inquiétude : le script ci-dessous (environ 360 lignes de JavaScript) contient tout ce dont vous avez besoin (à l'exception de Node lui-même). Nous examinerons le code dans un instant, mais commençons par expliquer comment l'utiliser.
COMMENT UTILISER LE SCRIPT (LA MÉTHODE SIMPLE)
1. Accédez à la base de connaissances ID TECH et téléchargez l'archive node-driver.zip . (Aucune connexion requise.) REMARQUE : Il s'agit d'un téléchargement volumineux (11 mégaoctets), car il inclut Node.exe — prévoyez quelques secondes. De plus, il est réservé aux machines Windows. Placez l'archive à l'emplacement de votre choix sur votre machine locale.
2. Décompressez l'archive. Elle contient tous les scripts nécessaires. (Inutile de copier-coller le code présenté ci-dessous !)
3. Dans l'archive décompressée, repérez le fichier intitulé start.bat. Exécutez-le. (Une fenêtre de console s'ouvrira ; laissez-la ouverte.) Le pilote Node est maintenant en cours d'exécution.
4. Branchez un appareil compatible (ID TECH BTPay Mini, VP3300, UniPay III, VP8800) sur le port USB de votre machine. Le pilote Node s'y connectera automatiquement.
5. Ouvrez le fichier client.html (inclus dans l'archive) dans un navigateur web. Cliquez sur le bouton Connecter. Un message devrait confirmer qu'une connexion WebSocket a été établie sur le port 9901. Le pilote utilisera cette connexion pour communiquer avec votre périphérique USB.
UTILISATION DU SCRIPT (UTILISATEURS AVANCÉS)
Vous voyez les quelque 360 lignes de JavaScript ci-dessous ? Copiez-collez l'intégralité dans un fichier texte et enregistrez-le sous le nom, par exemple, driver.js.
Installez NodeJS sur votre machine si ce n'est pas déjà fait. Avant d'exécuter driver.js avec Node, effectuez les opérations suivantes.
Utilisez npm pour installer les modules Node suivants (disponibles sur Github, etc.) :
1. node-hid (pour la connectivité USB)
2. socket.io (pour la connectivité WebSockets)
3. socket.io-client (pour permettre aux scripts Node d'agir en tant que clients socket.io)
Exécutez maintenant driver.js (le code présenté ci-dessous) avec Node. Pour vous connecter au pilote depuis un navigateur, créez une page HTML contenant :
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.slim.js"></script>
Et aussi :
Vous devez importer le script socket.io.slim.js pour utiliser l'implémentation Websockets de socket.io. Utilisez la variable socket (var socket, ci-dessus) pour émettre des messages Websocket.
Voici le code à exécuter dans Node afin d'assurer la connectivité USB dans un navigateur, via Websockets :
La première partie de ce code contient la définition de la classe USBProvider (selon la notation ECMA 6 prise en charge par Node), dont j'ai parlé dans un article précédent. La partie centrale du code contient la définition de la classe SocketProvider, qui permet la création d'un serveur Websockets. La seconde moitié du code constitue un « code shim » reliant les deux premières parties. Elle crée une instance USBProvider et une instance SocketProvider, les initialise et communique avec chacune d'elles, de sorte que les commandes puissent être envoyées du navigateur au périphérique USB à l'aide d'une simple structure d'objet de données JSON :
Pour envoyer une commande brute à un lecteur, vous procéderez comme suit :
var cmd = "5669564f74656368320060040000f5e1";
dobj = dataObject( 'client',cmd,'raw command');
socket.emit( 'echo', dobj ); // envoyer la commande au périphérique
La cmd La chaîne affichée ci-dessus représente les octets hexadécimaux bruts de la commande « Get Terminal Settings » pour les appareils UniPay III, BTPay Mini ou VP3300 de ID TECH.
Dans le fichier client.html qui accompagne l'archive node-driver.zip mentionnée précédemment, j'ai déjà inclus une méthode appelée getTerminalSettings() qui envoie la commande ci-dessus à l'appareil connecté. Lorsque vous exécutez cette commande dans la console client.html, vous obtenez une liste détaillée des paramètres de l'appareil, comme illustré ci-dessous :
Cette capture d'écran présente certains des paramètres Terminal Settings par défaut du produit ID TECH BTPay Mini (VP3300). (REMARQUE : tous les paramètres ne sont pas affichés, car la capture d'écran n'a pas enregistré l'intégralité de la zone défilante.)
RÉSUMÉ
Récapitulons rapidement les points essentiels à retenir de cet article et des deux précédents consacrés à la connectivité USB. Nous avons notamment constaté que :
1. Grâce à NodeJS (un moteur d'exécution JavaScript open source extrêmement populaire, et à juste titre), il est possible de communiquer facilement avec n'importe quel appareil USB en JavaScript. C'est en soi remarquable !
2. Il est également aisé (en 75 lignes de code) d'utiliser Node pour créer un serveur Websocket permettant une communication interprocessus rapide, simple, robuste et sécurisée sur tout appareil prenant en charge Node.
3. Vos scripts Node peuvent transmettre sans difficulté des données USB (via Websockets) à n'importe quel navigateur compatible Websockets — c'est-à-dire tout navigateur moderne.
4. Il est ainsi tout à fait possible d'utiliser JavaScript, exécuté dans un navigateur web, pour contrôler un périphérique USB (tel qu'un lecteur de carte de crédit) connecté à votre ordinateur portable, PC, tablette ou tout autre hôte. Tout cela signifie que vous pouvez créer de puissantes applications de paiement basées sur un navigateur, capables de communiquer avec un grand nombre de lecteurs de cartes ID TECH en n'utilisant aucun autre code que JavaScript. Il n'est pas nécessaire d'écrire du code natif en C ou en C++.Vous pouvez ainsi prototyper presque n'importe quelle application de paiement très, très rapidement, avec un effort de développement minimal.
Dans de prochains articles, j'aurai beaucoup plus à dire sur la façon d'utiliser les technologies web pour créer des applications de paiement tirant parti des lecteurs ID TECH. Revenez bientôt pour en savoir plus !
En attendant, si vous souhaitez en savoir plus sur l'un des produits ID TECH Products, appelez-nous au numéro gratuit :