web analytics

Flutter : ทำระบบสมาชิกและ Login ด้วย Firebase Auth

สวัสดีผู้อ่านครับ หากได้ติดตามบล็อก งานเขียนของผม จะเห็นว่าช่วงนี้มีแต่เรื่อง Flutter เยอะมาก นั่นก็เพราะว่าผมลองเขียน Flutter มาสักพักแล้ว ยังมีเรื่องให้ลองเล่นอีกหลายเรื่องเลย บล็อกนี้ได้เวลาของ Firebase ซึ่งนับว่าเป็นเรื่องที่ mobile dev สมัยใหม่ล้วนต้องรู้ทุกคน โดยผมจะเริ่มจาก Firebase Auth ก่อน

รู้จักกับ Firebase Auth

Firebase Auth เป็นบริการหนึ่งใน Firebase ที่รวบรวมบริการ backend สำหรับแอพและเว็บแอพเอาไว้ มีความสามารถเยอะมาก ช่วยให้นักพัฒนาไม่ต้องทำ backend เอง ซึ่งในบล็อกนี่จะพาไปลองเล่นบริการนึงของ Firebase คือ Firebase Auth นี่แหละ โดยตัวมันช่วยให้การทำระบบสมาชิก ล็อคอินเป็นเรื่องง่าย ซึ่งการใช้งาน Firebase Auth ใน Flutter ก็ไม่ได้ยากเลย

สามารถล็อคอินโดยใช้ gmail ได้เลย แล้วก็สร้างโปรเจค
https://firebase.google.com/

ติดตั้ง Firebase ใน Flutter project

ติดตั้ง Firebase ใน project ของเรา ขั้นตอนคือ เอาไฟล์ของ firebase ไปใส่ใน project android และ iOS แล้วก็เพิ่ม plugin บางอย่าง ซึ่งสามารถอ่านได้ที่
https://firebase.google.com/docs/android/setup
https://firebase.google.com/docs/ios/setup
ของ Android ทำถึงแค่ step3 นะ

เปิดใช้งาน Firebase Auth

หลังจากที่เราล็อคอินเข้ามาในเว็บ firebase แล้ว ไปที่เมนู authentication ให้ enable email provider ที่ sign-in method

ลองสร้าง user มา 1 user

เพิ่ม dependencies

กลับมาที่ Flutter project เพิ่ม dependencies ของ Firebase Auth เข้ามาใน project ที่ไฟล์ pubspec.yaml

สร้างหน้าล็อคอิน

สร้างหน้าจอ UI หน้าล็อคอิน ที่มีช่องกรอก email , password แล้วก็มีปุ่ม login ด้วย บล็อกนี้ขอแต่งให้ดูดีกว่าปกตินิดนึงละกัน

ผมตกแต่งคร่าวๆ ได้ประมาณนี้

การใช้งาน FirebaseAuth

พระเอกของเราคือ class ที่ชื่อว่า FirebaseAuth ซึ่งเราต้องสร้าง instance ก่อนใช้งาน

Sign in ด้วย email

เขียร method สำหรับ signIn() โดยจะลอง hardcode ค่า email , password ไปก่อน

เพิ่ม InkWell ให้กับปุ่ม โดยมันคือ widget ที่ช่วยให้เมื่อเรากดจะมี animation เล็กๆ พร้อมกับมี onTap ให้ด้วย ซึ่ง onTap ให้กดแล้วไปเรียก signIn()

ลองรันแล้วกดที่ปุ่ม sign in จะเห็นว่าค่า email ของเรามาแสดงแล้ว

สร้างหน้า Home

สร้างหน้า home ที่จะแสดงหลังจาก login โดยรับพารามิเตอร์ คือ FirebaseUser (หรือจะไป get เอาจาก FirebaseAuth ในหน้านี้ก็ได้นะ)

ตรวจสอบสถานะ

ตรวจสอบว่า ถ้าล็อคอินแล้ว ให้เปลี่ยนหน้าไปที่หน้า home แทน

เรียก method checkAuth() ที่ initState() เพื่อให้เปิดแอปมาแล้วก็เช็คเลย

หลังจากนั้น พอเราเข้าแอปมาอีกครั้ง ถ้าเคย sign in แล้วก็จะเปลี่ยนไปหน้า home อัตโนมัติ

ปรับให้กดปุ่มล็อคอินแล้ว ถ้าสำเร็จก็เปลี่ยนไปหน้า home

Sign-out

เพิ่มไอคอน action สำหรับ sign out ไปที่ AppBar

เขียน method signOut() วิธีการแค่เรียกจาก .signOut() ผ่าน FirebaseAuth ได้เลย หลังจากนั้นก็ให้ route ไปที่หน้า sign in ของเรา

ลองรัน ตอนนี้เราสามารถ sign-in และ sign-out ได้แล้ว

กำหนด TextEditingController หน้า Login

