## Inleiding [FlutterFlow](https://flutterflow.io/) is een low-code platform waarmee je visueel Flutter-applicaties kunt bouwen. Het biedt een drag-and-drop interface om de UI van je app te ontwerpen en genereert de bijbehorende Flutter-code. Volgens de officiële [documentatie](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) biedt het drie verschillende mogelijkheden voor authenticatie-integratie: 1. Via de ingebouwde Firebase-authenticatie 2. Via de ingebouwde Supabase-authenticatie 3. Aangepaste authenticatie Voor de eerste twee biedt FlutterFlow naadloze integratie met Firebase en Supabase. Je moet je Firebase- of Supabase-project instellen en de authenticatie-instellingen configureren in FlutterFlow. Als je echter een andere authenticatieprovider wilt gebruiken, moet je de authenticatielogica zelf implementeren. Wat betreft de [aangepaste authenticatie](https://docs.flutterflow.io/data-and-backend/custom-authentication), biedt FlutterFlow een manier om te integreren met elke authenticatieprovider die vertrouwt op een enkele aangepaste [authenticatie-API](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users). Echter, een directe uitwisseling van gebruikersgegevens tussen de client en de authenticatieserver wordt niet aanbevolen volgens moderne veiligheidsnormen. In plaats daarvan moet je een veilige authenticatiestroom gebruiken, zoals OAuth 2.0 of OpenID Connect (OIDC), om gebruikers te authenticeren. Voor moderne op OAuth 2.0 of OIDC gebaseerde Identity Providers (IdP) zoals Auth0, Okta en Logto wordt het gebruik van een Resource Owner Password Credentials (ROPC) grant type niet aanbevolen of is het verboden vanwege veiligheidsredenen. Zie [Verouderd ROPC grant type](https://blog.logto.io/deprecated-ropc-grant-type/) voor meer details. Een standaard OAuth 2.0 of OIDC-authenticatiestroom omvat meerdere stappen en omleidingen tussen de clientapplicatie, de autorisatieserver en de browser van de gebruiker. In deze post laten we je zien hoe je de `CustomAuthManager`-klasse van FlutterFlow aanpast met behulp van de [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) om een veilige authenticatiestroom te implementeren in je FlutterFlow-toepassing. ## Vereisten - Een [Logto Cloud](https://cloud.logto.io/) account of een self-hosted Logto-instantie. (Bekijk de [⚡ Aan de slag](https://docs.logto.io/docs/tutorials/get-started/) gids om een Logto-instantie te creëren) - Een Flutter-applicatie gecreëerd met FlutterFlow. - Registreer een flutter-applicatie in je Logto-console. - Een GitHub-repository om je aangepaste code in FlutterFlow te beheren. - Bekijk onze integratie [gids](https://docs.logto.io/quick-starts/flutter/) voor de Flutter SDK. - Logto Flutter SDK-pakket is beschikbaar op [pub.dev](https://pub.dev/packages/logto_dart_sdk) en Logto [github-repository](https://github.com/logto-io/dart). - De SDK is momenteel alleen geschikt voor Android- en iOS-platformen. - Het beheren van aangepaste code in GitHub is een premium functie in FlutterFlow. Je moet upgraden naar het `Pro`-pakket van FlutterFlow om deze functie in te schakelen. ## Stap 1: Beheer van aangepaste code inschakelen in FlutterFlow Om de `CustomAuthManager`-klasse aan te passen, moet je de functie voor aangepaste code inschakelen in FlutterFlow. Volg de [Beheer aangepaste code In GitHub](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github) gids om je FlutterFlow-project te koppelen en te synchroniseren met GitHub. Als dit is gedaan, heb je drie verschillende branches in je GitHub FlutterFlow-repository: 1. `main`: De hoofdtak voor het flutter-project. Je hebt deze tak nodig om je project te implementeren. 2. `flutterflow`: De tak waar FlutterFlow de wijzigingen van de UI-editor naar je codebase synchroniseert. 3. `develop`: De tak waar je je aangepaste code kunt wijzigen. ## Stap 2: Ontwerp en creëer je aangepaste UI-stroom in FlutterFlow ### Bouw je pagina's Creëer je UI in FlutterFlow. Je kunt de [FlutterFlow-documentatie](https://docs.flutterflow.io/) volgen om je UI te maken op basis van je vereisten. In deze tutorial, voor de minimale vereiste, gaan we ervan uit dat je twee pagina's hebt: 1. Een eenvoudige `HomePage` met een inlogknop. (Er is geen inlogformulier nodig, gebruikersauthenticatiestroom wordt aan de Logto-kant afgehandeld. Raadpleeg de [aanpassen sie](https://docs.logto.io/docs/recipes/customize-sie/) gids voor meer details.) ![home page](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. Een `user`-profielpagina om gebruikersinformatie en een uitlogknop weer te geven. ![user page](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### Aangepaste authenticatie inschakelen in FlutterFlow Ga naar de `App Settings` - `Authentication` pagina en schakel de aangepaste authenticatie in. Dit zal een `CustomAuthManager`-klasse en gerelateerde bestanden creëren in je FlutterFlow-project. FlutterFlow aangepaste authenticatie

