👉สร้างแป้นกด PIN แบบตัวเลข 3D

👉สร้างแป้นกด PIN แบบตัวเลข 3D พร้อมทำเป็น Google Apps Script Library ใช้ซ้ำได้ทุกโปรเจกต์

ระบบ Web App ที่มีหน้า Admin มักต้องมีการตรวจสอบสิทธิ์ก่อนเข้าใช้งาน แต่การให้ผู้ใช้พิมพ์รหัสผ่านในช่องข้อความแบบเดิมอาจไม่สะดวก โดยเฉพาะเมื่อเปิดใช้งานผ่านโทรศัพท์มือถือหรือแท็บเล็ต

บทความนี้จะแนะนำการสร้าง “แป้นกด PIN แบบตัวเลข” ที่มีปุ่มตัวเลขสไตล์ 3D เมื่อกดแล้วเกิดแสงสีเขียว พร้อมแยกส่วนตรวจสอบ PIN เป็น Google Apps Script Library เพื่อให้สามารถนำไปใช้ซ้ำกับหลายระบบได้ เช่น

• ระบบแจ้งการลาออนไลน์
• ระบบบันทึกคะแนน
• ระบบจัดการเอกสาร
• ระบบรายงานกิจกรรม
• ระบบจองออนไลน์
• ระบบบริหารจัดการข้อมูลใน Google Drive
• ระบบหลังบ้านสำหรับผู้ดูแล

จุดเด่นของระบบแป้นกด PIN

• กด PIN ผ่านปุ่มตัวเลข 0–9
• รองรับ PIN ตั้งแต่ 4–12 หลัก
• มีปุ่มลบตัวเลขทีละหลัก
• มีปุ่มล้าง PIN ทั้งหมด
• แสดงจำนวน PIN ด้วยจุดวงกลม
• ไม่แสดงตัวเลข PIN บนหน้าจอ
• ปุ่มมีมิติแบบ 3D
• เมื่อกดปุ่มจะแสดงแสงสีเขียว
• รองรับหน้าจอมือถือและคอมพิวเตอร์
• กดตัวเลขจากแป้นพิมพ์คอมพิวเตอร์ได้
• ตรวจสอบ PIN ที่ฝั่ง Code.gs
• ไม่เปิดเผย PIN ใน JavaScript ฝั่งผู้ใช้
• สามารถสร้างเป็น Library แล้วนำไปใช้ซ้ำได้

---

โครงสร้างการทำงาน

ระบบแบ่งออกเป็น 2 ส่วนหลัก

1. โปรเจกต์ Library    ทำหน้าที่ตรวจสอบว่า PIN ที่ผู้ใช้กดตรงกับ PIN ที่กำหนดไว้หรือไม่

2. โปรเจกต์ Web App หลัก    ประกอบด้วยไฟล์:

• Code.gs
• index.html
• javascript.html
• style.html

ลำดับการทำงานคือ:

ผู้ใช้กดตัวเลขบนแป้น PIN
          ↓
javascript.html รับค่าตัวเลข
          ↓
ส่ง PIN ไปยัง checkAdminPin() ใน Code.gs
          ↓
Code.gs เรียก PinPadLib.verifyPin()
          ↓
ไลบรารีตรวจสอบความถูกต้อง
          ↓
เข้าสู่หน้า Admin หรือแจ้งว่ารหัสไม่ถูกต้อง

---

ขั้นตอนที่ 1 สร้างโปรเจกต์ Google Apps Script Library

1. เปิดเว็บไซต์ Google Apps Script
2. กดปุ่ม โปรเจกต์ใหม่
3. ตั้งชื่อโปรเจกต์ว่า NumericPinLibrary
4. เปิดไฟล์ Code.gs
5. ลบโค้ดเดิมออก
6. นำโค้ดต่อไปนี้ไปวาง

/**
 * Numeric PIN Library
 * ไลบรารีสำหรับตรวจสอบรหัส PIN แบบตัวเลข
 * Version 1.0.0
 */

/**
 * ตรวจสอบรหัส PIN
 *
 * @param {string} enteredPin PIN ที่ผู้ใช้กด
 * @param {string} correctPin PIN ที่ถูกต้อง
 * @param {number} pinLength จำนวนหลักของ PIN
 * @return {Object} ผลการตรวจสอบ
 */
