Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Persediaan dan Pengesahan Firebase

Sediakan Firebase dalam projek Flutter anda dan laksanakan pengesahan pengguna menggunakan e-mel/kata laluan, Google Sign-In dan penyedia lain.

Pelajaran 1 daripada 412 langkah

Persediaan dan Pengesahan Firebase ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Firebase untuk Aplikasi Flutter

Selamat datang ke integrasi Firebase! Firebase ialah platform berkuasa oleh Google yang menawarkan banyak perkhidmatan bahagian belakang untuk aplikasi mudah alih dan web anda.

Firebase berfungsi sebagai Backend-as-a-Service (BaaS), bermakna ia mengendalikan operasi bahagian pelayan supaya anda boleh menumpukan perhatian pada pembinaan bahagian hadapan aplikasi.

Dalam pelajaran ini, kita akan menyediakan Firebase dalam projek Flutter dan melaksanakan pengesahan pengguna asas.

Menyediakan Projek Firebase

Mula-mula, anda memerlukan projek Firebase. Pergi ke Firebase Console dan ikuti langkah berikut:

  • Klik 'Add project' dan ikuti arahan yang dipaparkan.
  • Selepas projek dicipta, klik butang 'Add app' (ikon Android atau iOS).
  • Daftarkan aplikasi anda dengan memberikan nama pakej (Android) atau ID himpunan (iOS).
  • Muat turun fail konfigurasi: google-services.json untuk Android, GoogleService-Info.plist untuk iOS.

Menambahkan Firebase pada Flutter

Selepas menyediakan projek anda dalam Firebase Console, anda perlu menambahkan kebergantungan yang diperlukan pada fail pubspec.yaml projek Flutter anda.

Kita akan menambahkan firebase_core untuk memulakan Firebase dan firebase_auth untuk pengesahan.

Kemudian, jalankan flutter pub get dalam terminal anda untuk mendapatkan pakej tersebut.

Memulakan Firebase Core

Sebelum menggunakan mana-mana perkhidmatan Firebase, anda mesti memulakan Firebase dalam aplikasi Flutter anda, biasanya dalam fungsi main().

Pastikan anda memanggil WidgetsFlutterBinding.ensureInitialized() sebelum Firebase.initializeApp() untuk memastikan binding Flutter telah dimulakan.

FlutterFire CLI boleh menjana firebase_options.dart untuk menyediakan konfigurasi khusus platform dengan mudah.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
// import 'firebase_options.dart'; // Generated by FlutterFire CLI

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    // options: DefaultFirebaseOptions.currentPlatform, // Use if generated
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase App',
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase Init')),
        body: Center(child: Text('Firebase initialized!')),
      ),
    );
  }
}

Peletakan Fail Konfigurasi

Letakkan fail konfigurasi yang dimuat turun di lokasi yang betul:

  • Android: Pindahkan google-services.json ke dalam direktori android/app/ projek Flutter Anda.
  • iOS: Buka projek Flutter Anda dalam Xcode (ios/Runner.xcworkspace), kemudian seret GoogleService-Info.plist ke dalam folder 'Runner'. Pastikan anda memilih 'Copy items if needed' dan menambahkannya pada semua sasaran.

Pendaftaran E-mel/Kata Laluan

Firebase Authentication menyokong pelbagai kaedah log masuk. Mari mulakan dengan e-mel dan kata laluan.

Mula-mula, dayakan penyedia 'Email/Password' dalam Firebase Console di bawah 'Authentication' -> 'Sign-in method'.

Kemudian, gunakan FirebaseAuth.instance.createUserWithEmailAndPassword untuk mendaftarkan pengguna baharu.

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<User?> signUp(String email, String password) async {
    try {
      UserCredential result = await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
      return result.user;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

  // This main is for demonstration of the function logic.
  // In a real app, Firebase.initializeApp() would be called once at app start.
  static void main() async {
    // Simulate Firebase being initialized
    // await Firebase.initializeApp(); 
    
    AuthService auth = AuthService();
    User? user = await auth.signUp("test@example.com", "password123");
    if (user != null) {
      print("Signed up user: ${user.email}");
    } else {
      print("Sign up failed.");
    }
  }
}

Log Masuk E-mel/Kata Laluan

Setelah pengguna didaftarkan, mereka boleh log masuk menggunakan e-mel dan kata laluan. Proses ini dilakukan dengan kaedah signInWithEmailAndPassword.

Kedua-dua kaedah pendaftaran dan log masuk mengembalikan objek UserCredential, yang mengandungi objek User jika berjaya.

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<User?> signIn(String email, String password) async {
    try {
      UserCredential result = await _auth.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
      return result.user;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

  // This main is for demonstration of the function logic.
  // In a real app, Firebase.initializeApp() would be called once at app start.
  static void main() async {
    // Simulate Firebase being initialized
    // await Firebase.initializeApp(); 
    
    AuthService auth = AuthService();
    User? user = await auth.signIn("test@example.com", "password123");
    if (user != null) {
      print("Signed in user: ${user.email}");
    } else {
      print("Sign in failed.");
    }
  }
}

Memantau Keadaan Pengesahan

Adalah penting untuk mengetahui sama ada pengguna sedang log masuk atau log keluar. Firebase Auth menyediakan strim bernama authStateChanges() yang memancarkan objek User baharu setiap kali keadaan pengesahan berubah.

Strim ini boleh digunakan dengan widget StreamBuilder untuk mengemas kini UI Anda secara dinamik berdasarkan status log masuk pengguna.

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auth State App',
      home: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          }
          if (snapshot.hasData) {
            return HomeScreen(user: snapshot.data!); // User is signed in
          } else {
            return LoginScreen(); // User is signed out
          }
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final User user;
  HomeScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Welcome')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Logged in as: ${user.email}'),
            ElevatedButton(
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
              },
              child: Text('Sign Out'),
            ),
          ],
        ),
      ),
    );
  }
}

