วิธีตั้งค่า Passwordless Authentication ด้วย WebAuthn บนเว็บไซต์ของคุณอย่างปลอดภัย

Overview — Overview

การยืนยันตัวตนแบบ Passwordless ด้วย WebAuthn ช่วยลดความเสี่ยงจากรหัสผ่านที่อาจถูกขโมยหรือคาดเดาได้  โดยใช้ข้อมูลชีวมิติหรืออุปกรณ์ฮาร์ดแวร์เป็นกุญแจหลัก  บทความนี้จะสรุปวิธีตั้งค่าให้เว็บของคุณรองรับการล็อกอินแบบไม่มีรหัสผ่านอย่างปลอดภัย

ความต้องการเบื้องต้น — Prerequisites

เพื่อเริ่มใช้ WebAuthn เราต้องเตรียมเครื่องมือและสภาพแวดล้อมดังต่อไปนี้

• HTTPS: เว็บต้องให้บริการผ่านโปรโตคอลที่เข้ารหัส
• Browser ที่รองรับ: Chrome, Edge, Firefox หรือ Safari เวอร์ชันล่าสุด
• Server Framework: Node.js, Python, Java ฯลฯ ที่มีไลบรารี WebAuthn

**Tip: หากยังไม่มีใบรับรอง SSL ให้ใช้บริการ Let’s Encrypt ฟรีเพื่อเปิด HTTPS ก่อน

การทำงานของ WebAuthn — How It Works

WebAuthn ทำงานเป็นกระบวนการสองขั้นตอน  คือ Registration (ลงทะเบียนอุปกรณ์) และ Authentication (ยืนยันตัวตน)

• ในขั้นตอน Registration ผู้ใช้จะสร้างคู่กุญแจสาธารณะ/ส่วนตัวบนอุปกรณ์ของตน
• คีย์สาธารณะจะถูกส่งไปบันทึกที่เซิร์ฟเวอร์ ส่วนคีย์ส่วนตัวจะเก็บไว้ใน Secure Enclave หรือ TPM ของเครื่อง

เมื่อผู้ใช้เข้าสู่ระบบ ระบบจะส่ง challenge ไปยังเบราว์เซอร์  แล้วอุปกรณ์จะลงลายมือชื่อด้วยคีย์ส่วนตัวเพื่อพิสูจน์ว่าตนเป็นเจ้าของกุญแจนั้น

ขั้นตอนติดตั้ง — Step‑By‑Step

1. เตรียมโครงสร้างฐานข้อมูล

• สร้างตาราง `webauthn_credentials` เก็บ `user_id`, `credential_id`, `public_key`, `sign_count`, `transports`
• บันทึกค่า `challenge` ชั่วคราวใน session ของผู้ใช้

2. ตั้งค่า Server‑Side Library

• เลือกไลบรารีที่รองรับ WebAuthn เช่น @simplewebauthn/server (Node.js) หรือ webauthn‑server** (Python)
• กำหนด RP ID (domain ของเว็บ) และ RP Name

3. สร้าง API สำหรับ Registration

• `POST /register/options` ส่ง PublicKeyCredentialCreationOptions ไปยังคลไอเอนท์
• ค่าที่ต้องส่ง: `rp`, `user`, `challenge`, `pubKeyCredParams`, `authenticatorSelection`, `timeout`

4. ดำเนินการ Registration บนฝั่ง Client

```javascript navigator.credentials.create({ publicKey }) .then(cred => { // แปลงเป็น JSON แล้ว POST ไป /register/verify }) .catch(err => console.error(err)); ```

• ตรวจสอบ `attestationObject` และ `clientDataJSON` ที่ได้รับจากอุปกรณ์

5. บันทึก Credential ลง DB

• เก็บ `credentialId`, `publicKey`, `signCount` พร้อมเชื่อมกับผู้ใช้ที่ลงทะเบียน

6. สร้าง API สำหรับ Authentication

• `POST /login/options` ส่ง PublicKeyCredentialRequestOptions ให้คลไอเอนท์
• ค่าที่ต้องส่ง: `challenge`, `allowCredentials` (list ของ `credentialId` ที่บันทึกไว้)

7. ดำเนินการ Authentication บนฝั่ง Client

```javascript navigator.credentials.get({ publicKey }) .then(assertion => { // ส่ง assertion ไป /login/verify }) .catch(err => console.error(err)); ```

• ตรวจสอบ `authenticatorData`, `clientDataJSON`, `signature` กับคีย์สาธารณะที่บันทึกไว้

8. อัปเดต signCount

• หากการตรวจสอบสำเร็จ ให้อัปเดตค่า `signCount` ในฐานข้อมูลเพื่อป้องกัน replay attacks

เคล็ดลับด้านความปลอดภัย — Security Tips

Tip: ควรเปิดใช้ Attestation Conveyance Preference** เป็น `"direct"` หรือ `"enterprise"` เพื่อให้เซิร์ฟเวอร์รับข้อมูลการตรวจสอบจากผู้ผลิตอุปกรณ์

• ใช้ SameSite=Lax และ HttpOnly กับคุกกี้ session
• ตรวจสอบ `origin` ที่ส่งมาจากคลไอเอนท์ว่าเป็นโดเมนของคุณเท่านั้น
• ตั้งค่า timeout ของ challenge ไม่เกิน 60 วินาที เพื่อลดโอกาสโจมตีแบบ brute‑force

เปรียบเทียบ WebAuthn กับ Password — Comparison

สรุป — Summary

• WebAuthn ให้วิธีล็อกอินแบบไม่มีรหัสผ่านที่ปลอดภัยและใช้งานง่าย
• ขั้นตอนหลักประกอบด้วยการเตรียม HTTPS, ตั้งค่า server‑side library, สร้าง API สำหรับ registration & authentication, และบันทึก credential ลงฐานข้อมูล
• ควรเปิดใช้ HTTPS, ตรวจสอบ `origin`, ตั้งค่า timeout, และอัปเดต `signCount` เพื่อเพิ่มความมั่นใจในการป้องกันการโจมตี

สิ่งที่ควรจำ

• ใช้ HTTPS เสมอ
• เก็บคีย์สาธารณะในฐานข้อมูล, คีย์ส่วนตัวไม่ออกจากอุปกรณ์ผู้ใช้
• ตรวจสอบ challenge, origin และ signCount ทุกครั้งที่ทำ authentication

นำขั้นตอนเหล่านี้ไปปรับใช้กับเว็บของคุณ แล้วคุณจะได้ระบบล็อกอินแบบ Passwordless ที่ปลอดภัยและเป็นมิตรต่อผู้ใช้.