function verifyPin(enteredPin, correctPin, pinLength) {
  try {
    const requestedLength = Math.trunc(Number(pinLength) || 6);
    const length = Math.min(12, Math.max(4, requestedLength));

    const entered = String(
      enteredPin === null || enteredPin === undefined
        ? ''
        : enteredPin
    ).trim();

    const correct = String(
      correctPin === null || correctPin === undefined
        ? ''
        : correctPin
    ).trim();

    const pinPattern = new RegExp(
      '^\\d{' + length + '}$'
    );

    if (!pinPattern.test(entered)) {
      return {
        success: false,
        message: 'กรุณากดรหัส PIN ให้ครบ ' + length + ' หลัก'
      };
    }

    if (!pinPattern.test(correct)) {
      return {
        success: false,
        message: 'ยังไม่ได้ตั้งค่ารหัส PIN ของระบบ'
      };
    }

    const matched = constantTimeCompare_(entered, correct);

    if (!matched) {
      return {
        success: false,
        message: 'รหัส PIN ไม่ถูกต้อง กรุณาลองใหม่'
      };
    }

    return {
      success: true,
      message: 'เข้าสู่ระบบสำเร็จ',
      role: 'admin',
      version: getLibraryVersion()
    };

  } catch (error) {
    console.error('verifyPin error:', error);

    return {
      success: false,
      message: 'เกิดข้อผิดพลาดในการตรวจสอบ PIN'
    };
  }
}

/**
 * เปรียบเทียบข้อความโดยลดความแตกต่างของเวลาในการประมวลผล
 *
 * ฟังก์ชันที่ลงท้ายด้วยเครื่องหมาย _
 * จะไม่เปิดให้โปรเจกต์ที่ติดตั้ง Library เรียกใช้งานโดยตรง
 *
 * @param {string} valueA
 * @param {string} valueB
 * @return {boolean}
 */
function constantTimeCompare_(valueA, valueB) {
  const a = String(valueA);
  const b = String(valueB);

  const maximumLength = Math.max(a.length, b.length);
  let difference = a.length ^ b.length;

  for (let index = 0; index < maximumLength; index++) {
    const codeA = index < a.length
      ? a.charCodeAt(index)
      : 0;

    const codeB = index < b.length
      ? b.charCodeAt(index)
      : 0;

    difference |= codeA ^ codeB;
  }

  return difference === 0;
}

/**
 * คืนค่าเวอร์ชันของไลบรารี
 *
 * @return {string}
 */
function getLibraryVersion() {
  return '1.0.0';
}

ฟังก์ชันที่โปรเจกต์อื่นสามารถเรียกใช้ได้คือ:

verifyPin()

และ

getLibraryVersion()

ส่วนฟังก์ชันที่ลงท้ายด้วย _ เช่น

constantTimeCompare_()

จะถูกใช้เป็นฟังก์ชันภายใน Library เท่านั้น

---

ขั้นตอนที่ 2 สร้างเวอร์ชันของ Library

หลังจากใส่โค้ดเรียบร้อยแล้ว ให้ดำเนินการดังนี้

1. กด บันทึกโครงการ
2. กดเมนู ทำให้ใช้งานได้
3. เลือก การทำให้ใช้งานได้รายการใหม่
4. กดไอคอนรูปเฟือง
5. เลือกประเภท ไลบรารี
6. ใส่คำอธิบาย เช่น Numeric PIN Library Version 1.0.0
7. กด ทำให้ใช้งานได้
8. ระบบจะสร้างเวอร์ชันแรก เช่น เวอร์ชัน 1

เมื่อแก้ไขโค้ดใน Library ภายหลัง ต้องสร้างเวอร์ชันใหม่ เช่น เวอร์ชัน 2, 3 หรือ 4 แล้วจึงกลับไปเปลี่ยนเวอร์ชันในโปรเจกต์ที่นำ Library ไปใช้

---

ขั้นตอนที่ 3 คัดลอก Script ID

1. เปิดหน้า การตั้งค่าโปรเจกต์
2. เลื่อนไปที่หัวข้อ รหัส
3. คัดลอกค่า รหัสสคริปต์ หรือ Script ID

ตัวอย่างรูปแบบ Script ID:

1AbCdEfGhIjKlMnOpQrStUvWxYz1234567890

Script ID เปรียบเสมือนรหัสประจำตัวของ Library ซึ่งจะใช้สำหรับติดตั้ง Library ในโปรเจกต์อื่น

หากต้องการให้บัญชี Google อื่นใช้ Library ต้องแชร์โปรเจกต์ Library ให้บัญชีนั้นมีสิทธิ์เข้าถึงด้วย

---

ขั้นตอนที่ 4 ติดตั้ง Library ในโปรเจกต์ Web App

เปิดโปรเจกต์ Google Apps Script ที่ต้องการนำแป้น PIN ไปใช้ จากนั้นดำเนินการดังนี้

1. ดูเมนูด้านซ้าย
2. ไปที่หัวข้อ ไลบรารี
3. กดเครื่องหมาย +
4. วาง Script ID ที่คัดลอกมา
5. กด ค้นหา
6. เลือกเวอร์ชันที่ต้องการ เช่น เวอร์ชัน 1
7. กำหนดตัวระบุ Library เป็น PinPadLib
8. กด เพิ่ม

เมื่อติดตั้งเรียบร้อยแล้ว จะสามารถเรียกใช้ฟังก์ชันใน Library ได้ด้วยคำสั่ง:

PinPadLib.verifyPin()

ตัวระบุ PinPadLib ต้องตรงกับชื่อที่กำหนดในหน้าติดตั้ง Library หากกำหนดเป็นชื่ออื่น ต้องเปลี่ยนชื่อในโค้ดให้ตรงกันด้วย

---

ขั้นตอนที่ 5 กำหนด PIN ใน Script Properties

ไม่ควรเขียน PIN ไว้ใน javascript.html เพราะผู้ใช้สามารถเปิดเครื่องมือนักพัฒนาและตรวจสอบโค้ดฝั่งหน้าเว็บได้

แนะนำให้เก็บ PIN ไว้ใน Script Properties ของแต่ละโปรเจกต์

วิธีตั้งค่า:

1. เปิด การตั้งค่าโปรเจกต์
2. ไปที่หัวข้อ พร็อพเพอร์ตี้ของสคริปต์
3. กด เพิ่มพร็อพเพอร์ตี้ของสคริปต์
4. กำหนดค่าดังนี้

พร็อพเพอร์ตี้: ADMIN_PIN
ค่า: 123456

สามารถเปลี่ยน 123456 เป็น PIN ที่ต้องการได้

หาก PIN เริ่มต้นด้วยเลขศูนย์ เช่น 012345 ให้บันทึกเป็นข้อความครบทุกหลัก ห้ามแปลงเป็นตัวเลข เพราะเลขศูนย์ตัวแรกอาจหายได้

แต่ละระบบสามารถกำหนด PIN ของตัวเองได้ แม้ว่าจะใช้ Library ตัวเดียวกันก็ตาม

---

ขั้นตอนที่ 6 เพิ่มฟังก์ชันใน Code.gs

เปิดไฟล์ Code.gs ของโปรเจกต์หลัก แล้วเพิ่มฟังก์ชันต่อไปนี้

/**
 * รับ PIN จากหน้าเว็บและส่งให้ Library ตรวจสอบ
 *
 * @param {string} pin PIN ที่ผู้ใช้กด
 * @return {Object} ผลการตรวจสอบ
 */
function checkAdminPin(pin) {
  try {
    const properties =
      PropertiesService.getScriptProperties();

    const correctPin =
      properties.getProperty('ADMIN_PIN');

    if (!correctPin) {
      return {
        success: false,
        message: 'ยังไม่ได้กำหนด ADMIN_PIN ในการตั้งค่าโปรเจกต์'
      };
    }

    return PinPadLib.verifyPin(
      pin,
      correctPin,
      6
    );

  } catch (error) {
    console.error('checkAdminPin error:', error);

    return {
      success: false,
      message: 'ไม่สามารถเรียกใช้ไลบรารีตรวจสอบ PIN ได้'
    };
  }
}

ตัวเลข 6 ในคำสั่งต่อไปนี้ คือจำนวนหลักของ PIN