Persediaan Log Masuk Google

Log Masuk Google ialah kaedah pengesahan yang popular dan mudah digunakan. Untuk mendayakannya:

  • Dalam Firebase Console, pergi ke 'Authentication' -> 'Sign-in method' dan dayakan 'Google'.
  • Tambahkan pakej google_sign_in pada pubspec.yaml Anda.
  • Android: Pastikan cap jari SHA-1 Anda didaftarkan dalam tetapan projek Firebase.
  • iOS: Tambahkan ID Klien Songsang pada fail Info.plist Anda (diperoleh daripada GoogleService-Info.plist).

Melaksanakan Log Masuk Google

Selepas persediaan selesai, Anda boleh melaksanakan Log Masuk Google menggunakan pakej GoogleSignIn untuk mendapatkan kelayakan pengguna, kemudian log masuk ke Firebase dengan kelayakan tersebut.

Proses ini melibatkan penggunaan GoogleSignIn().signIn(), kemudian mencipta GoogleAuthProvider.credential untuk dihantar kepada FirebaseAuth.instance.signInWithCredential().

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

class GoogleAuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<User?> signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
      if (googleUser == null) return null; // User cancelled the sign-in

      final GoogleSignInAuthentication googleAuth = await googleUser.authentication;

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

      UserCredential result = await _auth.signInWithCredential(credential);
      return result.user;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

  // This main is for demonstration of the function logic.
  // In a real app, Firebase.initializeApp() would be called once at app start.
  static void main() async {
    // Simulate Firebase being initialized
    // await Firebase.initializeApp(); 
    
    GoogleAuthService auth = GoogleAuthService();
    User? user = await auth.signInWithGoogle();
    if (user != null) {
      print("Signed in with Google: ${user.email}");
    } else {
      print("Google Sign-In failed or cancelled.");
    }
  }
}

Semakan Pantas Firebase Auth

Bilakah Firebase.initializeApp() patut dipanggil dalam aplikasi Flutter untuk memastikan semua perkhidmatan Firebase telah bersedia?

Imbas Kembali & Langkah Seterusnya

Tahniah! Anda telah mempelajari perkara asas untuk menyepadukan Firebase ke dalam aplikasi Flutter Anda dan menyediakan pengesahan.

Anda telah mempelajari:

  • Menyediakan projek Firebase dan menambahkan aplikasi Flutter Anda.
  • Menambahkan kebergantungan Firebase dan memulakan Firebase Core.
  • Melaksanakan pendaftaran dan log masuk menggunakan e-mel/kata laluan.
  • Memantau perubahan keadaan pengesahan pengguna.
  • Menyediakan dan melaksanakan Log Masuk Google.

Ini ialah langkah asas untuk membina aplikasi Flutter dengan Firebase yang selamat dan interaktif. Seterusnya, Anda akan meneroka Cloud Firestore untuk penyepaduan pangkalan data!

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
22
Pelajaran
88

Soalan Lazim

Adakah pelajaran “Persediaan dan Pengesahan Firebase” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Persediaan dan Pengesahan Firebase”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Persediaan dan Pengesahan Firebase”?

Sediakan Firebase dalam projek Flutter anda dan laksanakan pengesahan pengguna menggunakan e-mel/kata laluan, Google Sign-In dan penyedia lain. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Persediaan dan Pengesahan Firebase” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Persediaan dan Pengesahan Firebase
  2. Pangkalan Data Cloud Firestore
  3. Cloud Storage dan Functions
  4. Firebase Cloud Messaging dan Pemberitahuan
← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter