Mobiele ontwikkeling met Flutter · Les

Firebase instellen en authenticatie

Stel Firebase in uw Flutter-project in en implementeer gebruikersauthenticatie met e-mail/wachtwoord, Google Sign-In en andere providers.

Les 1 van 412 stappen

Firebase instellen en authenticatie is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Firebase voor Flutter-apps

Welkom bij de integratie met Firebase! Firebase is een krachtig platform van Google dat veel backenddiensten biedt voor je mobiele en webapplicaties.

Het werkt als een Backend-as-a-Service (BaaS): het handelt serverbewerkingen voor je af, zodat je je kunt richten op het bouwen van de frontend van je app.

In deze les stellen we Firebase in een Flutter-project in en implementeren we eenvoudige gebruikersauthenticatie.

Een Firebase-project instellen

Eerst heb je een Firebase-project nodig. Ga naar de Firebase Console en volg deze stappen:

  • Klik op 'Add project' en volg de aanwijzingen.
  • Klik na het aanmaken op de knop 'Add app' (het pictogram voor Android of iOS).
  • Registreer je app door de pakketnaam (Android) of bundle-ID (iOS) op te geven.
  • Download het configuratiebestand: google-services.json voor Android of GoogleService-Info.plist voor iOS.

Firebase toevoegen aan Flutter

Nadat je je project in de Firebase Console hebt ingesteld, moet je de benodigde afhankelijkheden toevoegen aan het pubspec.yaml-bestand van je Flutter-project.

We voegen firebase_core toe om Firebase te initialiseren en firebase_auth voor authenticatie.

Voer vervolgens flutter pub get uit in je terminal om de pakketten op te halen.

Firebase Core initialiseren

Voordat je Firebase-services gebruikt, moet je Firebase initialiseren in je Flutter-app, meestal in je functie main().

Zorg dat je WidgetsFlutterBinding.ensureInitialized() aanroept vóór Firebase.initializeApp(), zodat de binding van Flutter is geïnitialiseerd.

De FlutterFire CLI kan firebase_options.dart genereren voor een eenvoudige platformspecifieke configuratie.

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!')),
      ),
    );
  }
}

Plaatsing van configuratiebestand

Plaats de gedownloade configuratiebestanden op de juiste locaties:

  • Android: Verplaats google-services.json naar de map android/app/ van je Flutter-project.
  • iOS: Open je Flutter-project in Xcode (ios/Runner.xcworkspace) en sleep GoogleService-Info.plist naar de map 'Runner'. Zorg dat je 'Copy items if needed' selecteert en het bestand aan alle doelen toevoegt.

Registreren met e-mailadres en wachtwoord

Firebase Authentication ondersteunt verschillende aanmeldmethoden. We beginnen met e-mailadres en wachtwoord.

Schakel eerst de provider 'Email/Password' in de Firebase Console in via 'Authentication' -> 'Sign-in method'.

Gebruik vervolgens FirebaseAuth.instance.createUserWithEmailAndPassword om nieuwe gebruikers te registreren.

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.");
    }
  }
}

Aanmelden met e-mailadres en wachtwoord

Nadat een gebruiker is geregistreerd, kan die zich aanmelden met het e-mailadres en wachtwoord. Dit doe je met de methode signInWithEmailAndPassword.

Zowel de methoden voor registreren als aanmelden retourneren een object van het type UserCredential. Bij succes bevat dit object het object User.

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.");
    }
  }
}

Authenticatiestatus controleren

Het is belangrijk om te weten of een gebruiker momenteel is aangemeld of afgemeld. Firebase Auth biedt hiervoor een stream met de naam authStateChanges(). Deze stream geeft een nieuw object User door telkens wanneer de authenticatiestatus verandert.

Je kunt deze stream gebruiken met een widget StreamBuilder om je UI dynamisch bij te werken op basis van de aanmeldstatus van de gebruiker.

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'),
            ),
          ],
        ),
      ),
    );
  }
}

Google Sign-In instellen

Google Sign-In is een populaire en gebruiksvriendelijke authenticatiemethode. Zo schakel je deze in:

  • Ga in Firebase Console naar 'Authentication' -> 'Sign-in method' en schakel 'Google' in.
  • Voeg het pakket google_sign_in toe aan je pubspec.yaml.
  • Android: Zorg dat je SHA-1-vingerafdruk is geregistreerd in de instellingen van je Firebase-project.
  • iOS: Voeg de Reverse Client ID toe aan je bestand Info.plist (verkregen uit GoogleService-Info.plist).

Google Sign-In implementeren

Na de configuratie kun je Google Sign-In implementeren met het pakket GoogleSignIn om gebruikersgegevens op te halen. Vervolgens meld je de gebruiker met die gegevens aan bij Firebase.

Hiervoor gebruik je GoogleSignIn().signIn() en maak je daarna een GoogleAuthProvider.credential die je doorgeeft aan 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.");
    }
  }
}

Snelle controle van Firebase Auth

Wanneer moet je Firebase.initializeApp() aanroepen in een Flutter-applicatie om ervoor te zorgen dat alle Firebase-services gereed zijn?

Samenvatting en volgende stappen

Gefeliciteerd! Je hebt de basis geleerd van het integreren van Firebase in je Flutter-app en het instellen van authenticatie.

We hebben het volgende behandeld:

  • Een Firebase-project instellen en je Flutter-app toevoegen.
  • Firebase-afhankelijkheden toevoegen en Firebase Core initialiseren.
  • Registreren en aanmelden met e-mailadres en wachtwoord implementeren.
  • Wijzigingen in de authenticatiestatus van gebruikers controleren.
  • Google Sign-In instellen en implementeren.

Dit zijn fundamentele stappen voor het bouwen van veilige en interactieve Flutter-applicaties met Firebase. Vervolgens leer je meer over Cloud Firestore voor database-integratie!

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
22
Lessen
88

Veelgestelde vragen

Is de les “Firebase instellen en authenticatie” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Firebase instellen en authenticatie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Firebase instellen en authenticatie”?

Stel Firebase in uw Flutter-project in en implementeer gebruikersauthenticatie met e-mail/wachtwoord, Google Sign-In en andere providers. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Firebase instellen en authenticatie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Firebase instellen en authenticatie
  2. Cloud Firestore-database
  3. Cloud Storage en Functions
  4. Firebase Cloud Messaging en notificaties
← Terug naar Mobiele ontwikkeling met Flutter