สร้างหน้า Login และระบบ Authentication ด้วย FirebaseUI
FirebaseUI คือ javascript library หรือพูดง่ายๆ คือเป็นหน้า UI สำเร็จรูปสำหรับหน้าเข้าสู่ระบบ มีทั้งสำหรับ mobile และ web โดยในบทความนี้จะพูดถึงการทำหน้า UI โดยใช้ FirebaseUI สำหรับ Web ดังแสดงตามภาพด้านบนค่ะ
*บทความนี้เหมาะสำหรับผู้ที่มีความรู้พื้นฐานเรื่อง Firebase Hosting และ Firebase Authentication โดยศึกษาได้จาก Hosting ฟรี! กับ Firebase Hosting และ ทำระบบ Register และ Login ง่ายๆ กับ Firebase
เดาว่าทุกคนคงจะมี folder โปรเจ็ค firebase ของตัวเองอยู่แล้วนะคะ เพราะฉะนั้นไปเริ่มกันเลยค่ะ
ไฟล์ที่ต้องเตรียมใน folder project
1. ไฟล์ index.html
2. ไฟล์ loggedIn.html (หลังจาก log in สำเร็จ ให้ redirect ไปยังหน้านี้)
— — — — — — — — — —
ขั้นตอน
1. เปิดไฟล์ index.html
2. firebaseUI ด้วย CDN (จะเลือกลงโดยใช้ npm หรือ Bower ก็ได้ค่ะ โดยศึกษาเพิ่มเติมได้จาก ref. link ใต้โพส) โดย Include script และ css file ใน <head> tag
<script src=”https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.js"></script>
<link type=”text/css” rel=”stylesheet” href=”https://www.gstatic.com/firebasejs/ui/4.3.0/firebase-ui-auth.css" />
3. include script ตามภาพ ใน <head> tag
โดยจากโค้ดด้านบนหมายความว่า เรา config ไว้ว่าต้องการให้มีปุ่ม signin ด้วยกัน 7 รูปแบบ หลังจาก ประกาศตัวแปล ui ขึ้นมาเพื่อเป็น method ในการเข้าสู่ระบบ หลังจากนั้นให้ ui แสดงผลตามที่เรา config และเริ่มใช้งานระบบ firebase authentication ได้
โดยในการแสดงผลใน <body> tag เราจะต้องอ้างอิง id ชื่อเดียวกันกับที่ระบุไว้ใน ui.start นั่นก็คือ #firebaseui-auth-container ดังภาพ
4. run ใน web browser
โดยใช้คำสั่ง $ firebase serve จะได้หน้าตาดังภาพค่ะ
5. เปิดใช้งานการเข้าสู่ระบบใน firebase console
หลังจากเราได้หน้าตา UI สำเร็จรูปแบบนี้ออกมาแล้ว แต่การที่จะใช้งานเข้าสู่ระบบได้จริงนั้น เราต้องไปเปิดใช้งานการเข้าสู่ระบบใน firebase console กันก่อนค่ะ โดยเข้าไปที่
Authentication > วิธีการลงชื่อเข้าใช้ หลังจากนั่นให้กดเปิดใช้งานตัวเลือกท่ีต้องการ
6. ทดลองใช้งาน
หลังจากเปิดใช้งานวิธีการลงชื่อเข้าใช้แล้ว เราก็จะสามารถเข้าสู่ระบบได้จริง โดยทดลองคลิกที่ปุ่ม Sign in with Google จะมีหน้าสำหรับเลือก email ในการ login ขึ้นมาให้
หลังจาก log in สำเร็จ ก็จะไปยังหน้า loggedIn.html
จากตัวอย่างโค้ดอธิบายได้ว่า
ตรวจสอบสถานะของ user ว่าได้ทำการเข้าสู่ระบบสำเร็จจริงหรือไม่
ถ้าจริง — แสดงข้อความว่า “You are logged in!” พร้อมแสดงปุ่ม Sign out
ถ้าไม่จริง — แสดงข้อความว่า “You are logged out!” พร้อมแสดงปุ่ม Go back to the main page (ทดลองได้โดยการกดปุ่ม Sign out ซึ่งก็คือจะใช้ method firebase.auth.signOut() นั่นเอง)
— — — — — — — — — —
Done!!
ทีนี้เราก็ได้หน้าเว็บในการเข้าสู่ระบบมาอย่างง่ายๆ แล้วค่ะ ในบทความนี้จะยกตัวอย่างการเข้าสู่ระบบด้วย google เพียงวิธีเดียวก่อน ส่วนวิธีอื่นๆ นั้น บางอย่างก็ต้องมีการตั้งค่าเพิ่มเติมค่ะ เช่น การเข้าสู่ระบบด้วย Facebook ต้องมีการระบุ App ID และ App Secret ก่อน โดยเราต้องเอามาจาก https://developers.facebook.com/ จะเห็นได้ว่ามีหลายขั้นตอน เลยจะขอแยกไปอีกบทความหนึ่งเลยค่ะ สำหรับรูปแบบอื่นๆ สามารถติดตามได้เรื่อยๆ จะพยายามทยอยลงให้ครบค่ะ ฝากติดตามด้วยนะคะ
สำหรับใครมีข้อสงสัยหรือไม่เข้าใจส่วนไหน สามารถ comment ไว้ด้านล่างได้เลยค่ะ
สำหรับวันนี้ลาไปก่อน สวัสดีค่ะ :)