ตอนนี้เรายัง hardcode ค่า email,password เอาไว้ ถึงเวลาเปลี่ยนมาใช้ค่าจาก user กันแล้ว โดยการดึงค่าจาก TextField จะใช้ TextEditingController ดังนั้นเราต้องสร้าง
TextEditingController สำหรับ email และ password

จากนั้นก็เพิ่ม controller ให้กับ TextField ทั้ง email และ password

ตอนเรา sign in ก็ใช้วิธีดึงค่าจาก TextEditingController

แสดง error กรณี sign-in ไม่ได้

มาลองทดสอบกรณี error กันบ้าง โดยการแสดง error ผมจะใช้ SnackBar แสดง error ซึ่ง Firebase ก็ส่งข้อความ error มาให้

SnackBar นั้นจะอยู่ใน Scaffold ซึ่งเราต้องเก็บค่า State ของ scaffold ไว้ก่อน โดยสร้าง GlobalKey<ScaffoldState> เอาไว้เรียกใช้ scaffold จากที่อื่นๆ

เอา scaffoldKey ของเราไปกำหนดใน key ของ Scaffold

ทีนี้ตอนจะแสดง error ก็เรียก scaffoldKey.currentState.showSnackBar(..) ได้เลย

ข้อความ error มาแล้ว

เพิ่มปุ่มสมัครสมาชิก

ต่อมาทำหน้าสมัครสมาชิก ก็ต้องมีปุ่มให้เปลี่ยนหน้าไปยังหน้าสมัครสมาชิก ดังนั้นต้องเพิ่มปุ่ม sign up

สร้างหน้าสมัครสมาชิก

สร้างหน้า sign up เพิ่ม มันก็คล้ายๆหน้า login แค่เพิ่มช่องให้ใส่รหัสยืนยันอีกช่องนึง

แล้วเพิ่ม onTap ให้ปุ่ม sign up ให้ route ไปหน้าใหม่

กำหนด TextEditingController หน้า Sign up

ประกาศ instance ของ FirebaseAuth

แล้วก็ TextEditingController ของ ทั้ง 3 TextField

กำหนด controller ให้ TextFieldแต่ละตัว

ส่ง sign up ไปยัง Firebase

หน้า sign up คือสมัครสมาชิกใหม่ เมื่อกดที่ปุ่มก็ต้องไปเพิ่ม user ใน firebase ซึ่งวิธีการง่ายมาก แค่เรียกคำสั่ง createUserWithEmailAndPassword()

ใส่ onTap ให้ปุ่ม sign up ให้ไปเรียก method signUp()

ลองสมัครสมาชิกกันดู

มาแล้ว user ใหม่ใน firebase

เพิ่มอีกนิดนึงละกัน คือ เมื่อสมัครสมาชิกสำเร็จแล้วก็ให้ route ไปที่หน้า home

แบบนี้

ลืมรหัสผ่าน

อีกหนึ่งปัญหาที่มาคู่กับระบบลงทะเบียน คือ การลืมรหัสผ่าน ที่ user ต้องการจะ reset password ของพวกเขา ถ้าเราทำระบบพวกนี้เองจะต้องยุ่งมากแน่ๆ แต่ Firebase ทำให้หมดแล้ว

เพิ่มปุ่ม ลืมรหัสผ่านที่หน้า login ของเรา

ได้แบบนี้

สร้างหน้า สำหรับให้ user กรอกอีเมลลงไป

ขั้นตอนการ reset password คือ เรียก auth.sendPasswordResetEmail() แค่นี้เลยจริงๆ จากนั้น Firebase ก็จะไปเช็คแล้วส่ง email รายละเอียดการ reset password ให้อัตโนมัติ

ลองแกล้งกดลืมรหัสผ่าน ใส่อีเมลของเราที่เคยล็อคอินลงไป

ไปดูที่อีเมล จะพบว่ามีอีเมลสำหรับ reset password มาแล้วจ้า

โดยเราสามารถแก้ไขหน้าตา template ของอีเมลได้ที่ Firebase auth > Template > Password reset

สรุป

Firebase Auth เป็นบริการที่ช่วยให้เราไม่ต้องเขียน ระบบ authen อย่างพวก login สมัครสมาชิกเอง อาจจะมียุ่งยากก็แค่ตอนแรกคือการติดตั้งในโปรเจค แต่การใช้งานใน Flutter นับว่าง่ายมาก

ตอนต่อไป

ในตอนหน้าของ Firebase Auth ใน Flutter ผมจะพาไปลองเล่น Facebook Login กันครับ ซึ่งนับว่าเป็นระบบ authen ใช้กันบ่อยมากๆแบบนึงในแอพครับ

เครดิต

https://medium.com/flutterpub/flutter-how-to-do-user-login-with-firebase-a6af760b14d5

ยังมีบทความเรื่อง Flutter ที่ผมเขียนไว้ อีกเยอะเลยในบล็อกนี้ ไม่จำเป็นต้องไปเรียนที่ไหนแล้วละ แค่พยายามศึกษาด้วยตนเองเหมือนผมก็เขียนได้
https://benzneststudios.com/blog/category/flutter/