return PinPadLib.verifyPin(
  pin,
  correctPin,
  6
);

หากต้องการใช้ PIN 4 หลัก ให้เปลี่ยนเป็น:

return PinPadLib.verifyPin(
  pin,
  correctPin,
  4
);

หากต้องการใช้ PIN 8 หลัก ให้เปลี่ยนเป็น:

return PinPadLib.verifyPin(
  pin,
  correctPin,
  8
);

จำนวนหลักในหน้าแป้น PIN และจำนวนหลักที่ส่งให้ Library ต้องตรงกัน

---

ขั้นตอนที่ 7 เรียกตรวจสอบจาก javascript.html

ในไฟล์ javascript.html ให้ส่ง PIN ไปยังฟังก์ชัน checkAdminPin() ด้วย google.script.run

<script>
  function submitPin() {
    if (enteredPin.length !== 6) {
      showPinError('กรุณากดรหัส PIN ให้ครบ 6 หลัก');
      return;
    }

    google.script.run
      .withSuccessHandler(function(result) {
        if (result && result.success === true) {
          closePinPadForce();

          Swal.fire({
            icon: 'success',
            title: 'เข้าสู่ระบบสำเร็จ',
            text: result.message || 'ยินดีต้อนรับผู้ดูแลระบบ',
            timer: 1200,
            showConfirmButton: false
          }).then(function() {
            openAdminPage(result);
          });

        } else {
          clearPin();

          showPinError(
            result && result.message
              ? result.message
              : 'รหัส PIN ไม่ถูกต้อง'
          );
        }
      })
      .withFailureHandler(function(error) {
        clearPin();

        showPinError(
          error && error.message
            ? error.message
            : 'ไม่สามารถเชื่อมต่อระบบได้'
        );
      })
      .checkAdminPin(enteredPin);
  }
</script>

ไฟล์ javascript.html สำหรับ Google Apps Script ต้องมีแท็ก:

<script>

ครอบโค้ด JavaScript และปิดท้ายด้วย:

</script>

เพื่อให้สามารถนำไปเรียกผ่านคำสั่ง include('javascript') ได้อย่างถูกต้อง

---

ขั้นตอนที่ 8 เปิดหน้า Admin หลังตรวจสอบสำเร็จ

เมื่อ PIN ถูกต้อง ระบบจะเรียกฟังก์ชัน:

openAdminPage(result);

ตัวอย่างกรณีระบบใช้ฟังก์ชัน showPage() สำหรับสลับหน้า:

<script>
  function openAdminPage(result) {
    showPage('admin');
  }
</script>

ตัวอย่างกรณีต้องการแสดงส่วน Admin โดยตรง:

<script>
  function openAdminPage(result) {
    const adminPage = document.getElementById('adminPage');

    if (adminPage) {
      adminPage.style.display = 'block';
    }
  }
</script>

ตัวอย่างโครงสร้างหน้า Admin:

<section id="adminPage" style="display: none;">
  <h2>หน้าผู้ดูแลระบบ</h2>
  <p>ยินดีต้อนรับเข้าสู่หน้าจัดการข้อมูล</p>
</section>

---

ขั้นตอนที่ 9 เรียกเปิดแป้น PIN

สร้างปุ่มเข้าสู่ระบบใน index.html

<button
  type="button"
  class="btn btn-success"
  onclick="openPinPad()">
  <i class="fa-solid fa-lock"></i>
  เข้าสู่ระบบผู้ดูแล
</button>

เมื่อผู้ใช้กดปุ่ม ระบบจะเรียก:

openPinPad();

จากนั้นแป้นตัวเลขจะปรากฏขึ้น ผู้ใช้สามารถกด PIN แล้วเข้าสู่หน้า Admin ได้

---

วิธีทดสอบระบบ

หลังจากติดตั้งทุกส่วนแล้ว ให้ทดสอบตามลำดับดังนี้

