ใช้แค่ HTML, CSS, JavaScript และ API ก็ทำหน้าเว็บ Login ได้ พื้นฐานที่นักพัฒนาเว็บต้องรู้

บทความนี้จะเป็นพื้นฐานสำหรับนักพัฒนา Web Application นะครับ เพราะจะเป็นการสร้างหน้า Login โดยใช้แค่ HTML, CSS และ JavaScript บนพื้นฐานของ Bootstrap 5 โดยใช้วิธีการ Login ผ่านการเรียกใช้ API ครับ

แปะ clip ครับ ดูตาม clip หรืออ่านตามบทความได้ก็ได้ครับ 😃

API ที่ใช้คือตัวจำลองจากเว็บของผมเองนะครับ MeCallAPI.com ถ้าอยากลองใช้ API สำหรับจำลองการทำ CRUD หรือ Login/Authentication ก็เข้าไปดูรายละเอียดได้เลยครับ

ส่วนผลลัพธ์ของบทความนี้ มีตัวอย่างให้ลองทดสอบได้ที่ https://www.mecallapi.com/login/

Software Installation

มี IDE (แนะนำ VS Code) และ Web Browser (แนะนำ Chrome) ก็เริ่มได้เลยครับ

Let’s Code! (HTML and CSS)

เริ่มจากการสร้างไฟล์ HTML เอกสารที่มีการใส่คำสั่ง HTML ต่าง ๆ ไว้ เพื่อจัดวางเนื้อหาต่าง ๆ ในรูปแบบข้อความ รูปภาพ ปุ่ม และอื่น ๆ ที่สามารถเรียกดูผ่าน Web Browser ได้

สร้างไฟล์ login.html สำหรับหน้า login โดยจะมีการ link กับไฟล์อื่น ๆ ดังนี้

• Bootstrap 5 เป็น framework สำหรับทำหน้า web แบบ responsive (บรรทัดที่ 9 และ 36)
• Sweetalert ใช้ทำ popup ที่ดูดีและง่าย ๆ ด้วย JavaScript (บรรทัดที่ 35)
• login.css สำหรับกำหนด (CSS) ที่ใช้ปรับแต่งการแสดงผลเพิ่มเติมจากใช้ Bootstrap (บรรทัดที่ 12)
• login.js สำหรับเขียน JavaScript ที่ใช้ในหน้า login.html เพื่อเรียก API สำหรับ login (บรรทัดที่ 34)

สร้างไฟล์ login.css

ผลลัพธ์หน้า login.html ที่เปิดบน Web browser

สร้างไฟล์ index.html สำหรับหน้า index ที่สุดท้ายจะต้องให้เข้าถึงได้เฉพาะผู้ใช้ที่ผ่านการ login เท่านั้น โดยจะมีการ link กับไฟล์อื่น ๆ ดังนี้

• Bootstrap 5 (บรรทัดที่ 9 และ 46)
• index.css ใช้ปรับแต่งการแสดงผลเพิ่มเติมจากใช้ Bootstrap (บรรทัดที่ 13)
• index.js สำหรับเขียน JavaScript ที่ใช้ในหน้า index.html เพื่อเรียก API แสดงข้อมูลผู้ใช้งาน (บรรทัดที่ 45)

สร้างไฟล์ index.css

ผลลัพธ์หน้า index.html

Login ลงชื่อเข้าใช้ (JavaScript)

สร้างไฟล์ login.js เพื่อทำการเรียก API สำหรับการ login ด้วย username และ password ด้วยมาตรฐาน JWT (JSON Web Token)
ใช้ API URL: https://www.mecallapi.com/api/login
Method: POST
ตัวอย่าง Body (JSON):

{
    "username": "karn.yong@mecallapi.com",    
    "password": "mecallapi"
}

ตัวอย่างผลลัพธ์ Response (JSON) โดยตัวค่าของ accessToken เป็นตัวที่ใช้ยืนยันกับ API ว่าได้มีการ login แล้ว

{
    "status": "ok",
    "message": "Logged in",
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cC..."
}

การอ่านข้อมูลใน JavaScript นี้ จะใช้เทคนิค AJAX (Asynchronous JavaScript And XML) แลกเปลี่ยนข้อมูลกับ API โดยที่ไม่ต้อง refresh หน้าจอ

• โดย script ที่บรรทัด 1–4 จะเป็นการตรวจสอบค่าของตัวแปร jwt ที่อยู่ใน localStorage หรือไม่ (localStorage คือการเก็บค่าไว้ที่ Web browser) โดยเบื้องต้นสำหรับตัวอย่างนี้จะแค่ตรวจสอบว่าถ้าตัวแปร jwt มีค่า จะโหลดหน้า index.html ขึ้นมาแทน
• เราจะใช้ XMLHttpRequest เป็นตัวเรียก API เพื่อส่ง username และ password ไปให้ตัว API ตรวจสอบว่าความถูกต้องในการ login และส่งผลลัพธ์กลับมาแสดงด้วย popup (Sweetalert) ว่า login ผ่านหรือไม่ (บรรทัดที่ 10 เป็นต้นไป)
• บรรทัดที่ 22 จะเป็นการนำค่าจาก Response ที่เป็น accessToken (ใช้ยืนยันกับ API ว่า login แล้ว) เก็บเข้า localStorage ด้วยตัวแปร jwt

เปิดหน้า login.html บน Web browser จากนั้นใส่
username: karn.yong@mecallapi.com
password: mecallapi
เพื่อทำการ login (สามารถดู username อื่น ๆ ได้ที่ MeCallAPI.com โดยใช้ password เดียวกันคือ mecallapi)

User แสดงข้อมูลผู้ใช้ที่ login เข้ามา (JavaScript)

สร้างไฟล์ index.js เพื่อทำการเรียก API สำหรับการแสดงข้อมูลผู้ใช้ที่ login เข้ามา โดยระบุ
ใช้ API URL: https://www.mecallapi.com/api/auth/user
Method: GET
โดยต้องมีการแนบ accessToken ที่ได้จากการ login ไว้ที่ header (Authorization: Bearer) ของ Request ที่เรียก API ด้วยถึงจะสามารถได้ผลลัพธ์ของผู้ใช้คนนั้นกลับมาได้

• โดย script ที่บรรทัด 1–4 จะเป็นการตรวจสอบค่าของตัวแปร jwt ที่อยู่ใน localStorage ว่ามีค่าหรือไม่ ถ้าไม่มีให้โหลดหน้า login.html ขึ้นมาแทน
• เราจะใช้ XMLHttpRequest เป็นตัวเรียก API โดยแนบค่าของ jwt ที่ header (Authorization: Bearer) ของ Request ที่เรียก API ด้วย เพื่อได้ผลลัพธ์กลับมาเป็นข้อมูลผู้ใช้ มาแสดงบนหน้า index.html (บรรทัดที่ 8 เป็นต้นไป)
• บรรทัดที่ 27 เป็นฟังก์ชัน Logout ที่เมื่อถูกเรียกจะลบค่า jwt ใน localStorage ออกไป และกลับไปที่หน้า login.html

จบแล้วนะครับสำหรับบทความ หวังว่าจะมีประโยชน์สำหรับผู้ที่อยากรู้พื้นฐานการสร้างหน้าเว็บสำหรับการ login/authentication โดยใช้ HTML, CSS, JavaScript และการเรียก API นะครับ แล้วพบกันใหม่บทความหน้าครับ

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต