기술 포스트
브라우저로 칩 카드 리더기를 제어하세요!
이전 포스트에서 저는 인기 있는 JavaScript 런타임 엔진인 NodeJS를 사용하여 USB 연결을 설정하는 방법을 소개했습니다. 이어진 후속 포스트에서는 Websockets를 활용해 NodeJS와 모든 브라우저(Websockets를 지원하지 않는 구형 브라우저 포함) 간에 프로세스 간 통신을 구현하는 방법을 살펴보았습니다.
USB 연결 코드와 Websockets 코드를 결합하면, 웹 페이지에서 JavaScript만으로 USB 장치(오른쪽에 표시된 3방식 카드 리더기 VP3300 등)를 제어하는 것이 가능해집니다. 오늘은 바로 그 코드를 소개해 드리겠습니다.
이전 포스트에서 스크립트를 아직 다운로드하지 않으셨더라도 걱정하지 마세요. 아래 스크립트(약 360줄의 JavaScript)에는 Node 자체를 제외한 모든 필요한 내용이 포함되어 있습니다. 코드에 대한 설명은 잠시 후에 드리겠습니다. 먼저 사용 방법부터 안내해 드리겠습니다.
1. ID TECH 지식 베이스(Knowledge Base)에 접속하여 node-driver.zip 아카이브를 다운로드하십시오. (로그인 불필요) 참고: Node.exe가 포함되어 있어 파일 크기가 약 11MB로 다소 크므로, 다운로드에 몇 초 정도 소요될 수 있습니다. 또한 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 (WebSocket 연결용)
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>
추가로:
socket.io의 Websockets 구현을 사용하려면 socket.io.slim.js 스크립트를 임포트해야 합니다. Websocket 메시지를 전송할 때는 socket 변수(var socket, 위 참조)를 사용하십시오.
브라우저에서 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 스크립트는 USB 데이터를 Websockets를 통해 Websockets를 지원하는 모든 브라우저, 즉 최신 브라우저라면 어디서나 손쉽게 전달할 수 있습니다.
4. 따라서 웹 브라우저에서 실행되는 JavaScript를 사용하여 노트북, PC, 태블릿 또는 기타 호스트 기기에 연결된 USB 장치(예: 신용카드 리더기)를 손쉽게 제어할 수 있습니다. 이 모든 것은 곧, JavaScript만으로 다양한 ID TECH 카드 리더기와 통신하는 강력한 브라우저 기반 결제 앱을 개발할 수 있다는 것을 의미합니다. C나 C++로 네이티브 코드를 작성할 필요가 없습니다.따라서 최소한의 코딩 작업만으로도 거의 모든 결제 앱을 매우 빠르게 프로토타입으로 구현할 수 있습니다.
앞으로 게시될 글에서는 웹 기술을 활용하여 ID TECH 리더기를 연동한 결제 앱을 개발하는 방법에 대해 더 많은 내용을 다룰 예정입니다. 곧 다시 방문해 주세요!
그 전에 ID TECH Products에 대해 더 알고 싶으시다면, 수신자 부담 전화로 문의해 주세요: