29 กรกฎาคม 2562

Signature Pad draw on browser

เซ็นชื่อบนหน้าจอ แล้วเซฟเก็บไว้ ?

หลายๆ คนคงเจอมากับตัวเองบ้างแล้ว กับลายมือชื่ออิเล็กทรอนิกส์ (Electronic signature) ที่เป็นการเซ็นลงไปบนอุปกรณ์ elctronic โดยตรง แทนที่การเซ็นลงบนกระดาษ ซึ่งเบื้องต้น ต้องขออธิบายก่อน ว่าการรับรองเอกสารทางอิเล็กทรอนิกส์ แบ่งได้สองประเภทคือ
  • Electronic Signature : เป็นการเขียนบนหน้าจอตรงๆ (ไม่ว่าจะเป็นนิ้ว หรือปากกา stylus) หรือเซฟเป็นภาพเอาไว้แล้ว มาตัดแปะลงบนกระดาษ ซึ่งมีความน่าเชื่อถือต่ำ เพราะสามารถรีทัช ดัดแปลงได้
  • Digital Signature : จะมีความน่าเชื่อถือมากกว่า Electronic Signature โดยจะเพิ่มในส่วนของผู้รับรองเข้ามา (CA หรือ Certificate Authority) เป็นตัวกลางอีกขึ้นหนึ่ง ซึ่งข้อมูลของการยืนยันตัวตัว จะถูกเข้ารหัสเอาไว้ ไม่สามารถเปลี่ยนแปลงได้ โดยอาจจะเป็นข้อมูลตั้งต้นมาจากคอมพิวเตอร์ล้วนๆ หรืออาจจะนำเข้าข้อมูลชีวภาพ เช่นสแกนลายนิ้วมือมาจัดเก็บเป็นข้อมูล ก่อนนำไปเข้ารหัสก็ได้
ในส่วนของด้านกฏหมาย ทาง blog คงไม่ขอลงรายละเอียด เนื่องจากผู้เขียน เป็นสาย dev แต่เนื่องจากผู้เขียน พบการใช้งานจริงมากขึ้นไม่ว่าจะกับการเซ็นรับพัสดุไปรษณีย์ หรือเซ็นชื่อจ่ายบัตรเครดิตตามห้างสรรพสินค้า ซึ่งแม้จะขยุกขยุยเขียนได้ไม่คมชัดเท่ากับ กระดาษปากกา แต่ก็น่าจะเป็นที่ยอมรับในทางกฏหมายอยู่ระดับนึง หรือว่าอาจจะนำมาใช้งานวาดรูปเล่น เขียน short note แทน ก็แล้วแต่การนำไปประยุกต์ใช้งาน
เกริ่นมานานพอสมควร สำหรับคนเขียนเว็บทั่วๆ ไป ก็คงถือว่าเป็นงานยากไม่น้อย หากจะเขียนโปรแกรมให้เขียนบนหน้าจอได้ ก็เลยถึงเวลาแนะนำพระเอกของเรา szimek signature_pad ซึ่งเป็น JavaScript library ที่ใช้ HTML5 canvas เป็นแกนหลัก ซึ่งสามารถแสดงผลได้ใน browser ใหม่ๆ รองรับทั้ง version desktop และ mobile อ่านเพิ่มเติม เกี่ยวกับ HTML5 canvas ซึ่งทางผมยังไม่ได้ทดสอบการใช้งานกับตัวอื่นๆ แต่สำหรับ Chrome ที่นิยมสำหรับ user ทั่วไปแล้ว สามารถใช้งานได้เป็นอย่างดีครับ ทั้ง Desktop และ Mobile