## Stap 3: Synchroniseer je FlutterFlow-project met GitHub Nadat je je aangepaste UI hebt aangemaakt en de aangepaste authenticatie in FlutterFlow hebt ingeschakeld, moet je je project synchroniseren met GitHub. Ga naar de `integraties` - `GitHub` pagina en klik op `Push to Repository` FlutterFlow GitHub push

## Stap 4: Pas de `CustomAuthManager`-code aan Schakel over naar de `develop`-branche in je GitHub-repository en zet de nieuwste wijzigingen van de `flutterflow`-branche samen. Dit zal alle UI-wijzigingen naar je `develop`-tak synchroniseren, inclusief je paginawidgets en de vooraf gebouwde `CustomAuthManager`-klasse. ### Installeer Logto SDK-afhankelijkheid Voeg de Logto SDK-afhankelijkheid toe aan je project. ```bash flutter pub add logto_dart_sdk ``` Optioneel Http-pakket: Logto-client vereist een http-client om API-aanroepen te maken. Je kunt het `http`-pakket of een ander http-clientpakket van jouw keuze gebruiken. ```bash flutter pub add http ``` ### Werk de UserProvider-klasse bij De `UserProvider`-klasse is verantwoordelijk voor het beheren van de gebruikersauthenticatiestatus. We moeten de eigenschappen aanpassen om de door de Logto SDK verstrekte gebruikersauthenticatie-informatie op te slaan. Voeg een `idToken`-eigenschap toe met het type `OpenIdClaims` om de `id_token`-claims op te slaan voor de geauthenticeerde gebruiker. > De `OpenIdClaims`-klasse is gedefinieerd in Logto SDK, die de `OIDC`-standaard `id_token`-claims van een geauthenticeerde gebruiker zal verstrekken. ```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; } /// Genereert een stream van de geauthenticeerde gebruiker. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### Pas de CustomAuthManager-klasse aan en initialiseert Logto-client ```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-configuratie final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Werk de huidige gebruikersstream bij. 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('Fout bij initialiseren van auth: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` De `initialize`-methode start een Logto-clientinstantie en werkt de huidige gebruikersstream bij met de gebruikersauthenticatiestatus die in het lokale opslag wordt bewaard. > Logto SDK maakt gebruik van het [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) pakket om de gebruikersauthenticatiegegevens veilig op te slaan. Zodra de gebruiker is geauthenticeerd, worden de `id_token`-claims opgeslagen in de lokale opslag. ### Implementeer de inlogmethode met behulp van Logto-client Door de `LogtoClient.signIn`-methode aan te roepen, wordt een standaard `OIDC`-authenticatiestroom gestart. De Logto-inlogpagina wordt geopend in een webview. De webview-gebaseerde authenticatiestroom wordt aangedreven door [flutter_web_auth](https://pub.dev/packages/flutter_web_auth). ```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 zal de autorisatie, token-uitwisseling en gebruikersinformatieopslagstappen afhandelen. Zodra de gebruiker is geauthenticeerd, worden de `idTokenClaims` opgeslagen in de lokale opslag. Haal de `idTokenClaims` op van de LogtoClient en werk de huidige gebruikersstream bij. ### Implementeer de Uitlogmethode ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` De `signOut`-methode zal de gebruikersauthenticatiegegevens die in de lokale opslag zijn opgeslagen wissen en de huidige gebruikersstream bijwerken. ### Werk de hulpmethoden voor authenticatie bij - Voeg de `authManager` getter toe om toegang te krijgen tot de `CustomAuthManager`-instantie. - Voeg de `currentUserUid` getter toe om de huidige gebruikers-uid op te halen. - Voeg de `currentUserData` getter toe om de huidige gebruikersgegevens op te halen. - Voeg de `logtoClient` getter toe om toegang te krijgen tot de Logto-clientinstantie. ```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; ``` ## Stap 5: Werk de inlog- en uitlogknoppen bij in je UI ### Homepagina Roep de `authManager.signIn` methode aan om de authenticatiestroom te starten wanneer de gebruiker op de inlogknop klikt. > `redirectUri` is de callback-URL die zal worden gebruikt om de autorisatiecallback van de Logto-inlogpagina vast te leggen. > Zie de [implement sign-in](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) voor meer details over de redirectUri. ```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: 'Inloggen', // ... ) ``` De gebruiker wordt na succesvolle authenticatie doorgestuurd naar de `user`-pagina. ### Gebruikersprofielpagina Gebruik de auth-hulpmiddelen om toegang te krijgen tot de huidige gebruikersgegevens en de Logto-clientinstantie. Om bijvoorbeeld de gebruikersinformatie weer te geven met meerdere `Text`-widgets: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'Gebruiker ID: $currentUserUid', ), Text( 'Displaynaam: ${currentUserData?.name}', ), Text( 'Gebruikersnaam: ${currentUserData?.username}', ), Text( 'Email: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Roep de uitlogmethode aan wanneer de gebruiker op de uitlogknop klikt en stuur de gebruiker terug naar de startpagina. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Uitloggen', // ... ) ``` ## Testen Voer je FlutterFlow-applicatie uit op een emulator. Klik op de inlogknop op de startpagina om de authenticatiestroom te starten. De Logto-inlogpagina wordt geopend in een webview. Na succesvolle authenticatie wordt de gebruiker doorgestuurd naar de gebruikersprofielpagina. De gebruikersinformatie wordt weergegeven op de gebruikersprofielpagina. Klik op de uitlogknop om de gebruiker uit te loggen en de gebruiker terug te sturen naar de startpagina. Vergeet niet om de `develop`-tak weer samen te voegen met de `main`-tak en de wijzigingen naar de GitHub-repository te pushen. FlutterFlow GitHub-push is een eenrichtingssynchronisatie van FlutterFlow naar GitHub. Alle wijzigingen die in de `fluterflow`-tak zijn aangebracht, worden overschreven door de FlutterFlow UI-editor wanneer je de wijzigingen naar de GitHub-repository pusht. Zorg ervoor dat je de `develop`-tak gebruikt om je aangepaste code te beheren en de wijzigingen samen te voegen met de `main`-tak voor implementatie. ## Verdere lezingen De Logto SDK biedt meer methoden om te communiceren met de Logto API. Je kunt de `CustomAuthManager`-klasse verder aanpassen om meer functies te implementeren met de Logto SDK. - [Endpoint gebruikersinformatie](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Verkrijg resource toegangstoken](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Verkrijg organisatie toegangstoken](https://docs.logto.io/quick-starts/flutter/#organization)