Mobilutveckling med Flutter · Lektion

Konfiguration av Firebase och autentisering

Konfigurera Firebase i ert Flutter-projekt och implementera användarautentisering med e-post/lösenord, Google Sign-In och andra leverantörer.

Lektion 1 av 412 steg

Konfiguration av Firebase och autentisering är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Firebase för Flutter-appar

Välkommen till Firebase-integrering! Firebase är en kraftfull plattform från Google som erbjuder många backendtjänster för mobil- och webbapplikationer.

Den fungerar som en Backend-as-a-Service (BaaS), vilket innebär att den hanterar serveråtgärder så att du kan fokusera på att bygga appens frontend.

I den här lektionen konfigurerar vi Firebase i ett Flutter-projekt och implementerar grundläggande användarautentisering.

Konfigurera ett Firebase-projekt

Först behöver du ett Firebase-projekt. Gå till Firebase Console och följ dessa steg:

  • Klicka på 'Add project' och följ anvisningarna.
  • När projektet har skapats klickar du på knappen 'Add app' (Android- eller iOS-ikonen).
  • Registrera appen genom att ange paketnamnet (Android) eller bundle-ID:t (iOS).
  • Ladda ner konfigurationsfilen: google-services.json för Android eller GoogleService-Info.plist för iOS.

Lägga till Firebase i Flutter

När du har konfigurerat projektet i Firebase Console behöver du lägga till de nödvändiga beroendena i Flutter-projektets fil pubspec.yaml.

Vi lägger till firebase_core för att initiera Firebase och firebase_auth för autentisering.

Kör sedan flutter pub get i terminalen för att hämta paketen.

Initiera Firebase Core

Innan du använder någon Firebase-tjänst måste du initiera Firebase i Flutter-appen, vanligtvis i funktionen main().

Se till att anropa WidgetsFlutterBinding.ensureInitialized() före Firebase.initializeApp() så att Flutter-bindningen initieras.

FlutterFire CLI kan generera firebase_options.dart för enkel plattformsspecifik konfiguration.

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

Placering av konfigurationsfiler

Placera de nedladdade konfigurationsfilerna på rätt platser:

  • Android: Flytta google-services.json till katalogen android/app/ i ert Flutter-projekt.
  • iOS: Öppna ert Flutter-projekt i Xcode (ios/Runner.xcworkspace) och dra sedan GoogleService-Info.plist till mappen 'Runner'. Se till att välja 'Copy items if needed' och lägga till filen i alla mål.

Registrering med e-post och lösenord

Firebase Authentication stöder flera olika inloggningsmetoder. Vi börjar med e-post och lösenord.

Aktivera först leverantören 'Email/Password' i Firebase Console under 'Authentication' -> 'Sign-in method'.

Använd sedan FirebaseAuth.instance.createUserWithEmailAndPassword för att registrera nya användare.

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

Inloggning med e-post och lösenord

När en användare har registrerats kan hen logga in med sin e-postadress och sitt lösenord. Detta görs med metoden signInWithEmailAndPassword.

Både registrerings- och inloggningsmetoderna returnerar ett UserCredential-objekt, som innehåller User-objektet om åtgärden lyckas.

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

Övervaka autentiseringstillstånd

Det är viktigt att veta om en användare för närvarande är inloggad eller utloggad. Firebase Auth tillhandahåller en ström som heter authStateChanges() och som skickar ut ett nytt User-objekt varje gång autentiseringstillståndet ändras.

Strömmen kan användas med en StreamBuilder-widget för att dynamiskt uppdatera användargränssnittet utifrån användarens inloggningsstatus.

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

Konfigurera Google-inloggning

Google Sign-In är en populär och användarvänlig autentiseringsmetod. Så här aktiverar ni den:

  • Gå till 'Authentication' -> 'Sign-in method' i Firebase Console och aktivera 'Google'.
  • Lägg till paketet google_sign_in i pubspec.yaml.
  • Android: Se till att ert SHA-1-fingeravtryck är registrerat i Firebase-projektets inställningar.
  • iOS: Lägg till Reverse Client ID i filen Info.plist (hämtas från GoogleService-Info.plist).

Implementera Google-inloggning

Efter konfigurationen kan ni implementera Google-inloggning med paketet GoogleSignIn för att hämta användaruppgifter och sedan logga in i Firebase med dessa uppgifter.

Detta innebär att ni använder GoogleSignIn().signIn() och sedan skapar en GoogleAuthProvider.credential som skickas till 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.");
    }
  }
}

Snabbkontroll av Firebase Auth

När ska Firebase.initializeApp() anropas i en Flutter-applikation för att säkerställa att alla Firebase-tjänster är klara att användas?

Sammanfattning och nästa steg

Gratulerar! Ni har lärt er grunderna i att integrera Firebase i er Flutter-app och konfigurera autentisering.

Vi gick igenom:

  • Att konfigurera ett Firebase-projekt och lägga till er Flutter-app.
  • Att lägga till Firebase-beroenden och initiera Firebase Core.
  • Att implementera registrering och inloggning med e-post och lösenord.
  • Att övervaka ändringar i användarens autentiseringstillstånd.
  • Att konfigurera och implementera Google-inloggning.

Detta är grundläggande steg för att bygga säkra och interaktiva Flutter-applikationer med Firebase. Nästa steg är att utforska Cloud Firestore för databasintegration!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
22
Lektioner
88

Vanliga frågor

Är lektionen ”Konfiguration av Firebase och autentisering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Konfiguration av Firebase och autentisering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfiguration av Firebase och autentisering”?

Konfigurera Firebase i ert Flutter-projekt och implementera användarautentisering med e-post/lösenord, Google Sign-In och andra leverantörer. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Konfiguration av Firebase och autentisering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Konfiguration av Firebase och autentisering
  2. Cloud Firestore-databas
  3. Cloud Storage och Functions
  4. Firebase Cloud Messaging och aviseringar
← Tillbaka till Mobilutveckling med Flutter