อ่านบัตรประชาชน (Smartcard Reader) ด้วย JavaScript

การทำงานที่ต้องใช้ข้อมูล เช่น ชื่อ-สกุล เลขประจำตัวประชาชน บ้านเลขที่ วันออกบัตร วันหมดอายุ เพื่อดำเนินการพิมพ์เอกสาร จัดเก็บข้อมูล หรือดำเนินการอื่นๆ สามารถดึงข้อมูลจากบัตรประชาชนมาใช้งานได้ เพื่อลดความผิดพลาดและความซ้ำซ้อนในการทำงาน ให้การทำงานพิมพ์ข้อมูล หรือ จัดเก็บข้อมูลรวดเร็วขึ้น

เครื่องมือที่ใช้

1.ติดตั้งโปรแกรม Smartcard Reader แล้วเปิดใช้งาน frontagent.exe

2.ใช้ Browser Chrome และติดตั้ง Extension Cors Unblock แล้วเปิดใช้งาน

3.ติดตั้งอุปกรณ์ (hardware) Smartcard Reader ตัวที่ใช้งานเป็นยี่ห้อ feitian r301-c11 หาซื้อได้ใน Lazada

4.สร้าง Form และ Function() เพื่อดึงข้อมูลจากบัตรประชาชน มาใส่ใน Form เพื่อประยุกต์ใช้งาน

กรณีนี้ ผมขอยกตัวอย่าง ตัวอย่างในCodePen โดยใช้ JavaScript ดึงข้อมูลจาก Smartcard Reader มาใส่ไว้ใน Html Form เพื่อใช้งานข้อมูล

4.1สร้าง HTML File สร้าง Form Input รับค่าต่างๆ เช่น

4.2 สร้าง button เพื่อเรียกใช้ function getCardData() เพื่ออ่านบัตรประชาชน

<button onclick="getCardData()" >ดึงข้อมูลจากบัตรประชาชน</button>

4.3 สร้าง ไฟล์.js สร้าง Function getCardData() เพื่ออ่านข้อมูลจาก localhost และแปลงค่าเป็นข้อความ text เนื่องจาก ค่าใน localhost ไม่สามารถแปลงเป็น JSON ได้เลยทันที เพราะ Format ไม่ถูกต้อง

สาเหตุ มาจากผู้พัฒนา Smartcard Reader ได้ใส่คำว่า "/**/callback(" อยู่ด้านหน้า text ที่เราต้องการ และใส่วงเล็บ ")" อยู่ด้านหลัง ทำให้ไม่ถูกต้องตามแบบ JSON หากสงสัยเข้าไปเช็คได้ที่นี่

จึงต้อง substring ตัดอักษรด้านหน้าออกไป 13 หลัก และ length-1 ตัดอักษรหลังออก 1 หลัก

หลังจากนั้น Format ถูกหลักแล้ว ให้สร้างตัวแปร obj เพื่อเก็บข้อมูลที่แปลงเป็นJSON

ใช้ if else เช็คค่ากรณียังไม่เสียบบัตร obj==null ให้แจ้งเตือน

ซึ่ง ภายใน obj จะมีข้อมูลรูปแบบ JSON อยู่ ดังนี้

ด้านหน้าจะเป็นตัวแปร : ด้านหลังเป็นข้อมูล

หลังจากนั้นจะเป็นการดึงข้อมูลจาก obj ให้ไปปรากฎใน HTML เช่น document.getElementById("full_name").value = obj.FirstNameTh +" "+ obj.FirstNameEn

**ในไฟล์ html**

<input type="text" name="full_name" id="full_name"> จะมีค่า value = "ศุภวัฒน์ Supawat"

เมื่อเราสามารถเอาข้อมูลออกมาจากบัตรประชาชนได้แล้ว ต่อไปก็คือการนำไปประยุกต์ใช้งาน กรณีนี้ นำข้อมูลมาสร้างเป็นไฟล์เอกสาร .docx เปิดใช้งานด้วย Microsoft Word 2010 โดยสร้าง button onclick function generate()

**ลองทดสอบใช้งานได้ใน CODE PEN** Click ที่นี่