Home / Firebase  / สร้าง Web App สำหรับเข้าระบบ Authentication ด้วย Firebase

สร้าง Web App สำหรับเข้าระบบ Authentication ด้วย Firebase

บทเรียนสำหรับสาย Web App ที่ชื่นชอบ JavaScript สำหรับการใช้ระบบ Authentication ของ Firebase อย่างง่าย

บทเรียนก่อนหน้านี้: Labs: การใช้งาน Firebase Hosting และ Database สร้างเว็บไซต์

เป็นการแนะนำขึ้นตอนการ Init ตัว Firebase Project ของเรามาแก้ไขแล้วสร้าง Deploy ใหม่ขึ้นสู่ระบบ โดยใช้ Material Design Lite จากเว็บไซต์ http://getmdl.io เป็น UI สำหรับออกแบบ ในตัวอย่างนี้เช่นกันเราจะทำการสร้าง App ของ Firebase ขึ้นมาใหม่ แล้วให้ init ส่วนของ Hosting และ Database อีกครั้ง

เตรียม Project:

เลือกแค่ Database และ Hosting

ทดสอบให้รันคำสั่ง

ทำการเปลี่ยน Rule ให้ของ Database ให้เรียบร้อย แต่เพียงแค่ว่ารอบนี้เราจะใช้งาน Authentication ให้เราเข้าไปเปิดระบบของ Authentication ส่วนของ Email ให้เรียบร้อย

ต่อมาให้เราเปิดไฟล์ public/index.html ในเครื่องเราให้พร้อม ทำการเคลียร์ไฟล์ index.html ให้  clean ที่สุด แล้วเพิ่ม mdl เข้าไปให้ทำงานส่วนของ css และ js

ภายใต้ Tag ของ <body> ก่อนปิด </body> ให้แทรก code ส่วนของการออกแบบหน้าจอ Login เข้าไปดังนี้:

ลองทดสอบผลลัพธ์เล็กน้อย โดยการไปที่ http://localhost:5000 จะเห็นผลลัพธ์ดังนี้

ส่วนของการทำงาน Action ของการกดปุ่ม Submit จะให้ javascript มา Control อีกทีเพื่อส่งข้อมูลไปตรวจสอบกับ Firebase ดังนั้นส่วนของ Javascript จะเป็นดังนี้

ไปที่เว็บไซต์ https://console.firebase.google.com กดที่ ไอคอนรูปเฟืองหรือ Setting ทำการ Add Application ใหม่

โดยให้เราเลือก Web

ทำการ Copy Script ที่ได้ไปวางก่อนปิด Body

ดังนั้นก่อนปิด </body> ของเราจะเป็นดังนี้:

เมื่อตั้งค่าเป็นที่เรียบร้อยแล้วก็ได้เวลา Customise ส่วนของการเข้าระบบให้แทรก Javascript ต่อไปนี้ก่อนปิด </script> ข้างบน

หลังขั้นตอนนี้ให้สร้างหน้า main.html ขึ้นมาเปล่าๆ เพื่อให้เวลาเข้าระบบเสร็จ redirect ไปหน้านั้น

การทำงานหลักๆคือ เมื่อกดปุ่ม sign-in จะมีการเรียกตรวจสอบ Field ของ Textbox ว่าว่างหรือมีข้อมูลยาวตามที่ตกลงหรือไม่ หลังจากนั้น การทำงานเข้าระบบจริงๆ คือส่วนนี้:

การส่ง email และ password ผ่าน Method ที่ชื่อ signInWithEmailAndPassword() ก็จะเป็นการเข้าระบบได้อย่างสมบูรณ์เราสามารถทดสอบได้โดยการไปเพิ่ม ข้อมูลบน Firebase หรือสร้างหน้า Register.html ขึ้นมารองรับ

ไฟล์หน้า Register.html ให้ทำการออกแบบดังนี้:

ส่วนของ Javascript จะแตกต่างหน่อยคือเรียก Method ของ firebase คนละตัวการใช้งานคือ

ดังนั้นหากทำการทดสอบจะเห็นว่า เราสามารถ Register เข้าไปใหม่ได้

ลองกรอกข้อมูลดูจะมี Console Log บอกหน้าเว็บไซต์ ส่วนข้อมูลจะปรากฏข้างบนระบบ firebase ดังนี้:

ดังนั้นๆ เราจะได้ระบบ Firebase Authentication คร่าวๆ มาใช้งานแล้ว ขั้นตอนต่อไปไปคือ การเพิ่มข้อมูลเข้าไปในระบบของ Firebase ผ่าน Real-Time Database พร้อมอัพโหลดรูปเข้า Storage ในบทความต่อไป:

ระหว่างนี้จะอัพเด็ตทั้งฝั่ง Android ควบคู่กันไปด้วยนะครับ

Comments

daydevthailand@gmail.com

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

Review overview