## Einführung [FlutterFlow](https://flutterflow.io/) ist eine Low-Code-Plattform, die es dir ermöglicht, Flutter-Anwendungen visuell zu erstellen. Sie bietet eine Drag-and-Drop-Oberfläche, um das UI deiner App zu gestalten, und erzeugt den entsprechenden Flutter-Code. Laut der offiziellen [Dokumentation](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) bietet FlutterFlow drei verschiedene Integrationsmöglichkeiten für die Authentifizierung: 1. Über die eingebaute Firebase-Authentifizierung 2. Über die eingebaute Supabase-Authentifizierung 3. Benutzerdefinierte Authentifizierung Für die ersten beiden bietet FlutterFlow eine nahtlose Integration mit Firebase und Supabase. Du musst dein Firebase- oder Supabase-Projekt einrichten und die Authentifizierungseinstellungen in FlutterFlow konfigurieren. Wenn du jedoch einen anderen Authentifizierungsanbieter verwenden möchtest, musst du die Authentifizierungslogik selbst implementieren. Was die [benutzerdefinierte Authentifizierung](https://docs.flutterflow.io/data-and-backend/custom-authentication) betrifft, so bietet FlutterFlow eine Möglichkeit, mit jedem Authentifizierungsanbieter zu integrieren, der auf einer einzigen benutzerdefinierten [Authentifizierungs-API](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users) basiert. Ein direkter Austausch von Benutzeranmeldedaten zwischen dem Client und dem Authentifizierungsserver wird jedoch von modernen Sicherheitsstandards nicht empfohlen. Stattdessen solltest du einen sicheren Authentifizierungsablauf wie OAuth 2.0 oder OpenID Connect (OIDC) verwenden, um Benutzer zu authentifizieren. Für moderne auf OAuth 2.0 oder OIDC basierende Identity Provider (IdP) wie Auth0, Okta und Logto wird der Resource Owner Password Credentials (ROPC) Grant-Typ aus Sicherheitsgründen nicht empfohlen oder sogar untersagt. Siehe [Veralteter ropc-Grant-Typ](https://blog.logto.io/deprecated-ropc-grant-type/) für weitere Details. Ein Standard-OAuth 2.0- oder OIDC-Authentifizierungsablauf umfasst mehrere Schritte und Weiterleitungen zwischen der Client-Anwendung, dem Autorisierungsserver und dem Browser des Benutzers. In diesem Beitrag zeigen wir dir, wie du die `CustomAuthManager`-Klasse von FlutterFlow mithilfe des [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) anpassen kannst, um einen sicheren Authentifizierungsablauf in deiner FlutterFlow-Anwendung zu implementieren. ## Voraussetzungen - Ein [Logto Cloud](https://cloud.logto.io/)-Konto oder eine selbst gehostete Logto-Instanz. (Sieh dir die Anleitung [⚡ Erste Schritte](https://docs.logto.io/docs/tutorials/get-started/) an, um eine Logto-Instanz zu erstellen) - Eine Flutter-Anwendung, die mit FlutterFlow erstellt wurde. - Registriere eine Flutter-Anwendung in deiner Logto-Konsole. - Ein GitHub-Repository zur Verwaltung deines benutzerdefinierten Codes in FlutterFlow. - Schau dir unser Integrations-Leitfaden für das Flutter SDK an [Leitfaden](https://docs.logto.io/quick-starts/flutter/). - Das Logto Flutter SDK-Paket ist auf [pub.dev](https://pub.dev/packages/logto_dart_sdk) und dem Logto [GitHub-Repository](https://github.com/logto-io/dart) verfügbar. - Das SDK eignet sich derzeit nur für Android- und iOS-Plattformen. - Die Verwaltung von benutzerdefiniertem Code in GitHub ist ein Premium-Feature in FlutterFlow. Du musst dein FlutterFlow auf den `Pro`-Plan upgraden, um diese Funktion zu aktivieren. ## Schritt 1: Verwaltung von benutzerdefiniertem Code in FlutterFlow aktivieren Um die `CustomAuthManager`-Klasse anzupassen, musst du die Funktion für benutzerdefinierten Code in FlutterFlow aktivieren. Folge dem [Manage Custom Code In GitHub](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github) Leitfaden, um dein FlutterFlow-Projekt mit GitHub zu verknüpfen und zu synchronisieren. Sobald dies erledigt ist, wirst du drei verschiedene Branches in deinem GitHub FlutterFlow-Repository haben: 1. `main`: Der Hauptzweig für das Flutter-Projekt. Du wirst diesen Zweig benötigen, um dein Projekt bereitzustellen. 2. `flutterflow`: Der Zweig, in dem FlutterFlow die Änderungen vom UI-Editor in deinem Code-Repository synchronisiert. 3. `develop`: Der Zweig, in dem du deinen benutzerdefinierten Code ändern kannst. ## Schritt 2: Entwirf und erstelle deinen benutzerdefinierten UI-Flow in FlutterFlow ### Erstelle deine Seiten Erstelle dein UI in FlutterFlow. Du kannst der [FlutterFlow-Dokumentation](https://docs.flutterflow.io/) folgen, um dein UI basierend auf deinen Anforderungen zu erstellen. In diesem Tutorial gehen wir als Mindestanforderung davon aus, dass du zwei Seiten hast: 1. Eine einfache `HomePage` mit einer Anmeldeschaltfläche. (Es wird kein Anmeldeformular benötigt, der Authentifizierungsablauf wird auf der Logto-Seite gehandhabt. Sieh dir den [Customize sie](https://docs.logto.io/docs/recipes/customize-sie/) Leitfaden für weitere Details an.) ![Startseite](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. Eine `user`-Profilseite, um Benutzerinformationen anzuzeigen und eine Abmeldeschaltfläche. ![Benutzerseite](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### Benutzerdefinierte Authentifizierung in FlutterFlow aktivieren Gehe zu den `App Settings` - `Authentication` Seite und aktiviere die benutzerdefinierte Authentifizierung. Dadurch wird eine `CustomAuthManager`-Klasse und zugehörige Dateien in deinem FlutterFlow-Projekt erstellt. FlutterFlow benutzerdefinierte Authentifizierung

