ID TECH
すべての技術記事

技術記事

Google Chrome を使って RS-232 経由でクレジットカードリーダーと通信する

ID TECH のカードリーダーの優れた点のひとつは、通信が驚くほど簡単であることです。たとえば、当社の決済周辺機器のほとんどに、Google Chrome ブラウザから通信できることをご存じでしたか?JavaScript と HTML だけでシリアルデバイスや USB デバイスと通信できるのは非常に便利なので、その方法について解説していきます。

本記事では、ID TECH の SRED 対応である RS-232 版に焦点を当てます。 SecuRED カードリーダー (下図参照)は、常時暗号化対応の磁気スワイプリーダー(MSR)で、USB-HID、USB-KB、または RS-232 で通信できます。今後の記事では、USB-HID 経由で(Chrome から)ID TECH リーダーに接続する方法について詳しく解説します。今回は、USB よりも若干扱いやすい RS-232 に焦点を当てつつ、後で USB-HID 通信に使用する手法の多くも併せて紹介します。

「でも自分のパソコンには そもそも RS-232 ポートがない」と言う方、ご安心ください。シリアル-USB 変換ケーブル(Prolific 社製などのもの)を使えば、シリアルデバイスをパソコンに接続できます。USB ポート経由でも、シリアルデータは依然としてシリアルデータとして 扱われ ます。

Google の Chrome ブラウザは、以下を通じて RS-232 接続を提供しています。 chrome.serial.* APIただし、注意が必要なのは、この API は通常の Web ページからは利用できないという点です。シリアル API を使うには、 Chrome アプリ を実装し、Chrome 拡張機能の仕組みを使ってインストールする必要があります(決して難しい作業ではありません)。具体的な内容を見ていきましょう。

Chrome アプリを作成するには、フォルダにいくつかの小さなファイルを置くだけで済みます。今回のサンプルとして、既に構築済みのアプリ一式(必要な6つの小さなファイルを含む)を以下からダウンロードできます。

Serial-Test-Tool.zip

Zip ファイルをローカルドライブにダウンロードし、専用フォルダに展開してください。以下のファイルが含まれているはずです:

アプリを Chrome 拡張機能として インストール する方法については後ほど説明します。まずは、アプリを構成するファイルを簡単に見ていきましょう。

本製品は background.js ファイルは、以下のテキストを含むテキストファイルです:

このファイルは Chrome に、 window.html というファイルを使ってアプリのメインウィンドウ(幅 390 ピクセル、高さ 438 ピクセル)を作成するよう指示するものです。

次の2つのファイルは、単なる小さな PNG アイコンです。

本製品は manifest.json ファイルは、以下の内容を含むテキストファイルです:

マニフェストは重要なファイルです。Chrome アプリは独特なセキュリティ環境で動作するため、たとえば必要な権限を事前に明示的に指定する必要があるからです。マニフェストは、必要な権限、アプリに関連付けるアイコン、その他の重要な情報を Chrome に伝えます。

本製品は script.js ファイル(次のファイルから参照されます) window.htmlには、アプリを機能させる JavaScript がすべて含まれています。コードの内容は以下のとおりです:

さて、これは小さなファイルには 見えない かもしれませんが、実際には 200 行にも満たないコードであり、全体としては非常に少ない量のコードです。

最後に、 window.htmlというファイルがあり、これはアプリの HTML マークアップ(ユーザーインターフェイス)を含むファイルです。内容は以下のとおりです:

ページ内のどこにもインラインの JavaScript が含まれていない点に注目してください。アプリのロジックは 100% 外部ファイル( script.js ファイル)。これにより、プログラムロジックとプレゼンテーションマークアップを非常に明確に分離でき、コードの保守やデバッグが大幅に容易になります。

コードを一行ずつ解説する(内容はかなり自明です)よりも、インストール方法と実行方法について説明しましょう。

まだChromeブラウザを起動していない場合は起動し、次のページに移動してください: chrome://extensions ページ。右上隅にある以下のチェックボックスを探してオンにしてください: デベロッパーモードのチェックボックス。下記参照。

