Mehr
Vollständiger Leitfaden zur Authentifizierung von Drittanbietern in Flutter mit Parse auf Back4App

43min
Einführung
Die Integration von Authentifizierungsmethoden von Drittanbietern wie Facebook, Google und Apple in Ihre Flutter-App kann das Benutzererlebnis erheblich verbessern, indem flexible und bequeme Anmeldeoptionen bereitgestellt werden. Parse Server, betrieben von Back4App, bietet integrierte Unterstützung für diese Authentifizierungsanbieter. In diesem Tutorial lernen Sie, wie Sie die Authentifizierung von Drittanbietern in Ihrer Flutter-App mit dem Parse SDK auf Back4App implementieren.
Am Ende dieses Tutorials haben Sie eine Flutter-App mit voll funktionsfähigen Anmelde- und Registrierungsfunktionen, die Folgendes umfassen:
Standard-E-Mail/Passwort-Authentifizierung mit Parse.
Authentifizierungsmethoden von Drittanbietern:
Facebook
Google
Apple
Voraussetzungen
Um diesem Tutorial zu folgen, benötigen Sie Folgendes:
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Eine Flutter-Entwicklungsumgebung auf Ihrem Computer installiert. Folgen Sie diesem Leitfaden, wenn Sie Hilfe bei der Einrichtung von Flutter benötigen.
Grundkenntnisse in Flutter und Dart. Wenn Sie neu sind, schauen Sie sich Flutters Einführung an.
Entwicklerkonten für Facebook, Google und Apple (erforderlich für die Einrichtung von Anmeldemethoden von Drittanbietern).
Eine IDE oder einen Texteditor wie Visual Studio Code oder Android Studio.
Schritt 1 – Einrichten Ihres Back4App Backends
1.1. Erstellen eines Back4App Projekts
Melden Sie sich bei Ihrem Back4App-Dashboard an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen Namen für Ihre Anwendung ein, z.B. "AuthDemo", und klicken Sie auf "Erstellen".
Sobald das Projekt erstellt ist, navigieren Sie zu App-Einstellungen > Sicherheit & Schlüssel.
Notieren Sie sich Ihre Anwendungs-ID und Client-Schlüssel. Sie benötigen diese Werte, um Parse in Ihrer Flutter-App zu initialisieren.
1.2. Aktivieren von Authentifizierungsanbietern
Navigieren Sie in Ihrem Back4App-Dashboard zu Servereinstellungen > Authentifizierung.
Aktivieren Sie die Authentifizierungsmethoden, die Sie verwenden möchten:
Facebook
Google
Apple
Für jeden Anbieter müssen Sie spezifische Anmeldeinformationen (App-IDs, Client-IDs, Geheimnisse usw.) eingeben, die in den kommenden Schritten eingerichtet werden.
Schritt 2 – Installieren und Einrichten des Parse SDK in Flutter
2.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und erstellen Sie ein neues Flutter-Projekt:
Bash
flutter create auth_demo
cd auth_demo
flutter create auth_demo
cd auth_demo
﻿
2.2. Abhängigkeiten hinzufügen
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten für Parse und Drittanbieter-Anmeldeoptionen hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
﻿
Führen Sie flutter pub get aus, um die Abhängigkeiten zu installieren.
2.3. Parse in main.dart
Importieren Sie im lib/main.dart-Datei das Parse SDK und initialisieren Sie es in der main-Funktion:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_APP_ID' und 'YOUR_CLIENT_KEY' durch Ihre tatsächlichen Back4App-Anmeldeinformationen aus Schritt 1.
Schritt 3 – Implementierung der Standardauthentifizierung
3.1. Erstellen Sie den Authentifizierungsdienst
Erstellen Sie ein neues Verzeichnis namens services unter lib und fügen Sie eine Datei mit dem Namen auth_service.dart. Dieser Dienst wird die Benutzerregistrierung und -anmeldung mit Parse verwalten.
Dart
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
﻿
3.2. Erstellen Sie den Authentifizierungsbildschirm
Erstellen Sie ein neues Verzeichnis namens screens unter lib und fügen Sie eine Datei mit dem Namen auth_screen.dart. Dieser Bildschirm bietet die Benutzeroberfläche für die Standardauthentifizierung.
Dart
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
﻿
Schritt 4 – Integration der Facebook-Authentifizierung
4.1. Facebook-Entwicklerkonto einrichten
Erstellen Sie eine Facebook-App:
Gehe zu Facebook für Entwickler und melde dich an.
Klicken Sie auf "Meine Apps" und dann "App erstellen".
Wählen Sie "Verbraucher" als den App-Typ und klicken Sie "Weiter".
Füllen Sie das App-Name und Kontakt-E-Mail, dann klicken Sie auf "App erstellen".
Fügen Sie Facebook-Login zu Ihrer App hinzu:
Navigieren Sie in Ihrem App-Dashboard zu "Produkt hinzufügen" und wählen Sie "Facebook-Login" aus.
Wählen Sie "Android" und/oder "iOS" je nach Ihrer Zielplattform.
Befolgen Sie die von Facebook bereitgestellten Einrichtungsschritte. Sie benötigen die Bundle-ID Ihrer App für iOS und Paketname für Android.
OAuth-Redirect-URI konfigurieren:
Setzen Sie die OAuth-Umleitungs-URI auf: https://parseapi.back4app.com/auth/facebook/callback
App-ID und App-Geheimnis erhalten:
Gehe in deinem App-Dashboard zu "Einstellungen" > "Basis".
Notieren Sie sich die App-ID und App-Secret. 
App-ID und Geheimnis zu Back4App hinzufügen:
Im Back4App-Dashboard navigieren Sie zu Servereinstellungen > Authentifizierung.
Unter Facebook, geben Sie Ihre App-ID und App-Geheimnis ein.
4.2. Aktualisierung auth_service.dart mit Facebook-Login
Fügen Sie den folgenden Code hinzu, um die Facebook-Authentifizierung zu handhaben:
Dart
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
﻿
4.3. Fügen Sie die Facebook-Anmeldeschaltfläche zu auth_screen.dart
Fügen Sie die folgende Schaltfläche zu Ihrer Benutzeroberfläche hinzu:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
﻿
4.4. Plattform-spezifische Konfigurationen
Android
Aktualisieren Sie Ihre android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
﻿
Fügen Sie Ihre Facebook-App-ID zu android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
﻿
iOS
Aktualisieren Sie Ihre Info.plist-Datei:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
﻿
Schritt 5 – Integration der Google-Authentifizierung
5.1. Google-Entwicklerkonto einrichten
Ein Projekt in der Google Cloud Console erstellen:
Gehe zu Google Cloud Console und erstelle ein neues Projekt.
OAuth-Zustimmungsbildschirm konfigurieren:
Navigiere zu APIs & Dienste > OAuth-Zustimmungsbildschirm.
Richte den Zustimmungsbildschirm mit den erforderlichen Berechtigungen ein.
OAuth-Client-ID erstellen:
Gehe zu Anmeldeinformationen > Anmeldeinformationen erstellen > OAuth-Client-ID.
Wähle Webanwendung.
Füge Autorisierte Umleitungs-URIs: https://parseapi.back4app.com/auth/google/callback
Notiere die Client-ID und Client-Secret.
Füge die Client-ID und das Secret zu Back4App hinzu:
Im Back4App-Dashboard, unter Servereinstellungen > Authentifizierung, gib deine Client-ID und Client-Secret für Google ein.
5.2. Aktualisiere auth_service.dart mit Google Login
Fügen Sie den folgenden Code hinzu, um die Google-Authentifizierung zu handhaben:
Dart
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
5.3. Fügen Sie die Google-Anmeldeschaltfläche zu auth_screen.dart
Fügen Sie die folgende Schaltfläche zu Ihrer Benutzeroberfläche hinzu:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
﻿
5.4. Plattform-spezifische Konfigurationen
Android
Fügen Sie Folgendes zu Ihrer android/app/build.gradle Datei hinzu:
Text
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
﻿
Fügen Sie Ihre Google Client-ID zu android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
﻿
Zusätzliche Informationen
Aktualisieren Sie Ihre android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
﻿
iOS
Fügen Sie die umgekehrte Client-ID zu Ihrer Info.plist:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
﻿
Schritt 6 – Integration der Apple-Authentifizierung
6.1. Apple Developer-Konto einrichten
Registriere deine App:
Melde dich an bei Apple Developer Portal und registriere deine App.
Aktiviere die Anmeldung mit Apple:
Unter Identifiers, wähle deine App aus und aktiviere die Anmeldung mit Apple.
Erstelle eine Services-ID:
Erstelle eine Services-ID für deine App.
Setze die Redirect-URI auf: https://parseapi.back4app.com/auth/apple/callback
Generiere ein Client Secret:
Erstelle einen Sign in with Apple privaten Schlüssel.
Verwende diesen Schlüssel, um ein Client Secret zu generieren.
Füge Anmeldeinformationen zu Back4App hinzu:
Im Back4App-Dashboard, unter Servereinstellungen > Authentifizierung, gib deine Services-ID und dein Client Secret für Apple ein.
6.2. Aktualisiere auth_service.dart mit Apple Login
Fügen Sie den folgenden Code hinzu, um die Apple-Authentifizierung zu behandeln:
Dart
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
6.3. Fügen Sie die Apple-Anmeldeschaltfläche zu auth_screen.dart
Fügen Sie den folgenden Button zu Ihrer Benutzeroberfläche hinzu:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
﻿
6.4. Plattform-spezifische Konfigurationen
Nur iOS
Öffnen Sie Ihr Projekt in Xcode und gehen Sie zu Signing & Capabilities.
Klicken Sie auf "+ Capability" und fügen Sie "Sign in with Apple" hinzu.
Stellen Sie sicher, dass Ihr Bundle Identifier mit dem auf dem Apple Developer Portal registrierten übereinstimmt.
Schritt 7 – Testen Ihrer Anwendung
Jetzt, da Sie alle Authentifizierungsmethoden eingerichtet haben, können Sie Ihre App ausführen und jede Anmeldemöglichkeit testen.
7.1. App ausführen
Bash
flutter run
flutter run
﻿
Für iOS müssen Sie die App auf einem echten Gerät ausführen, um die Anmeldung mit Apple zu testen.
Für Android können Sie einen Emulator oder ein physisches Gerät verwenden.
7.2. Standardauthentifizierung testen
Geben Sie einen Benutzernamen, eine E-Mail und ein Passwort ein.
Tippen Sie auf "Registrieren" um einen neuen Benutzer zu erstellen.
Tippen Sie auf "Anmelden" um sich mit den erstellten Anmeldedaten anzumelden.
7.3. Facebook-Anmeldung testen
Tippen Sie auf "Mit Facebook anmelden".
Ein Facebook-Anmeldebildschirm wird angezeigt.
Melden Sie sich mit Ihren Facebook-Anmeldeinformationen an.
7.4. Test Google-Anmeldung
Tippen Sie auf "Mit Google anmelden".
Ein Google-Anmeldebildschirm wird angezeigt.
Melden Sie sich mit Ihrem Google-Konto an.
7.5. Test Apple-Anmeldung (nur iOS)
Tippen Sie auf "Mit Apple anmelden".
Die Apple-Anmeldeaufforderung wird angezeigt.
Authentifizieren Sie sich mit Ihrer Apple-ID.
Fazit
In diesem Tutorial haben Sie erfolgreich die Standard-E-Mail/Passwort-Authentifizierung implementiert und Drittanbieter-Authentifizierungsmethoden (Facebook, Google und Apple) in Ihre Flutter-App mit dem Parse SDK auf Back4App integriert. Dieses Setup verbessert die Benutzererfahrung, indem es mehrere bequeme Anmeldemöglichkeiten bietet.
Nächste Schritte
Benutzerprofile: Erweitern Sie die App, um Benutzerprofile zu verwalten, damit Benutzer ihre Informationen aktualisieren können.
Abmeldefunktionalität: Implementieren Sie Abmeldefunktionen für jede Authentifizierungsmethode.
Datensicherheit: Sichern Sie Ihre Daten, indem Sie rollenbasierte Zugriffskontrolle mit Parse ACLs und Rollen implementieren.
Fehlerbehandlung: Verbessern Sie die Fehlerbehandlung, um den Benutzern detailliertere Rückmeldungen zu geben.
UI-Verbesserungen: Passen Sie die Benutzeroberfläche an das Branding Ihrer App an und verbessern Sie die Benutzererfahrung.
Zusätzliche Ressourcen
﻿Back4App-Dokumentation﻿
﻿Parse Flutter SDK-Leitfaden﻿
﻿Offizielle Flutter-Dokumentation﻿
﻿Facebook für Entwickler﻿
﻿Google Identity Platform﻿
﻿Dokumentation zur Anmeldung mit Apple﻿
Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man Daten in Flutter mit fl_chart und Back4App visualisiert
ALS NÄCHSTES
So erstellen Sie Widgets auf dem Startbildschirm in Flutter mit HomeWidget und Back4App