เริ่มต้นใช้งานการตรวจสอบสิทธิ์ Firebase ใน Flutter

เชื่อมต่อแอปกับ Firebase

ติดตั้งและเริ่มต้น Firebase SDK สำหรับ Flutter หากยังไม่ได้ดำเนินการ

เพิ่มการตรวจสอบสิทธิ์ Firebase ลงในแอป

1. จากไดเรกทอรีรากของโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอิน

   flutter pub add firebase_auth
   

2. เมื่อเสร็จแล้ว ให้สร้างแอปพลิเคชัน Flutter อีกครั้ง

   flutter run
   

3. นำเข้าปลั๊กอินในโค้ด Dart

   import 'package:firebase_auth/firebase_auth.dart';
   

หากต้องการใช้ผู้ให้บริการการตรวจสอบสิทธิ์ คุณต้องเปิดใช้ใน Firebaseคอนโซล (ไปที่แท็บความปลอดภัย > การตรวจสอบสิทธิ์ > วิธีการลงชื่อเข้าใช้) คุณสามารถเปิดใช้การลงชื่อเข้าใช้อีเมล/รหัสผ่านและผู้ให้บริการข้อมูลประจำตัวอื่นๆ อีกมากมายที่ต้องการสำหรับแอป

(ไม่บังคับ) สร้างต้นแบบและทดสอบด้วย ชุดโปรแกรมจำลองภายในของ Firebase

ก่อนจะพูดถึงวิธีที่แอปตรวจสอบสิทธิ์ผู้ใช้ เรามาแนะนำชุดเครื่องมือที่คุณใช้สร้างต้นแบบและทดสอบฟังก์ชันการตรวจสอบสิทธิ์ได้ นั่นคือ ชุดโปรแกรมจำลองภายในของ Firebase หากคุณกำลังตัดสินใจเลือกเทคนิคและผู้ให้บริการการตรวจสอบสิทธิ์ ลองใช้โมเดลข้อมูลต่างๆ กับข้อมูลสาธารณะและข้อมูลส่วนตัวโดยใช้การตรวจสอบสิทธิ์และกฎการรักษาความปลอดภัยของ Firebase หรือสร้างต้นแบบการออกแบบ UI การลงชื่อเข้าใช้ การทำงานในเครื่องโดยไม่ต้องติดตั้งใช้งานบริการจริงอาจเป็นความคิดที่ดี

โปรแกรมจำลองการตรวจสอบสิทธิ์เป็นส่วนหนึ่งของชุดโปรแกรมจำลองภายใน ซึ่งช่วยให้แอปโต้ตอบกับเนื้อหาและการกำหนดค่าฐานข้อมูลที่จำลองขึ้น รวมถึงทรัพยากรโปรเจ็กต์ที่จำลองขึ้น (ฟังก์ชัน ฐานข้อมูลอื่นๆ และกฎการรักษาความปลอดภัย) ได้ด้วย (ไม่บังคับ)

การใช้โปรแกรมจำลองการตรวจสอบสิทธิ์มีขั้นตอนเพียงไม่กี่ขั้นตอน ดังนี้

1. เพิ่มบรรทัดโค้ดลงในการกำหนดค่าการทดสอบของแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง

2. เรียกใช้ firebase emulators:start จากไดเรกทอรีรากของโปรเจ็กต์ที่อยู่ในเครื่อง

3. ใช้ UI ของชุดโปรแกรมจำลองภายในเพื่อสร้างต้นแบบแบบโต้ตอบ หรือใช้ REST API ของโปรแกรมจำลองการตรวจสอบสิทธิ์สำหรับการทดสอบแบบไม่โต้ตอบ

4. เรียก useAuthEmulator() เพื่อระบุที่อยู่และพอร์ตของโปรแกรมจำลอง

   Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp();
   
   // Ideal time to initialize
   await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
   //...
   }
   

ดูคำแนะนำโดยละเอียดได้ที่ เชื่อมต่อแอปกับโปรแกรมจำลองการตรวจสอบสิทธิ์ ดูข้อมูลเพิ่มเติมได้ที่ข้อมูลเบื้องต้นเกี่ยวกับชุดโปรแกรมจำลองภายใน

ตอนนี้เรามาดูวิธีตรวจสอบสิทธิ์ผู้ใช้กันต่อ

ตรวจสอบสถานะการตรวจสอบสิทธิ์ปัจจุบัน

Firebase Auth มีเมธอดและยูทิลิตี้มากมายที่ช่วยให้คุณผสานรวมการตรวจสอบสิทธิ์ที่ปลอดภัยเข้ากับแอปพลิเคชัน Flutter ใหม่หรือที่มีอยู่ได้ ในหลายๆ กรณี คุณจะต้องทราบ สถานะการตรวจสอบสิทธิ์ของผู้ใช้ เช่น ผู้ใช้เข้าสู่ระบบหรือออกจากระบบ

Firebase Auth ช่วยให้คุณสมัครรับข้อมูลสถานะนี้แบบเรียลไทม์ผ่าน Streamได้ เมื่อเรียกใช้แล้ว สตรีมจะแสดงเหตุการณ์สถานะการตรวจสอบสิทธิ์ปัจจุบันของผู้ใช้ทันที จากนั้นจะแสดงเหตุการณ์ต่อๆ ไปเมื่อใดก็ตามที่สถานะการตรวจสอบสิทธิ์เปลี่ยนแปลง

