ทำระบบ Register และ Login ง่ายๆ กับ Firebase

รายการที่ต้องเตรียม

1. หน้า Register *ทุกๆ Text Field ต้องระบุ id ไว้เสมอ

2. หน้า Login

3. ไฟล์ .js สำหรับเขียนโค้ด JavaScript (หรือถ้าใครอยากจะแทรกไว้ในหน้า html เลยก็ได้ค่ะ)

เอาล่ะ เมื่อเรามีฟอร์มสำหรับลงทะเบียนและเข้าสู่ระบบเรียบร้อยแล้ว เราก็มาเริ่มสร้าง function กันเลยดีกว่าค่ะ โดยเราจะเริ่มจากส่วน Register กันก่อนนะคะ ซึ่งจะเป็นการบันทึกข้อมูลการลงทะเบียนของ user ลง Database ของเรา ขั้นแรกเราก็ต้องดูก่อนว่ามีค่าอะไรบ้างที่เราต้องเก็บ อย่างในตัวอย่างของอายก็จะมีอยู่ 8 ค่า นั่นก็คือ

• First Name
• Last Name
• Email
• Device Serial Number
• Password
• Confirm password
• Phone Number
• WhatsApp

(เยอะนิดนึงเนอะ 555)

เอาล่ะ เมื่อเรารู้แล้วว่าข้อมูลที่เราต้องเก็บมีอะไรบ้าง จากนั้นเราก็จะมาเริ่มสร้างฟังก์ชันบันทึกข้อมูลลง Database กันก่อนโดยสร้างไฟล์ .js มาใหม่หรือจะแทรกโคด JavaScript ไปในหน้า html เลยก็ได้โดยให้อยู่ใน <script> tag

สร้างชื่อได้ตามใจชอบเลยนะคะ ตัวอย่างของอายมีชื่อว่า saveData เป็นฟังก์ชันที่สร้างขึ้นมาเพื่อประกาศตัวแปรก่อนว่ามีอะไรบ้างที่เราจะทำการบันทึกลง Database และใช้คำสั่ง insertData เพื่อเป็นการบอกว่าเราจะทำการบันทึกค่าเหล่านี้ลงไปนะ (แต่ยังไม่ทำการบันทึก) ซึ่งฟังก์ชันนี้จะถูกเรียกใช้ก็ต่อเมื่อ user คลิกที่ปุ่ม Register โดยการแทรกคำสั่ง onclick ลงไปที่ปุ่ม Register ของเรา

จากนั้นสร้างฟังก์ชัน insertData ซึ่งเป็นฟังก์ชันที่จะทำการบันทึกข้อมูลลง Database จริงๆ

การทำงานก็คือเมื่อ user คลิกที่ปุ่ม Register ระบบก็จะเรียกใช้งานฟังก์ชัน saveData หลังจากอ่านค่าต่างๆ ในฟังก์ชันนี้เสร็จแล้วก็จะไปเรียกใช้งานฟังก์ชัน insertData ต่อทันที โดยฟังก์ชัน insertData จะเริ่มด้วยการระบุไอดีของข้อมูลที่เราต้องการบันทึกลงไปก่อน ซึ่งของอายก็คือ 8 ค่าที่กล่าวไปข้างต้น จากนั้นตรง

var firebaseRef = firebase.database().ref("users");

ตรงนี้หมายความว่าเราจะประกาศให้ firebaseRef เป็นตัวแปรในการอ้างอิงถึงตำแหน่งที่เราต้องการบันทึกลงไปใน Database โดยในตัวอย่างคืออายจะทำการบันทึกข้อมูลทุกๆ ค่า ลงไปที่หัวข้อ users (หรือที่เขาเรียกกันว่า child)

หลังจากนั้นใช้คำสั่ง

firebaseRef.push

แปลตรงตัวจากคำสั่งก็คือ ดันข้อมูลลงไปใน Database ซะ ก็คือบันทึกข้อมูลที่เราต้องการลงไปใน Database ให้หมดดด หากเราต้องการบันทึกข้อมูลอะไรลงไปก็ใส่เข้าไปภายในคำสั่งนี้ได้ตามตัวอย่างเลยค่ะ หลังจากนั้นใช้คำสั่ง

console.log("Insert Success");

เพื่อเช็คว่าทำการบันทึกข้อมูลสำเร็จหรือไม่

เมื่อทำการบันทึกข้อมูลลง Database เรียบร้อยแล้ว ใน console ก็จะแสดงข้อความว่า “Insert Success” แบบนี้

จากนั้นไปเช็คดูใน Firebase ว่าข้อมูลเข้ารึเปล่า สำหรับใครที่ขึ้น

Error: PERMISSION_DENIED

ให้เข้าไปแก้ไขกฏในแท็บ Database ให้เป็นแบบนี้ก่อนนะคะ ซึ่งโค้ดนี้หมายความว่าไม่ว่าใครก็ตามที่ทำการคลิกปุ่ม Register ก็จะสามารถบันทึกข้อมูลลง Database ได้ (ส่วนใครที่ต้องการให้จำกัดสิทธิ์ เดี๋ยวค่อยมาว่าเรื่องการจำกัดสิทธิ์การเข้าถึงกันทีหลังนะคะ

เมื่อทำการบันทึกข้อมูลเสร็จเรียบร้อยแล้วก็จะมีข้อมูลขึ้นมาอยู่ในหัวข้อ users แบบนี้

ตัวอย่างของอายคลิกปุ่ม Register ไปหลายรอบละก็เลยมีข้อมูลเยอะหน่อย ฮ่าๆ โดยรหัสพวกนี้ระบบจะทำการสร้างขึ้นมาให้เราเอง จากนั้นคลิกที่รูปไอคอน + ก็จะเจอข้อมูลที่เราทำการบันทึกเข้ามาเมื่อสักครู่

โอเค! ข้อมูลมาแล้ว

ทีนี้ ข้อมูลก็ถูกบันทึกลงไปใน Database แล้ว แต่ user ยังไม่สามารถใช้ email และ password ในการ Login ได้ เพราะข้อมูล user ยังไม่เข้าไปในระบบ Authentication ของ Firebase เมื่อเข้าไปดูในแท็บ Authentication ก็จะพบว่ายังไม่มีผู้ใช้เข้ามาในส่วนนี้

แล้วทีนี้เราจะทำยังไงให้เวลาที่ user คลิกปุ่ม Register แล้วระบบจะทำการบันทึกข้อมูลลงทั้ง Database และ Authentication ด้วย?

เรามาดูกันเลยดีกว่าค่ะ

เนื่องจากฟังก์ชันก่อนหน้าเป็นแค่ฟังก์ชันที่ทำการบันทึกข้อมูลลง Database เท่านั้น จึงไม่สามารถนำข้อมูลนั้นลงไปใน Authentication ได้ ทีนี้เราก็จะมาทำการเพิ่มฟังก์ชันสำหรับการลงทะเบียนเข้าสู่ Authentication โดยอายให้ชื่อฟังก์ชันว่า signUp

จากโค้ดข้างบนก็จะหมายความว่า เราประกาศตัวแปรขึ้นมาสองตัวคือ email และ password เพราะส่วนใหญ่เวลาเราทำการ Login ก็จะใช้แค่ email กับ password หรือถ้าหากใครมีมากกว่านั้นก็เพิ่มตัวแปรเข้าไปอีกได้ค่ะ

ยกตัวอย่างโค้ด

var email = document.getElementById('emailRegis').value;

ก็จะหมายความว่าประกาศให้ email คือตัวแปรที่รับค่าจากไอดีชื่อว่า emailRegis ซึ่งในที่นี้ ของอายก็จะเป็น Text Field ที่รับค่า email ของ user ที่กรอกเข้ามาตอนทำการ Register

จากนั้นใช้คำสั่ง

firebase.auth().createUserWithEmailAndPassword

จากนั้นตามด้วยตัวแปรที่เราประกาศไว้ข้างต้น โค้ดต่อๆ มาก็จะเป็นการ catch เพื่อดักจับ error ทั่วไป (หากใครสงสัยตรง error code ให้คอมเม้นถามทีหลังได้นะคะ)

โอเค ทีนี้เราก็จะได้ฟังก์ชันสำหรับการ signup เข้าสู่ Authentication กันแล้ว ต่อไปเราจะมาวางตำแหน่งการเรียกใช้ฟังก์ชันกันค่ะ เดี๋ยวมาเรียงลำดับการทำงานกันก่อนนะคะ เราต้องการให้

1. user คลิกที่ปุ่ม Register (Register ทำการ call function ไปที่ saveData())
2. ระบบบันทึกข้อมูลลง Database
3. ระบบบันทึกข้อมูลผู้ใช้ลง Authentication

ดูจากตรงนี้แล้วข้อ 1 กับข้อ 2 ก็ดู make sense ดี แต่พอมาข้อ 3 นี่สิ ในปุ่ม Register ทำการ call function ไปที่ saveData นี่ ไม่ได้ call ไปที่ signUp สักหน่อย!

วิธีการนั้นไม่ยากเลย ง่ายมากๆ

เราก็ทำการเรียกใช้ฟังก์ชัน signUp หลังจากที่ฟังก์ชัน saveData และ insertData ทำงานเสร็จแล้วสิ อ่านมาถึงตรงนี้หลายคนอาจจะงง ไปดูโค้ดกันดีกว่าค่ะ โดยกลับไปที่ฟังก์ชัน insertData เนื่องจากเป็นฟังก์ชันที่ทำงานเป็นฟังก์ชันสุดท้ายก่อนจะเสร็จสิ้นกระบวนการบันทึกข้อมูลลง Database เมื่อเสร็จสิ้นแล้ว เราก็ทำการเรียกใช้ฟังก์ชัน signUp โดยการเพิ่มเข้าไปที่บรรทัดสุดท้ายของฟังก์ชัน insertData ตามตัวอย่างแบบนี้

เมื่อระบบทำการบันทึกข้อมูลลง Database เรียบร้อยแล้วก็จะไปเรียกใช้ฟังก์ชัน signUp ต่อ ก็คือการบันทึกข้อมูลผู้ใช้ลง Authentication นั่นเองค่ะ โอเค ทีนี้เรามาลองกันดีกว่า

• กรอกข้อมูลลงไปใหม่ แล้วคลิก Register

• เช็ค console

• เช็คใน Database

• เช็คใน Authentication

โอเค ครบ! ถ้าใครข้อมูลมาครบหมดแล้วก็แสดงว่า complete!!! ทีนี้เราก็จะสามารถใช้ email กับ password ในการ Login ได้แล้วค่ะ แต่! ยังไม่จบ เรายังไม่ได้สร้างฟังก์ชันที่ใช้สำหรับการ Login เลยนี่! ถ้างั้นก็ไปสร้างฟังก์ชันเพิ่มกันเลย

ชื่อฟังก์ชันว่า signIn จะทำงานก็ต่อเมื่อ user คลิกที่ปุ่ม Login (ตรงปุ่ม Login ต้อง call มาที่ function นี้) จากตัวอย่างโค้ดหมายความว่าเราประกาศตัวแปลมาสองตัวคือ email และ password เพื่อรับค่า email และ password อาจจะงงว่าทำไมไอดีไม่เหมือนกับตอนลงทะเบียน ตัวนี้เป็น Text Field ในหน้า Login

ซึ่งอายใช้ไอดีคนละชื่อกันกับหน้า Register ค่ะ

จากนั้นใช้คำสั่ง

firebase.auth().signInWithEmailAndPassword

และตามด้วยตัวแปล และจากนั้นก็ catch error ทั่วไปค่ะ และใช้คำสั่ง

alert('logged in');

เพื่อทำการแจ้งเตือนเมื่อทำการเข้าสู่ระบบสำเร็จ

เอาล่ะ ทีนี้เราไปลองกันดีกว่า โดยการใช้ email และ password ที่เราได้ทำการลงทะเบียนไปเมื่อสักครู่ มาทำการ Login กันเลย

กรอกข้อมูลลงไป และคลิกที่ปุ่ม Login

แจ้งเตือนมาแล้ว!!

ทีนี้ลองไปเช็คใน Authentication ดูค่ะว่าข้อมูลอัพเดทหรือไม่ อาจจะลองปรับวันที่และเวลาในเครื่องแล้วทำการ Login ดู ว่าข้อมูลอัพเดทรึเปล่า

จบแล้ววว อาจจะงงๆ ไปหน่อยก็ขออภัยด้วยนะคะ ยังมือใหม่ แหะๆ แต่ถ้าหากใครต้องการข้อมูลเพิ่มเติมก็สามารถคอมเม้นเข้ามาถามไว้ได้เลยนะคะ อายจะอธิบายเพิ่มให้เนอะ สำหรับวันนี้ก็ขอลาไปก่อน แล้วเจอกันใหม่ค่ะ :D