FlutterFlow benutzerdefinierte Authentifizierung

## Schritt 3: Synchronisiere dein FlutterFlow-Projekt mit GitHub Nachdem du dein benutzerdefiniertes UI erstellt und die benutzerdefinierte Authentifizierung in FlutterFlow aktiviert hast, musst du dein Projekt mit GitHub synchronisieren. Gehe zur `integrations` - `GitHub` Seite und klicke auf `Push to Repository` FlutterFlow GitHub Push

## Schritt 4: Passen Sie den Code des `CustomAuthManager` an Wechsele zum `develop`-Branch in deinem GitHub-Repository und merge die neuesten Änderungen vom `flutterflow`-Branch. Dadurch werden alle UI-Änderungen in deinen `develop`-Branch synchronisiert, einschließlich deiner Seitenwidgets und der vorgefertigten `CustomAuthManager`-Klasse. ### Logto SDK-Abhängigkeit installieren Füge die Logto SDK-Abhängigkeit zu deinem Projekt hinzu. ```bash flutter pub add logto_dart_sdk ``` Optionales Http-Paket: Der Logto-Client benötigt einen Http-Client, um API-Aufrufe zu tätigen. Du kannst das `http`-Paket oder ein anderes Http-Client-Paket deiner Wahl verwenden. ```bash flutter pub add http ``` ### Aktualisiere die UserProvider-Klasse Die `UserProvider`-Klasse ist dafür verantwortlich, den Authentifizierungsstatus des Benutzers zu verwalten. Wir müssen die Eigenschaften anpassen, um die von der Logto SDK bereitgestellten Authentifizierungsinformationen des Benutzers zu speichern. Füge eine `idToken`-Eigenschaft mit dem Typ `OpenIdClaims` hinzu, um die `id_token`-Claims für den authentifizierten Benutzer zu speichern. > Die `OpenIdClaims`-Klasse ist in der Logto-SDK definiert und stellt die `OIDC`-Standard-`id_token`-Claims eines authentifizierten Benutzers bereit. ```dart // lib/auth/custom_auth/custom_auth_user_provider.dart import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'package:rxdart/rxdart.dart'; import 'custom_auth_manager.dart'; class FlutterFlowAuthAuthUser { FlutterFlowAuthAuthUser({required this.loggedIn, this.uid, this.idToken}); bool loggedIn; String? uid; OpenIdClaims? idToken; } /// Erzeugt einen Stream des authentifizierten Benutzers. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### Anpassen der CustomAuthManager-Klasse und Initialisieren des Logto-Clients ```dart // lib/auth/custom_auth/custom_auth_manager.dart import 'dart:async'; import 'package:flutter/foundation.dart'; import 'package:http/http.dart' as http; import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_user_provider.dart'; export 'custom_auth_manager.dart'; class CustomAuthManager { late LogtoClient logtoClient; // Logto-Konfiguration final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Aktualisiere den aktuellen Benutzerstream. final updatedUser = FlutterFlowAuthAuthUser( loggedIn: loggedIn, uid: uid, idToken: idToken, ); flutterFlowAuthAuthUserSubject.add(updatedUser); return updatedUser; } Future initialize() async { logtoClient = LogtoClient(config: logtoConfig, httpClient: http.Client()); late OpenIdClaims? idToken; try { idToken = await logtoClient.idTokenClaims; } catch (e) { if (kDebugMode) { print('Fehler beim Initialisieren der Authentifizierung: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` Die `initialize`-Methode wird eine Logto-Client-Instanz initiieren und den aktuellen Benutzerstream mit dem im lokalen Speicher gespeicherten Authentifizierungsstatus des Benutzers aktualisieren. > Das Logto SDK verwendet das Paket [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage), um die Benutzerauthentifizierungsdaten sicher zu speichern. Sobald der Benutzer authentifiziert ist, werden die `id_token`-Claims im lokalen Speicher gespeichert. ### Implementiere die Anmeldemethode mit dem Logto-Client Der Aufruf der Methode `LogtoClient.signIn` wird einen standardmäßigen `OIDC`-Authentifizierungsablauf einleiten. Die Logto-Anmeldeseite wird in einer Webansicht geöffnet. Der auf Webansichten basierende Authentifizierungsablauf wird durch [flutter_web_auth](https://pub.dev/packages/flutter_web_auth) unterstützt. ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signIn( String redirectUri, ) async { await logtoClient.signIn(redirectUri); var idTokenClaims = await logtoClient.idTokenClaims; return _updateCurrentUser( loggedIn: idTokenClaims != null, uid: idTokenClaims?.subject, idToken: idTokenClaims, ); } ``` LogtoClient wird die Autorisierung, den Token-Austausch und das Abrufen von Benutzerinformationen verwalten. Sobald der Benutzer authentifiziert ist, werden die `idTokenClaims` im lokalen Speicher gespeichert. Rufe die `idTokenClaims` vom LogtoClient ab und aktualisiere den aktuellen Benutzerstream. ### Implementiere die Abmeldemethode ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` Die Methode `signOut` wird die im lokalen Speicher gespeicherten Benutzerauthentifizierungsdaten löschen und den aktuellen Benutzerstream aktualisieren. ### Aktualisiere die Auth-Utilitary-Methoden - Füge den `authManager`-Getter hinzu, um auf die `CustomAuthManager`-Instanz zuzugreifen. - Füge den `currentUserUid`-Getter hinzu, um die aktuelle Benutzer-UID zu erhalten. - Füge den `currentUserData`-Getter hinzu, um die aktuellen Benutzerdaten zu erhalten. - Füge den `logtoClient`-Getter hinzu, um auf die Logto-Client-Instanz zuzugreifen. ```dart // lib/auth/custom_auth/auth_util.dart import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_manager.dart'; export 'custom_auth_manager.dart'; final _authManager = CustomAuthManager(); CustomAuthManager get authManager => _authManager; String get currentUserUid => currentUser?.uid ?? ''; OpenIdClaims? get currentUserData => currentUser?.idToken; LogtoClient get logtoClient => _authManager.logtoClient; ``` ## Schritt 5: Aktualisiere die Anmelde- und Abmeldeschaltflächen in deinem UI ### Startseite Rufe die Methode `authManager.signIn` auf, um den Authentifizierungsablauf zu starten, wenn der Benutzer auf die Anmeldeschaltfläche klickt. > `redirectUri` ist die Callback-URL, die verwendet wird, um den Autorisierungs-Callback von der Logto-Anmeldeseite aufzunehmen. > Sieh dir die [Anmeldung implementieren](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) für weitere Details zur Redirect-URL an. ```dart // lib/pages/home_page/home_page_widget.dart final redirectUri = 'io.logto://callback'; // ... FFButtonWidget( onPressed: () async { GoRouter.of(context).prepareAuthEvent(); await authManager.signIn(redirectUri); context.replaceNamed('user'); }, text: 'Anmelden', // ... ) ``` Nach erfolgreicher Authentifizierung wird der Benutzer zur `user`-Seite weitergeleitet. ### Benutzerprofilseite Verwende die Auth-Utilitary-Getter, um auf die aktuellen Benutzerdaten und die Logto-Client-Instanz zuzugreifen. Beispielsweise kannst du die Benutzerinformationen mit mehreren `Text`-Widgets anzeigen: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'Benutzer-ID: $currentUserUid', ), Text( 'Anzeigename: ${currentUserData?.name}', ), Text( 'Benutzername: ${currentUserData?.username}', ), Text( 'E-Mail: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Führe die Abmeldemethode aus, wenn der Benutzer auf die Abmeldeschaltfläche klickt, und leite den Benutzer zurück zur Startseite. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Abmelden', // ... ) ``` ## Testen Führe deine FlutterFlow-Anwendung in einem Emulator aus. Klicke auf der Startseite auf die Anmeldeschaltfläche, um den Authentifizierungsablauf zu starten. Die Logto-Anmeldeseite wird in einer Webansicht geöffnet. Nach erfolgreicher Authentifizierung wird der Benutzer zur Benutzerprofilseite weitergeleitet. Die Benutzerinformationen werden auf der Benutzerprofilseite angezeigt. Klicke auf die Abmeldeschaltfläche, um den Benutzer abzumelden und den Benutzer zurück zur Startseite zu leiten. Vergiss nicht, den `develop`-Branch wieder in den `main`-Branch zu mergen und die Änderungen in das GitHub-Repository zu pushen. Das GitHub-Push von FlutterFlow ist eine unidirektionale Synchronisierung von FlutterFlow zu GitHub. Alle Änderungen, die unter dem `flutterflow`-Branch vorgenommen werden, werden vom FlutterFlow-UI-Editor überschrieben, wenn du die Änderungen in das GitHub-Repository pushst. Achte darauf, den `develop`-Branch zu verwenden, um deinen benutzerdefinierten Code zu verwalten, und merge die Änderungen zurück in den `main`-Branch für die Bereitstellung. ## Weiterführende Lektüre Das Logto SDK bietet weitere Methoden zur Interaktion mit der Logto-API. Du kannst die `CustomAuthManager`-Klasse weiter anpassen, um mehr Funktionen mit dem Logto SDK zu implementieren. - [Benutzer-Info-Endpunkt](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Zugriffstoken für Ressourcen abrufen](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Zugriffstoken für Organisationen abrufen](https://docs.logto.io/quick-starts/flutter/#organization)