1. บันทึกโปรเจกต์ทั้งหมด
2. ตรวจสอบว่าติดตั้ง Library แล้ว
3. ตรวจสอบตัวระบุ Library ว่าเป็น PinPadLib
4. ตรวจสอบว่าเลือกเวอร์ชันถูกต้อง
5. ตรวจสอบว่ามี Script Property ชื่อ ADMIN_PIN
6. ตรวจสอบจำนวนหลักของ PIN
7. ทำให้ Web App ใช้งานได้อีกครั้ง
8. เปิดลิงก์ Web App
9. กดปุ่มเข้าสู่ระบบผู้ดูแล
10. ทดลองกด PIN ไม่ครบ
11. ทดลองกด PIN ผิด
12. ทดลองกด PIN ที่ถูกต้อง
13. ตรวจสอบว่าระบบเปิดหน้า Admin ได้

---

การอัปเดต Library

เมื่อแก้ไขโค้ดใน NumericPinLibrary การแก้ไขจะยังไม่ส่งผลต่อโปรเจกต์ที่เลือกใช้เวอร์ชันเดิมทันที

ขั้นตอนการอัปเดตคือ:

1. แก้ไขโค้ดในโปรเจกต์ Library
2. เปลี่ยนหมายเลขใน getLibraryVersion()
3. บันทึกโครงการ
4. สร้างเวอร์ชันใหม่
5. เปิดโปรเจกต์ Web App หลัก
6. ไปที่หัวข้อ Library
7. เปลี่ยนเป็นเวอร์ชันล่าสุด
8. กดบันทึก
9. ทดสอบระบบอีกครั้ง
10. ทำให้ Web App ใช้งานได้เป็นเวอร์ชันใหม่

สำหรับระบบที่เปิดใช้งานจริง ควรเลือกเวอร์ชันที่ระบุชัดเจน ไม่ควรใช้เวอร์ชันสำหรับพัฒนา เพราะโค้ดอาจเปลี่ยนโดยไม่ตั้งใจ

---

ปัญหาที่พบบ่อยและวิธีแก้ไข

1. ขึ้นข้อความ PinPadLib is not defined

สาเหตุ:

• ยังไม่ได้เพิ่ม Library
• ตัวระบุ Library ไม่ตรงกับชื่อในโค้ด
• ยังไม่ได้บันทึกโปรเจกต์

วิธีแก้:

• ตรวจสอบว่าติดตั้ง Library แล้ว
• ตั้งตัวระบุเป็น PinPadLib
• บันทึกและเปิดโปรเจกต์ใหม่

2. ขึ้นข้อความว่าไม่พบฟังก์ชัน verifyPin

สาเหตุ:

• เลือกเวอร์ชัน Library เก่า
• เวอร์ชันนั้นยังไม่มีฟังก์ชัน verifyPin
• ตั้งชื่อฟังก์ชันไม่ตรงกัน

วิธีแก้:

• สร้างเวอร์ชันใหม่ของ Library
• เปลี่ยนเวอร์ชันในโปรเจกต์หลัก
• ตรวจสอบตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

3. กด PIN ถูกต้องแต่ระบบแจ้งว่าผิด

สาเหตุ:

• จำนวนหลักในหน้าเว็บไม่ตรงกับ Library
• ค่า ADMIN_PIN มีช่องว่าง
• ตั้งชื่อ Script Property ผิด
• PIN ที่ขึ้นต้นด้วยศูนย์ถูกบันทึกไม่ครบ

วิธีแก้:

• ตรวจสอบ PIN_LENGTH
• ตรวจสอบจำนวนหลักใน verifyPin()
• ตรวจสอบชื่อ ADMIN_PIN
• ลบค่าเดิมแล้วบันทึก PIN ใหม่เป็นข้อความ

4. ระบบแจ้งว่ายังไม่ได้ตั้งค่า ADMIN_PIN

สาเหตุ:    ยังไม่มี Script Property ชื่อ ADMIN_PIN

วิธีแก้:    เข้าไปที่การตั้งค่าโปรเจกต์ แล้วเพิ่ม:

ADMIN_PIN = 123456

5. แก้ Library แล้วโปรเจกต์หลักไม่เปลี่ยน

สาเหตุ:    โปรเจกต์หลักยังใช้ Library เวอร์ชันเดิม

วิธีแก้:    สร้าง Library เวอร์ชันใหม่ แล้วกลับไปเปลี่ยนเวอร์ชันในโปรเจกต์หลัก

---