デベロッパーモードのチェックボックスをオンにしたとき、そしてオンにしたときのみ、次のボタンが表示されます: パッケージ化されていない拡張機能を読み込む… ボタン(左側)が表示されます。そのボタンをクリックしてください。6つの小さなファイルが入っているフォルダに移動します。そのフォルダをターゲットフォルダとして指定し、次をクリックしてください: OK。すると次の画面に戻ります: chrome://extensions ページに戻ると、利用可能な拡張機能の一覧にアプリが表示されます。そのアプリを見つけて、関連付けられた次のリンクをクリックしてください: 起動 リンク(上記のスクリーンショットをよく見てください)。アプリのメインウィンドウが表示されます:

これは、すでにSecuREDカードリーダー(または他のシリアルデバイス)をCOM3ポートに接続している場合のウィンドウの様子です。次の点に注意してください: script.js (上記参照)内のJavaScriptは、ポート名として「COM3」を使用するようにハードコードされています。お使いのコンピューターが別のシリアルポートを使用している場合は、正しい名前を使用するようにコードを手動で編集してください。(これはWindowsの「デバイスとプリンター」から確認できます。Linuxの場合、シリアルポート名は次のような形式になっていることがあります: /dev/tty0 または /dev/ttyUSB0 または /dev/tty1。)ちなみに、この拡張機能はWindowsでもLinuxでもMac OS XでもChromeOSでも動作します(Chromeがインストールされていることが前提です)。

シリアルデバイスへの接続に成功し、そのデバイスがID TECHのSecuREDカードリーダーである場合は、スロットにクレジットカードを通してスワイプしてみてください。カードデータがアプリウィンドウの上部のテキストエリアに自動的に表示されます(下記スクリーンショットの16進値に注目してください):

もちろん、このデータを解析するには、ID TECHの拡張暗号化MSRフォーマットを理解している必要があります。(同様に、 復号化データを処理するには、DUKPT、鍵導出、AES、TDESの理解が必要です。)これらについては今後の記事で取り上げます。今のところは、Serial Test UtilityがGoogle Chromeが動作するあらゆるプラットフォームで、Google Chromeから即座かつ自動的にクレジットカードデータをキャプチャできるという点を押さえておけば十分です。さらに、Chromeの強力な組み込みデバッグツールを使って、JavaScriptで書かれたコードをデバッグすることもできます。

コードをステップ実行すると(コードの一番下まで進むと)、シリアルデータを受信するために、受信コールバック関数をchrome.serial.onReceive.addListener()に渡していることがわかります。次に、receive()関数はcollect()関数を呼び出し、受信したバイトをバッファに蓄積します。バッファは、500ミリ秒のWAIT_TIME後にテキストとしてアプリのUIに書き込まれます。つまり、カードリーダーからアプリにデータが入ってくると、タイマーを開始し、データが(数ミリ秒間隔で小さなバッチとして到着するたびに)バッファに蓄積され、タイマーがタイムアウトすると(500ミリ秒後)バッファを画面にフラッシュします(データがまだ届いている場合は、バッファリングプロセスを再開します)。これにより、画面に表示する前にある程度の量のデータをまとめてバッチ処理できます。(そうしないと、数ミリ秒間隔で非常に短いパケットを画面に多数書き込むことになる可能性があります。)

アプリの中で、自明ではないかもしれない他の部分は、SendボタンとClearボタンのすぐ上にある小さな「コマンドウィンドウ」(上記スクリーンショット参照)と、ドロップダウンメニュー(「コマンドを選択してSendを押してください」)だけです。Sendボタンの上にある小さなテキストエリアは、ターゲットデバイス(この場合はID TECHのSecuRED)が応答できる特定のファームウェアコマンドを手動で入力できる領域です。ドロップダウンメニューには、すぐに使えるプリロードされたコマンドがいくつか含まれています(例えば02 53 11 01 33 03 71はSecuREDをビープ音で1回鳴らします)。他の16進コマンドを知っている場合(例えばユニットのドキュメントが手元にある場合など)、デバイスを制御または構成するコマンドを入力できます。

SecuRED専用のドロップダウンメニューコントロールを使用しなくても、Serial Test UtilityはChromeブラウザから任意のシリアル接続を監視するのに便利なツールです。シリアルポートを通過するあらゆるデータを、ID TECHカードリーダー由来かどうかに関わらず、表示します。

このプロジェクトを楽しんでいただけたら幸いです。今後の記事では、Chromeの接続APIを使ってUSB-HIDデバイスと通信する方法を取り上げる予定です。これは知っておいて損はない知識です!