## Introduktion [FlutterFlow](https://flutterflow.io/) är en plattform med lågkod som låter dig bygga Flutter-applikationer visuellt. Den erbjuder ett dra-och-släpp-gränssnitt för att designa din apps användargränssnitt och genererar motsvarande Flutter-kod. Enligt den officiella [dokumentationen](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) erbjuder den tre olika alternativ för autentisering: 1. Genom den inbyggda Firebase-autentiseringen 2. Genom den inbyggda Supabase-autentiseringen 3. Anpassad autentisering För de första två erbjuder FlutterFlow en sömlös integration med Firebase och Supabase. Du behöver ställa in ditt Firebase- eller Supabase-projekt och konfigurera autentiseringsinställningarna i FlutterFlow. Men om du vill använda en annan autentiseringsleverantör måste du implementera autentiseringslogiken själv. När det gäller den [anpassade autentiseringen](https://docs.flutterflow.io/data-and-backend/custom-authentication) erbjuder FlutterFlow ett sätt att integrera med vilken autentiseringsleverantör som helst med hjälp av en enda anpassad [autentiserings-API](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users). Men en direkt användarcertifikatsutbyte mellan klienten och autentiseringstjänsten rekommenderas inte av moderna säkerhetsstandarder. I stället bör du använda ett säkert autentiseringsflöde som OAuth 2.0 eller OpenID Connect (OIDC) för att autentisera användare. För moderna OAuth 2.0 eller OIDC-baserade Identitetsleverantörer (IdP) som Auth0, Okta och Logto, rekommenderas eller förbjuds en resursägarens lösenordslettersansökningsbeviljande (ROPC) på grund av säkerhetsskäl. Se [Deprecated ropc grant type](https://blog.logto.io/deprecated-ropc-grant-type/) för mer detaljer. Ett standard OAuth 2.0 eller OIDC-autentiseringsflöde involverar flera steg och omdirigeringar mellan klientapplikationen, auktoriseringstjänsten och användarens webbläsare. I det här inlägget kommer vi att visa dig hur du anpassar FluterFlows `CustomAuthManager`-klass med hjälp av [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) för att implementera ett säkert autentiseringsflöde i din FlutterFlow-applikation. ## Förutsättningar - Ett [Logto Cloud](https://cloud.logto.io/) konto eller en egenhhostad Logto-instans. (Kolla in [⚡ Komma igång](https://docs.logto.io/docs/tutorials/get-started/) guiden för att skapa en Logto-instans) - En Flutter-applikation skapad med FlutterFlow. - Registrera en flutter-applikation i din Logto-konsol. - Ett GitHub-repository för att hantera din anpassade kod i FlutterFlow. - Kolla in vår Flutter SDK:s integrations[guide](https://docs.logto.io/quick-starts/flutter/). - Logto Flutter SDK-paketet är tillgängligt på [pub.dev](https://pub.dev/packages/logto_dart_sdk) och Logtos [github-repository](https://github.com/logto-io/dart). - SDK:n är för närvarande endast lämpad för Android- och iOS-plattformar. - Hantera anpassad kod på GitHub är en premiumfunktion i FlutterFlow. Du behöver uppgradera ditt FlutterFlow till `Pro`-planen för att aktivera denna funktion. ## Steg 1: Aktivera hantering av anpassad kod i FlutterFlow För att anpassa `CustomAuthManager`-klassen behöver du aktivera funktionen för anpassad kod i FlutterFlow. Följ [Manage Custom Code In GitHub](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github)-guiden för att länka och synkronisera ditt FlutterFlow-projekt med GitHub. När det är klart har du tre olika grenar under ditt GitHub FlutterFlow-repository: 1. `main`: huvudgrenen för flutter-projektet. Du behöver denna gren för att distribuera ditt projekt. 2. `flutterflow`: grenen där FlutterFlow kommer att synkronisera ändringarna från UI-redigeraren till din kodbas. 3. `develop`: grenen där du kan modifiera din anpassade kod. ## Steg 2: Designa och skapa ditt anpassade användarflöde i FlutterFlow ### Bygg dina sidor Skapa ditt användargränssnitt i FlutterFlow. Du kan följa [FlutterFlow-dokumentationen](https://docs.flutterflow.io/) för att skapa ditt användargränssnitt baserat på dina krav. I den här handledningen, för minimikravet, antar vi att du har två sidor: 1. En enkel `HomePage` med en inloggningsknapp. (Inget inloggningsformulär behövs, användarens autentiseringsflöde hanteras på Logto-sidan. Vänligen kontrollera [anpassa sie](https://docs.logto.io/docs/recipes/customize-sie/) guiden för mer detaljer.) ![hemsida](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. En `användar` profilsida för att visa användarinformation och en utloggningsknapp. ![användarsida](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### Aktivera anpassad autentisering i FlutterFlow Gå till `App Settings` - `Authentication`-sidan och aktivera den anpassade autentiseringen. Detta kommer att skapa en `CustomAuthManager`-klass och relaterade filer i ditt FlutterFlow-projekt. FlutterFlow anpassad autentisering

## Steg 3: Synkronisera ditt FlutterFlow-projekt med GitHub När du har skapat din anpassade användargränssnitt och aktiverat den anpassade autentiseringen i FlutterFlow, behöver du synkronisera ditt projekt med GitHub. Gå till `integrations` - `GitHub`-sidan och klicka på `Push to Repository` FlutterFlow GitHub push

