การใช้ Firebase Authentication ใน Flutter

การใช้ Firebase Authentication ใน Flutter

ในบทความนี้ เราจะมาเรียนรู้วิธีการใช้ Firebase Authentication ใน Flutter เพื่อจัดการระบบลงทะเบียนและเข้าสู่ระบบสำหรับแอปพลิเคชันของเรา Firebase Authentication เป็นบริการที่ช่วยให้เราสามารถสร้างระบบยืนยันตัวตนผู้ใช้ได้อย่างง่ายดายและปลอดภัย รองรับวิธีการยืนยันตัวตนที่หลากหลาย เช่น อีเมล/รหัสผ่าน, Google Sign-in, Facebook Sign-in และอื่นๆ

เนื่องจากบทความก่อนหน้าเราได้พูดถึงการจัดการข้อมูลในเครื่อง (Local Storage) การใช้ Firebase Authentication จะช่วยให้เราสามารถจัดการข้อมูลผู้ใช้ได้อย่างปลอดภัยบน Cloud และสามารถเข้าถึงได้จากอุปกรณ์ใดก็ได้

Firebase คืออะไร?

Firebase คือแพลตฟอร์มพัฒนาแอปพลิเคชันของ Google ที่มีเครื่องมือและบริการมากมายสำหรับนักพัฒนา เช่น ฐานข้อมูล (Firestore, Realtime Database), พื้นที่จัดเก็บข้อมูล (Storage), ฟังก์ชันคลาวด์ (Cloud Functions) และระบบยืนยันตัวตน (Authentication) ในบทความนี้เราจะเน้นที่ Firebase Authentication เป็นหลัก

การเริ่มต้นใช้งาน Firebase Authentication

ก่อนที่เราจะเริ่มเขียนโค้ด เราต้องทำการตั้งค่า Firebase project และเชื่อมต่อกับแอป Flutter ของเราก่อน

1. สร้าง Firebase Project: ไปที่ Firebase Console และสร้าง project ใหม่
2. เพิ่มแอป Flutter ไปยัง Firebase Project: เลือกไอคอน Flutter และทำตามขั้นตอนที่ Firebase Console แนะนำ ซึ่งประกอบด้วยการเพิ่ม Firebase SDK ลงใน pubspec.yaml และการกำหนดค่าไฟล์ android/app/build.gradle และ ios/Runner/Info.plist
3. เปิดใช้งาน Authentication Methods: ใน Firebase Console ไปที่ Authentication -> Sign-in method และเปิดใช้งานวิธีการยืนยันตัวตนที่คุณต้องการ เช่น Email/Password, Google, Facebook

เมื่อทำตามขั้นตอนเหล่านี้เสร็จแล้ว เราก็พร้อมที่จะเริ่มใช้งาน Firebase Authentication ในแอป Flutter ของเรา

การติดตั้ง Firebase Authentication Package

ขั้นแรกให้เพิ่ม firebase_auth package ลงใน pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_auth: ^4.0.0

จากนั้นรัน flutter pub get เพื่อติดตั้ง package

การใช้งาน Email/Password Authentication

Email/Password Authentication เป็นวิธีที่ง่ายที่สุดในการเริ่มต้นใช้งาน Firebase Authentication

การสร้างบัญชีผู้ใช้

เราสามารถสร้างบัญชีผู้ใช้ใหม่ได้โดยใช้เมธอด createUserWithEmailAndPassword:

import 'package:firebase_auth/firebase_auth.dart';

Future<void> registerWithEmailAndPassword(String email, String password) async {
  try {
    final credential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
    print('Registered user: ${credential.user?.uid}');
  } on FirebaseAuthException catch (e) {
    if (e.code == 'weak-password') {
      print('The password provided is too weak.');
    } else if (e.code == 'email-already-in-use') {
      print('The account already exists for that email.');
    }
  } catch (e) {
    print(e);
  }
}

การเข้าสู่ระบบ

เราสามารถเข้าสู่ระบบด้วยบัญชีผู้ใช้ที่มีอยู่ได้โดยใช้เมธอด signInWithEmailAndPassword:

import 'package:firebase_auth/firebase_auth.dart';

Future<void> signInWithEmailAndPassword(String email, String password) async {
  try {
    final credential = await FirebaseAuth.instance.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
    print('Signed in user: ${credential.user?.uid}');
  } on FirebaseAuthException catch (e) {
    if (e.code == 'user-not-found') {
      print('No user found for that email.');
    } else if (e.code == 'wrong-password') {
      print('Wrong password provided for that user.');
    }
  } catch (e) {
    print(e);
  }
}

การออกจากระบบ

เราสามารถออกจากระบบได้โดยใช้เมธอด signOut:

import 'package:firebase_auth/firebase_auth.dart';

Future<void> signOut() async {
  await FirebaseAuth.instance.signOut();
  print('Signed out');
}

การตรวจสอบสถานะผู้ใช้

เราสามารถตรวจสอบว่าผู้ใช้ได้เข้าสู่ระบบหรือไม่โดยใช้ authStateChanges() stream:

import 'package:firebase_auth/firebase_auth.dart';

Stream<User?> authStateChanges() {
  return FirebaseAuth.instance.authStateChanges();
}

เราสามารถใช้ StreamBuilder widget เพื่อแสดง UI ที่แตกต่างกันขึ้นอยู่กับสถานะของผู้ใช้:

StreamBuilder<User?>(
  stream: authStateChanges(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('Welcome, ${snapshot.data?.email}');
    } else {
      return ElevatedButton(
        onPressed: () {
          // Navigate to login screen
        },
        child: Text('Login'),
      );
    }
  },
)

การใช้งาน Google Sign-in

Google Sign-in เป็นวิธีที่สะดวกสำหรับผู้ใช้ในการเข้าสู่ระบบด้วยบัญชี Google ของพวกเขา

การติดตั้ง Google Sign-in Package

ให้เพิ่ม google_sign_in package และ firebase_auth package ลงใน pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_auth: ^4.0.0
  google_sign_in: ^6.0.0

จากนั้นรัน flutter pub get เพื่อติดตั้ง package

การเข้าสู่ระบบด้วย Google

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

Future<void> signInWithGoogle() async {
  try {
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
    final GoogleSignInAuthentication googleAuth = await googleUser!.authentication;

    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    await FirebaseAuth.instance.signInWithCredential(credential);
    print('Signed in with Google');
  } catch (e) {
    print(e);
  }
}

การใช้งาน Facebook Sign-in

Facebook Sign-in เป็นอีกวิธีที่สะดวกสำหรับผู้ใช้ในการเข้าสู่ระบบด้วยบัญชี Facebook ของพวกเขา

การตั้งค่า Facebook App

ก่อนที่เราจะใช้ Facebook Sign-in เราต้องสร้าง Facebook App ใน Facebook Developers และกำหนดค่า App ID และ App Secret ใน Firebase Console

การติดตั้ง Facebook Sign-in Package

ให้เพิ่ม flutter_facebook_auth package และ firebase_auth package ลงใน pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_auth: ^4.0.0
  flutter_facebook_auth: ^5.0.0

จากนั้นรัน flutter pub get เพื่อติดตั้ง package

การเข้าสู่ระบบด้วย Facebook

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<void> signInWithFacebook() async {
  try {
    final LoginResult result = await FacebookAuth.instance.login();

    if (result.status == LoginStatus.success) {
      final OAuthCredential credential = FacebookAuthProvider.credential(result.accessToken!.token);
      await FirebaseAuth.instance.signInWithCredential(credential);
      print('Signed in with Facebook');
    } else {
      print('Facebook login failed: ${result.status}');
    }
  } catch (e) {
    print(e);
  }
}

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการใช้ Firebase Authentication ใน Flutter เพื่อจัดการระบบลงทะเบียนและเข้าสู่ระบบสำหรับแอปพลิเคชันของเรา เราได้ครอบคลุมวิธีการยืนยันตัวตนที่สำคัญ เช่น Email/Password, Google Sign-in และ Facebook Sign-in การใช้ Firebase Authentication จะช่วยให้เราสามารถสร้างระบบยืนยันตัวตนผู้ใช้ได้อย่างง่ายดายและปลอดภัย และสามารถจัดการข้อมูลผู้ใช้ได้อย่างมีประสิทธิภาพ

ในบทความถัดไป เราจะเรียนรู้วิธีการใช้ Firebase Firestore ใน Flutter เพื่อจัดเก็บและจัดการข้อมูลใน Cloud