มี 3 วิธีในการฟังการเปลี่ยนแปลงสถานะการตรวจสอบสิทธิ์ ดังนี้

authStateChanges()

หากต้องการสมัครรับข้อมูลการเปลี่ยนแปลงเหล่านี้ ให้เรียกใช้เมธอด authStateChanges() ในอินสแตนซ์ FirebaseAuth

FirebaseAuth.instance
  .authStateChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

ระบบจะทริกเกอร์เหตุการณ์เมื่อเกิดเหตุการณ์ต่อไปนี้

• ทันทีหลังจากลงทะเบียน Listener
• เมื่อผู้ใช้ลงชื่อเข้าใช้
• เมื่อผู้ใช้ปัจจุบันออกจากระบบ

idTokenChanges()

หากต้องการสมัครรับข้อมูลการเปลี่ยนแปลงเหล่านี้ ให้เรียกใช้เมธอด idTokenChanges() ในอินสแตนซ์ FirebaseAuth

FirebaseAuth.instance
  .idTokenChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

ระบบจะทริกเกอร์เหตุการณ์เมื่อเกิดเหตุการณ์ต่อไปนี้

• ทันทีหลังจากลงทะเบียน Listener
• เมื่อผู้ใช้ลงชื่อเข้าใช้
• เมื่อผู้ใช้ปัจจุบันออกจากระบบ
• เมื่อโทเค็นของผู้ใช้ปัจจุบันมีการเปลี่ยนแปลง

userChanges()

หากต้องการสมัครรับข้อมูลการเปลี่ยนแปลงเหล่านี้ ให้เรียกใช้เมธอด userChanges() ในอินสแตนซ์ FirebaseAuth

FirebaseAuth.instance
  .userChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');
    }
  });

ระบบจะทริกเกอร์เหตุการณ์เมื่อเกิดเหตุการณ์ต่อไปนี้

• ทันทีหลังจากลงทะเบียน Listener
• เมื่อผู้ใช้ลงชื่อเข้าใช้
• เมื่อผู้ใช้ปัจจุบันออกจากระบบ
• เมื่อโทเค็นของผู้ใช้ปัจจุบันมีการเปลี่ยนแปลง
• เมื่อมีการเรียกใช้เมธอดต่อไปนี้ที่ FirebaseAuth.instance.currentUser มีให้
  • reload()
  • unlink()
  • updateEmail()
  • updatePassword()
  • updatePhoneNumber()
  • updateProfile()

การเก็บสถานะการตรวจสอบสิทธิ์ไว้

Firebase SDK สำหรับทุกแพลตฟอร์มมีการรองรับแบบพร้อมใช้งานเพื่อให้มั่นใจว่าระบบจะเก็บสถานะการตรวจสอบสิทธิ์ของผู้ใช้ไว้เมื่อรีสตาร์ทแอปหรือโหลดหน้าเว็บซ้ำ

ในแพลตฟอร์มเนทีฟ เช่น Android และ iOS คุณจะกำหนดค่าลักษณะการทำงานนี้ไม่ได้ และระบบจะเก็บสถานะการตรวจสอบสิทธิ์ของผู้ใช้ไว้ในอุปกรณ์ระหว่างการรีสตาร์ทแอป ผู้ใช้สามารถล้างข้อมูลที่แคชไว้ของแอปได้โดยใช้การตั้งค่าอุปกรณ์ ซึ่งจะล้างสถานะที่มีอยู่ทั้งหมดที่จัดเก็บไว้

ในแพลตฟอร์มเว็บ ระบบจะจัดเก็บสถานะการตรวจสอบสิทธิ์ของผู้ใช้ไว้ใน IndexedDB คุณสามารถเปลี่ยนการคงอยู่เพื่อจัดเก็บข้อมูลไว้ในพื้นที่เก็บข้อมูลในเครื่อง ได้โดยใช้ Persistence.LOCAL หากจำเป็น คุณสามารถเปลี่ยนลักษณะการทำงานเริ่มต้นนี้ให้เก็บสถานะการตรวจสอบสิทธิ์ไว้เฉพาะเซสชันปัจจุบันหรือไม่เก็บเลยก็ได้ หากต้องการกำหนดค่าการตั้งค่าเหล่านี้ ให้เรียกใช้เมธอด FirebaseAuth.instanceFor(app: Firebase.app(), persistence: Persistence.LOCAL); คุณยังคงอัปเดตการคงอยู่สำหรับอินสแตนซ์การตรวจสอบสิทธิ์แต่ละรายการได้โดยใช้ setPersistence(Persistence.NONE)

// Disable persistence on web platforms. Must be called on initialization:
final auth = FirebaseAuth.instanceFor(app: Firebase.app(), persistence: Persistence.NONE);
// To change it after initialization, use `setPersistence()`:
await auth.setPersistence(Persistence.LOCAL);

ขั้นตอนถัดไป

ดูคำแนะนำเกี่ยวกับการลงชื่อเข้าใช้และการลงชื่อสมัครใช้ของผู้ใช้ด้วยบริการข้อมูลประจำตัวและการตรวจสอบสิทธิ์ที่รองรับ