ข้อแนะนำด้านความปลอดภัย

แม้ว่าการตรวจสอบ PIN ที่ Code.gs จะปลอดภัยกว่าการตรวจสอบใน JavaScript แต่ควรปฏิบัติตามคำแนะนำเพิ่มเติมดังนี้

• เปลี่ยน PIN เริ่มต้น 123456 ก่อนใช้งานจริง
• ไม่เขียน PIN ไว้ใน index.html หรือ javascript.html
• ไม่ส่ง PIN ที่ถูกต้องกลับไปยังหน้าเว็บ
• ไม่แสดง PIN ในข้อความแจ้งข้อผิดพลาด
• จำกัดจำนวนครั้งที่ผู้ใช้สามารถลอง PIN
• เพิ่มการหน่วงเวลาชั่วคราวเมื่อกดผิดหลายครั้ง
• เปลี่ยน PIN เป็นระยะ
• จำกัดสิทธิ์ผู้ที่สามารถแก้ไขโปรเจกต์ Apps Script
• ตรวจสอบสิทธิ์ซ้ำในฟังก์ชันสำคัญของฝั่งเซิร์ฟเวอร์
• ไม่ควรใช้การซ่อนหน้า Admin เพียงอย่างเดียวเป็นระบบรักษาความปลอดภัย

ระบบ PIN เหมาะสำหรับการควบคุมการเข้าถึงใน Web App ภายในหรือระบบทั่วไป หากเป็นระบบที่มีข้อมูลสำคัญมาก เช่น ข้อมูลส่วนบุคคล ข้อมูลการเงิน หรือข้อมูลสุขภาพ ควรใช้ระบบยืนยันตัวตนด้วยบัญชี Google หรือระบบสิทธิ์ผู้ใช้งานเพิ่มเติม

---

ประโยชน์ของการสร้างเป็น Library

การแยกฟังก์ชันตรวจสอบ PIN เป็น Library ช่วยให้:

• ไม่ต้องเขียนโค้ดตรวจสอบ PIN ซ้ำทุกโปรเจกต์
• แก้ไขระบบตรวจสอบจากจุดเดียว
• กำหนด PIN แยกสำหรับแต่ละระบบได้
• ควบคุมเวอร์ชันของโค้ดได้
• ลดความผิดพลาดจากการคัดลอกโค้ด
• นำไปใช้กับระบบใหม่ได้รวดเร็ว
• ทำให้โครงสร้างโปรเจกต์เป็นระเบียบ
• เหมาะสำหรับผู้พัฒนาที่มี Web App หลายระบบ

ตัวอย่างเช่น เราสามารถใช้ PinPadLib ตัวเดียวกับระบบแจ้งการลา ระบบบันทึกคะแนน ระบบรายงานเวร และระบบจัดการเอกสาร แต่กำหนด ADMIN_PIN ของแต่ละระบบแตกต่างกันได้

---

สรุป

แป้นกด PIN แบบตัวเลขช่วยให้การเข้าสู่ระบบผู้ดูแลใช้งานง่ายขึ้น โดยเฉพาะบนโทรศัพท์มือถือ เมื่อนำส่วนตรวจสอบ PIN มาสร้างเป็น Google Apps Script Library ก็จะสามารถนำไปใช้ซ้ำกับ Web App หลายระบบได้อย่างสะดวก

โครงสร้างสำคัญมีเพียง 3 ขั้นตอน:

หน้าเว็บรับ PIN
       ↓
Code.gs รับคำขอ
       ↓
Library ตรวจสอบ PIN

วิธีนี้ช่วยแยกหน้าตา การรับข้อมูล และการตรวจสอบออกจากกันอย่างชัดเจน ทำให้ระบบดูแลรักษาง่ายและพร้อมต่อยอดในอนาคต

เอกสารประกอบเพิ่มเติม:

• คู่มือ Google Apps Script Libraries

• คู่มือ Properties Service

• คู่มือ HTML Service

#GoogleAppsScript #GAS #GoogleSheet #WebApp #AppsScriptLibrary #NumericPIN #PINLogin #แป้นกดPIN #สอนเขียนโปรแกรม #ระบบหลังบ้าน #ระบบผู้ดูแล #ครูกฤตัชญ์AI