## Steg 4: Anpassa `CustomAuthManager`-koden Byt till `develop`-grenen i ditt GitHub-repository och sammanfoga de senaste ändringarna från `flutterflow`-grenen. Detta kommer att synkronisera alla UI-ändringar till din `develop`-gren inklusive dina sidwidgets och den förbyggda `CustomAuthManager`-klassen. ### Installera Logto SDK-beroende Lägg till Logto SDK-beroendet till ditt projekt. ```bash flutter pub add logto_dart_sdk ``` Valfritt Http-paket: Logto-klienten kräver en http-klient för att göra API-anrop. Du kan använda `http`-paketet eller någon annan http-klientpaket efter eget val. ```bash flutter pub add http ``` ### Uppdatera UserProvider-klassen `UserProvider`-klassen är ansvarig för att hantera användarens autentiseringsstatus. Vi måste anpassa egenskaperna för att lagra användarens autentiseringsinformation som tillhandahålls av Logto SDK. Lägg till en `idToken`-egenskap med typen `OpenIdClaims` för att lagra `id_token`-anspråk för den autentiserade användaren. > `OpenIdClaims`-klassen är definierad i Logto SDK och kommer att tillhandahålla `OIDC`-standardens `id_token`-anspråk från en autentiserad användare. ```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; } /// Genererar en ström av den autentiserade användaren. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### Anpassa CustomAuthManager-klassen och initiera Logto-klienten ```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}) { // Uppdatera den nuvarande användarströmmen. 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('Fel vid initialisering av autentisering: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` `initialize`-metoden kommer att initiera en Logto-klientinstans och uppdatera den nuvarande användarströmmen med användarens autentiseringsstatus som har sparats i det lokala lagret. > Logto SDK använder paketet [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) för att lagra användarens autentiseringsdata säkert. När användaren är autentiserad kommer `id_token`-anspråk att sparas i det lokala lagret. ### Implementera inloggningsmetoden med Logto-klienten Anropa metoden `LogtoClient.signIn` för att initiera ett standard `OIDC`-autentiseringsflöde. Logto inloggningssidan kommer att öppnas i en webview. Det webview-baserade autentiseringsflödet drivs av [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 kommer att hantera auktorisation, utbyte av tokens och hämtning av användarinformation. När användaren är autentiserad kommer `idTokenClaims` att lagras i det lokala lagret. Hämta `idTokenClaims` från LogtoClient och uppdatera den nuvarande användarströmmen. ### Implementera Utloggningsmetoden ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` `signOut`-metoden kommer att rensa användarens autentiseringsdata som är lagrade i det lokala lagret och uppdatera den nuvarande användarströmmen. ### Uppdatera autentiseringsverktygsmetoderna - Lägg till `authManager`-hämtare för att komma åt `CustomAuthManager`-instansen. - Lägg till `currentUserUid`-hämtare för att få den nuvarande användarens uid. - Lägg till `currentUserData`-hämtare för att få den nuvarande användardatan. - Lägg till `logtoClient`-hämtare för att komma åt Logto-klientinstansen. ```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; ``` ## Steg 5: Uppdatera inloggnings- och utloggningsknapparna i ditt användargränssnitt ### Startsida Anropa metoden `authManager.signIn` för att initiera autentiseringsflödet när användaren klickar på inloggningsknappen. > `redirectUri` är callback URL som kommer att användas för att fånga upp auktoriseringscallback från Logto inloggningssidan. > Se [implementera inloggning](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) för mer detaljer om 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: 'Logga In', // ... ) ``` Användaren kommer att omdirigeras till `user`-sidan efter lyckad autentisering. ### Användarens profilsida Använd autentiserinsgverktygets hämtare för att komma åt den nuvarande användardatan och Logto-klientinstansen. Till exempel, för att visa användarinformationen med flera `Text`-widgets: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'Användar ID: $currentUserUid', ), Text( 'Visningsnamn: ${currentUserData?.name}', ), Text( 'Användarnamn: ${currentUserData?.username}', ), Text( 'Email: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Initiera utloggningsmetoden när användaren klickar på utloggningsknappen och omdirigera användaren tillbaka till startsidan. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Logga Ut', // ... ) ``` ## Testning Kör din FlutterFlow-applikation på en emulator. Klicka på inloggningsknappen på startsidan för att initiera autentiseringsflödet. Logto inloggningssidan kommer att öppnas i en webview. Efter lyckad autentisering kommer användaren att omdirigeras till användarens profilsida. Användarinformationen kommer att visas på användarens profilsida. Klicka på utloggningsknappen för att logga ut användaren och omdirigera användaren tillbaka till startsidan. Glöm inte att sammanfoga `develop`-grenen tillbaka till `main`-grenen och skicka förändringarna till GitHub-repository. FlutterFlow github push är en envägssynkronisering från FlutterFlow till GitHub. Eventuella ändringar gjorda under `fluterflow`-grenen kommer att överskridas av FlutterFlow UI-redigeraren när du skickar förändringarna till GitHub-repository. Se till att använda `develop`-grenen för att hantera din anpassade kod och sammanfoga förändringarna tillbaka till `main`-grenen för distribution. ## Ytterligare läsning Logto SDK tillhandahåller flera metoder för att interagera med Logto API. Du kan ytterligare anpassa `CustomAuthManager`-klassen för att implementera fler funktioner med hjälp av Logto SDK. - [Användarinformations Endpoint](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Få resurs åtkomsttoken](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Få organisations åtkomsttoken](https://docs.logto.io/quick-starts/flutter/#organization)