기술 포스트
브라우저로 IC카드 리더기를 제어하세요!
이전 게시물에서 저는 NodeJS를 사용하여 USB 연결을 설정하는 방법을 소개했습니다. NodeJS는 널리 사용되는 JavaScript 런타임 엔진입니다. 이어지는 후속 게시물에서는 웹소켓을 활용하여 NodeJS와 모든 브라우저(웹소켓을 지원하지 않는 구형 브라우저 포함) 간의 프로세스 간 통신을 구현하는 방법을 살펴보았습니다.
USB 연결 코드와 웹소켓 코드를 결합하면, 웹 페이지에서 JavaScript만으로 USB 장치(오른쪽에 표시된 VP3300 3방식 카드 리더기 등)를 제어할 수 있게 됩니다. 오늘은 바로 그 코드를 소개하고자 합니다.
이전 게시물에서 스크립트를 아직 다운로드하지 않으셨더라도 걱정하지 마세요. 아래 스크립트(약 360줄의 JavaScript)에는 Node 자체를 제외한 모든 필요 요소가 포함되어 있습니다. 코드에 대해서는 잠시 후 설명하겠지만, 먼저 사용 방법을 알아보겠습니다.
스크립트 사용 방법 (간편 방식)
1. ID TECH 지식 베이스에 접속하여 node-driver.zip 아카이브. (로그인 불필요.) 참고: Node.exe가 포함되어 있어 파일 크기가 약 11메가바이트로 다소 크므로, 다운로드에 몇 초 정도 소요될 수 있습니다. 또한 Windows 전용입니다. 아카이브 파일은 로컬 머신의 임의 위치에 저장하시면 됩니다.
2. 아카이브 파일의 압축을 해제합니다. 필요한 모든 스크립트가 포함되어 있습니다. (아래에 표시된 코드를 별도로 복사/붙여넣기할 필요가 없습니다!)
3. 압축 해제된 폴더에서 다음 파일을 찾습니다: start.bat. 해당 파일을 실행합니다. (콘솔 창이 열리면 그대로 열어 두십시오.) 이제 Node 드라이버가 실행 중입니다.
4. 지원되는 장치(ID TECH BTPay Mini, VP3300, UniPay III, VP8800)를 컴퓨터의 USB 포트에 연결합니다. Node 드라이버가 자동으로 해당 장치를 인식하여 연결합니다.
5. 웹 브라우저에서 client.html 파일(아카이브 내 포함)을 엽니다. Connect 버튼을 클릭합니다. 포트 9901에서 Websocket 연결이 성공적으로 설정되었다는 메시지가 표시되어야 합니다. 드라이버는 이 연결을 통해 USB 장치와 통신합니다.
스크립트 사용 방법 (고급 사용자용)
아래에 약 360줄의 JavaScript 코드가 있습니다. 해당 코드 전체를 복사하여 텍스트 파일에 붙여넣은 후, 예를 들어 driver.js와 같은 이름으로 저장합니다.
아직 설치하지 않으셨다면 먼저 NodeJS를 설치하십시오. 단, Node로 driver.js를 실행하기 전에 다음 작업을 수행하십시오.
다음 Node 모듈을 설치하려면 npm 을 사용하십시오 (Github 등에서 다운로드 가능):
1. node-hid (USB 연결용)
2. socket.io (Websockets 연결용)
3. socket.io-client (Node 스크립트가 socket.io 클라이언트로 동작할 수 있도록)
이제 Node를 사용하여 driver.js (아래 코드 참조)를 실행하십시오. 브라우저에서 드라이버에 연결하려면 다음 내용을 포함하는 HTML 페이지를 생성하십시오:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.slim.js"></script>
그리고 다음도 추가하십시오:
Websockets 기반의 socket.io 구현을 사용하려면 socket.io.slim.js 스크립트를 가져와야 합니다. socket 변수(var socket, 위 참조)를 사용하여 Websocket 메시지를 전송하십시오.
다음은 Websockets를 통해 브라우저에서 USB 연결을 구현하기 위해 Node에서 실행해야 하는 코드입니다:
이 코드의 첫 번째 부분에는 USBProvider 클래스 정의가 포함되어 있으며(Node에서 지원하는 ECMA 6 표기법 사용), 이에 대해서는 이전 게시물에서 설명한 바 있습니다. 코드 중간 부분에는 Websockets 서버 생성을 위한 SocketProvider 클래스 정의가 포함되어 있습니다. 코드 하단은 앞의 두 부분을 연결하는 "심(shim) 코드"로, USBProvider 인스턴스와 SocketProvider 인스턴스를 생성하고 각각을 시작한 후 서로 통신하도록 합니다. 이를 통해 간단한 JSON 데이터 객체 구조를 사용하여 브라우저에서 USB 장치로 명령을 전송할 수 있습니다:
리더기에 원시 장치 명령을 전송하려면 다음과 같이 작성합니다:
var cmd = "5669564f74656368320060040000f5e1";
dobj = dataObject( 'client',cmd,'raw command');
socket.emit( 'echo', dobj ); // 장치에 명령 전송
cmd 위에 표시된 문자열은 ID TECH의 UniPay III, BTPay Mini, 또는 VP3300 디바이스에 대한 "Get Terminal Settings" 명령의 원시 16진수 바이트를 나타냅니다.
앞서 언급한 client.html 아카이브에 포함된 node-driver.zip 파일에는 이미 getTerminalSettings()라는 메서드가 포함되어 있으며, 이 메서드는 위의 명령을 연결된 디바이스로 전송합니다. client.html 콘솔에서 해당 명령을 실행하면 아래와 같이 디바이스 설정의 상세 목록이 표시됩니다.
이 스크린샷은 ID TECH BTPay Mini (VP3300) 제품의 기본 단말기 설정 일부를 보여줍니다. (참고: 스크린샷이 전체 스크롤 영역을 캡처하지 못하여 모든 설정이 표시되지는 않습니다.)
요약
이번 포스트와 USB 연결에 관한 이전 두 포스트에서 다룬 주요 내용을 간략히 정리해 보겠습니다. 우리는 다음과 같은 사항들을 확인하였습니다.
1. 널리 사랑받는 오픈소스 JavaScript 런타임 엔진인 NodeJS를 활용하면, JavaScript로 모든 USB 디바이스와 손쉽게 통신할 수 있습니다. 이것 자체만으로도 매우 놀라운 일입니다!
2. 또한 75줄의 코드만으로 Node를 사용하여 Websocket 서버를 간단히 구축할 수 있으며, Node를 지원하는 모든 디바이스에서 빠르고, 편리하며, 안정적이고 안전한 프로세스 간 통신을 구현할 수 있습니다.
3. Node 스크립트는 Websocket을 통해 USB 데이터를 Websocket을 지원하는 모든 브라우저, 즉 최신 브라우저에 손쉽게 전달할 수 있습니다.
4. 결과적으로, 웹 브라우저에서 실행되는 JavaScript를 사용하여 노트북, PC, 태블릿 또는 기타 호스트에 연결된 USB 디바이스(예: 신용카드 리더기)를 손쉽게 제어할 수 있습니다. 이는 곧 JavaScript만으로 다양한 ID TECH 카드 리더기와 통신하는 강력한 브라우저 기반 결제 앱을 개발할 수 있음을 의미합니다. C나 C++로 네이티브 코드를 작성할 필요가 없습니다.따라서 최소한의 코딩만으로도 거의 모든 결제 앱을 매우 빠르게 프로토타이핑할 수 있습니다.
다음 포스트에서는 웹 기술을 활용하여 ID TECH 리더기를 지원하는 결제 앱을 만드는 방법에 대해 더 자세히 다룰 예정입니다. 곧 다시 찾아주세요!
한편, ID TECH Products에 대해 더 알고 싶으시다면, 무료 전화로 문의해 주세요: