สวัสดีค่ะ ... ถึงเวลาที่ต้องเรียนรู้กันต่อหลังจาก Register หรือสมัครสมาชิกด้วย Email ไปแล้ว มาถึงตอนนี้เราจะสร้างแอปพลิเคชันส่วนของ Login กับ Forget Password กันบ้างค่ะ
 |
| ปุ่ม Login สำหรับให้ผู้ใช้เข้าสู่ระบบหรือการทำงานของแอปพลิเคชัน |
เริ่มจากเมื่อผู้ใช้งานกรอก Email และ Password แล้วกดปุ่ม Login หากเป็น Email และ Password ตามที่เคยสมัครไว้ก็จะเข้าสู้หน้าแสดงข้อมูลแบบภาพค่ะ
 |
| หน้าแสดงข้อมูล |
แต่ถ้าไม่ใช้ที่สมัครไว้ในหน้า Login หลังจากกดปุ่มแล้วจะให้มี Alert แจ้งผู้ใช้งานตามภาพค่ะ
 |
| กรณีที่กรอก Email หรือ Password ผิด |
เมื่อเข้าใจการทำงานของแอปพลิเคชันแล้ว คราวนี้เราก็เริ่มเขียนคำสั่งได้แล้วค่ะ เริ่มจากประกาศ Action ให้ปุ่ม Login กันก่อน ใน Action เราจะเขียนคำสั่งดังนี้
นั่นคือเรียกใช้คำสั่ง signIn ของ FIRAuth.auth โดยส่ง Email และ Password ไปตรวจสอบ ถ้าพบ error แสดงว่า ข้อมูลที่ส่งไปตรวจสอบไม่ถูกต้องค่ะ จึงให้แสดง Alert ตามภาพข้างต้น
แต่ถ้าไม่มี error ใดๆ กลับมาแสดงว่า เป็นสมาชิกถูกต้องจึงให้เปิดหน้าถัดไปค่ะ (หน้าถัดไปจะสร้างหน้าว่างๆ ไว้รอก่อนก็ได้นะคะ เดี๋ยวค่อยไปสร้างกันอีกที 😆 ตอนท้ายของบทความนี้)
ถัดมาก็มาถึงการทำงานของปุ่ม Forgot Password กันบ้าง
 |
| ปุ่ม Forget Password |
เหมือนเดิมค่ะ ประกาศ Action ให้ปุ่ม Forgot Password จากนั้นก็เขียนการทำงานลงไป ซึ่งการทำงานเราจะให้มี Alert ขึ้นมารับ Email ของผู้ใช้งานดังนี้ค่ะ
 |
| แสดง Alert สำหรับรับ Email |
คำสั่งที่ใช้ก็ไม่ยากค่ะ เพียงแค่ใน Action ของปุ่ม Forgot Password ก็เป็น
เมื่อผู้ใช้กรอก Email และกดปุ่ม OK แล้ว ก็ส่ง Email นั้นไปยัง func ที่เราสร้างมาใหม่เพื่อนำไปตรวจสอบว่า เป็นสมาชิกหรือไม่ ถ้าเป็นสมาชิกไม่มี error อะไร Firebase จะส่ง Email ไปยัง Email ที่กรอกมา เราก็ใส่ Alert บอกผู้ใช้ซะหน่อย
แต่ถ้ามี error ก็แจ้งผ่าน Alert เช่นกัน ดังนั้น Code ที่เราจะใช้คือ
เสร็จเรียบร้อยลอง Run การทำงานดู Login ไม่น่าจะมีอะไร ไปดูปุ่ม Forget Password กันค่ะ เมื่อผู้ใช้กรอก Email แล้ว และพบว่าเป็นสมาชิก ผู้ใช้จะได้รับ Email ดังนี้
 |
| ตัวอย่าง Email ที่ได้รับ (จริงๆ เนื้อหาเราเปลี่ยนได้ผ่าน Firebase ค่ะ) |
|
พอลองคลิกไปตาม Link ก็จะได้เปิดหน้าต่างของ Web Browser ให้กรอกรหัสผ่านใหม่ดังนี้
 |
| หน้าเปลี่ยน Password ผ่าน Web Browser |
เพียงเท่านี้ผู้ใช้งานก็เปลี่ยน Password ได้แล้วค่ะ ไม่ยากเลยเนอะ 😉😉😉
สุดท้ายเรื่องที่ค้างไว้คือ หน้าแสดงข้อมูลหลังจาก Login แล้ว ตามตัวอย่างข้างต้นเป็นการดึงข้อมูลจาก Firebase มาแสดงบน TableView ค่ะ คำสั่งที่ใช้เป็นดังนี้ค่ะ
 |
| ประกาศการอ้างอิงไปยัง Firebase และอาร์เรย์ |
ในการแสดงผลข้อมูลบน TableView นั้นเราจำเป็นต้องประกาศอาร์เรย์ที่ใช้ในการเก็บข้อมูลสำหรับนำไปแสดงผล ดังนั้นเราจึงประกาศอาร์เรย์ memberItem ที่มีชนิดเป็น member ( Class member เคยสร้างไว้ในบทความก่อนหน้า ลองย้อนกลับไปดูนะคะ ) เพื่อให้ง่ายต่อการทำงานเราจะสร้าง func fetchData ขึ้นมาเพื่อดึงข้อมูลจาก Firebase มาเก็บ
 |
| คำสั่งในการดึงข้อมูลจาก Firebase |
โดยการทำงานจะดึงข้อมูลมาเก็บใส่อาร์เรย์ค่ะ จากนั้นก็นำอาร์เรย์นี้ไปแสดงผลตามกระบวนการของ TableView ที่เราเคยรู้มาแล้วค่ะ เพียงเท่านี้เราก็จะได้แอปพลิเคชันตามที่ต้องการละค่ะ
Comments
Post a Comment