Home / Developer  / Google Developers  / Labs: การสร้างหน้าเว็บ Login ด้วย Firebase Authentication

Labs: การสร้างหน้าเว็บ Login ด้วย Firebase Authentication

ตัวอย่างบทเรียนนี้คือ Labs สำหรับการสร้างหน้า Login และ Signup บนเว็บไซต์ผ่านระบบ Firebase Authentication ของ Google สำหรับผู้เริ่มต้น

สิ่งที่จำเป็นต้องศึกษาก่อนจะเริ่มบทเรียนนี้: Labs: การใช้งาน Firebase Hosting และ Database สร้างเว็บไซต์

ซึ่งเราได้ศึกษาส่วนของ ระบบ Database และ Hosting ไปแล้วรอบนี้เราจะศึกษาส่วนของการเข้าสู่ระบบหรือ Authentication ที่ทาง Firebase มีมาให้

เมื่อตั้งค่าจากบทความLabs: การใช้งาน Firebase Hosting และ Database สร้างเว็บไซต์ พร้อมแล้วให้ทำการรันคำสั่งต่อไปนี้:

แล้วสร้าง Local Testing ขึ้นมาก่อนโดยพิมพ์

เพื่อเปิดหน้าจอทดสอบผ่าน http://localhost:5000

ไปที่ Authentication ใน Console ของ Firebase คลิกแล้วเลือกที่ Web Setup

ระบบจะมีการสร้างชุด JavaScript SDK ให้เรา Copy ไปใช้งานได้

แก้ไขไฟล์ index.html ที่อยู่ใน Folder “public” ในเครื่องเราดังนี้:

เราจะได้ Demo หน้าเว็บไซต์พร้อม Css ของ Material Design Lite ดังภาพ:

สร้าง Form สำหรับสมัครสมาชิก และแสดงผลลัพธ์ขึ้นมาโดยแทรกที่ใต้บรรทัด

ด้วยชุดคำสั่ง HTML ดังนี้

เราจะได้ ดีไซน์ หน้า Form ของเราดังนี้ (ปรับแต่งกันตามสบายนะครับ พอดีผมเบื่อ BootStrap)

ต่อมาให้เราประกาศชุด JavaScript ก่อนปิด </body> คือส่วนของ Web Setup ตัว Firebase ลงไป:

ใน Script ข้างต้นเราต้องเพิ่ม Function สำหรับเข้าระบบเอง เราจะเพิ่มเติม Code ของเราใต้บรรทัด

ก่อนอื่นให้เราไปเปิดใช้งานระบบ Authentication ใน console ของ firebase ก่อนดังนี้:

เปิดระบบ Email ให้เรียบร้อย

กลับมาที่ Code JavaScript เขียนเพิ่มใต้ //Your Code Here ดังนี้:

เมื่อมีการคลิกที่ปุ่ม id ชื่อ sign-in จะมีการเรียกฟังก์ชัน handleSignup() มีหน้าที่คือเช็คความยาวของ password หากไม่ secure และตรวจสอบ Email ที่เรากรอก

ต่อมาคือฟังก์ชันสำคัญของ Firebase นั่นคือ ฟังก์ชัน firebase.auth() ที่จะทำให้เราสมัครสมาชิกและเข้าระบบได้อัตโนมัติทันที:

โดยจะมี div ที่ชื่อ success ไว้แสดง Log แบบ Console ว่ามีปัญหาอะไรหรือเปล่า ซึ่งจริงๆ เราสามารถดูผ่าน console ของ Chrome Inspector ได้

ลองทดสอบกรอกข้อมูลของเราดูครับ:

เมื่อกด Submit จะปรากฏ Console Log ว่าข้อมูลเข้าระบบสำเร็จแล้ว ทีนี้ก็ไปดูใน Authentication บน Firebase ครับ ก็จะพบว่าข้อมูลเราไปปรากฏในระบบแล้ว

ภาพรวมไฟล์ index.html จะเป็นดังนี้:

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

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: