## Introduzione [FlutterFlow](https://flutterflow.io/) è una piattaforma low-code che ti consente di creare applicazioni Flutter visivamente. Fornisce un'interfaccia drag-and-drop per progettare l'interfaccia utente della tua app e genera il corrispondente codice Flutter. Secondo la [documentazione](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) ufficiale, fornisce tre diverse opzioni di integrazione per l'autenticazione: 1. Tramite l'autenticazione Firebase integrata 2. Tramite l'autenticazione Supabase integrata 3. Autenticazione custom Per le prime due, FlutterFlow fornisce un'integrazione senza problemi con Firebase e Supabase. Dovrai configurare il tuo progetto Firebase o Supabase e impostare le impostazioni di autenticazione in FlutterFlow. Tuttavia, se desideri utilizzare un diverso provider di autenticazione, dovrai implementare autonomamente la logica di autenticazione. Per quanto riguarda l'[autenticazione custom](https://docs.flutterflow.io/data-and-backend/custom-authentication), FlutterFlow fornisce un modo per integrarsi con qualsiasi provider di autenticazione basato su una singola custom [API di autenticazione](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users). Tuttavia, uno scambio diretto delle credenziali dell'utente tra il client e il server di autenticazione non è consigliato dagli standard di sicurezza moderni. Invece, dovresti utilizzare un flusso di autenticazione sicuro come OAuth 2.0 o OpenID Connect (OIDC) per autenticare gli utenti. Per i moderni provider di Identità (IdP) basati su OAuth 2.0 o OIDC come Auth0, Okta e Logto, il tipo di concessione resource owner password credentials (ROPC) non è consigliato o è vietato per motivi di sicurezza. Vedi [Tipo di concessione ROPC deprecato](https://blog.logto.io/deprecated-ropc-grant-type/) per maggiori dettagli. Un flusso di autenticazione standard OAuth 2.0 o OIDC coinvolge più passaggi e reindirizzamenti tra l'applicazione client, il server di autorizzazione e il browser dell'utente. In questo post, ti mostreremo come personalizzare la classe `CustomAuthManager` di FlutterFlow utilizzando [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) per implementare un flusso di autenticazione sicuro nella tua applicazione FlutterFlow. ## Prerequisiti - Un account [Logto Cloud](https://cloud.logto.io/) o un'istanza Logto self-hosted. (Consulta la guida [⚡ Getting started](https://docs.logto.io/docs/tutorials/get-started/) per creare un'istanza Logto) - Un'applicazione Flutter creata utilizzando FlutterFlow. - Registrare un'applicazione flutter nella tua console Logto. - Un repository GitHub per gestire il tuo codice custom in FlutterFlow. - Consulta la nostra guida all'integrazione del Flutter SDK [qui](https://docs.logto.io/quick-starts/flutter/). - Il pacchetto Logto Flutter SDK è disponibile su [pub.dev](https://pub.dev/packages/logto_dart_sdk) e sul [repository GitHub](https://github.com/logto-io/dart) di Logto. - L'SDK è attualmente adatto solo per le piattaforme Android e iOS. - Gestire il codice custom in GitHub è una funzione premium in FlutterFlow. Dovrai aggiornare il tuo piano FlutterFlow a `Pro` per abilitare questa funzione. ## Passaggio 1: Abilitare la gestione del codice custom in FlutterFlow Per personalizzare la classe `CustomAuthManager`, devi abilitare la funzione di codice custom in FlutterFlow. Segui la guida [Manage Custom Code In GitHub](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github) per collegare e sincronizzare il tuo progetto FlutterFlow con GitHub. Una volta completato, avrai tre rami diversi nel tuo repository GitHub FlutterFlow: 1. `main`: Il ramo principale per il progetto flutter. Avrai bisogno di questo ramo per distribuire il tuo progetto. 2. `flutterflow`: Il ramo in cui FlutterFlow sincronizzerà le modifiche dall'editor UI alla tua base di codice. 3. `develop`: Il ramo in cui puoi modificare il tuo codice custom. ## Passaggio 2: Progettare e creare il tuo flusso UI custom in FlutterFlow ### Costruisci le tue pagine Crea la tua interfaccia utente in FlutterFlow. Puoi seguire la [documentazione FlutterFlow](https://docs.flutterflow.io/) per creare la tua interfaccia utente in base alle tue esigenze. In questo tutorial, per il requisito minimo, supporremo che tu abbia due pagine: 1. Una semplice `HomePage` con un pulsante di sign-in. (Non è necessario un modulo di sign-in, il flusso di autenticazione dell'utente è gestito dal lato di Logto. Consulta la guida [customize sie](https://docs.logto.io/docs/recipes/customize-sie/) per maggiori dettagli.) ![home page](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. Una pagina `user` del profilo utente per visualizzare le informazioni dell'utente e il pulsante di sign-out. ![user page](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### Abilitare l'autenticazione custom in FlutterFlow Vai alla pagina `App Settings` - `Authentication` e abilita l'autenticazione custom. Questo creerà una classe `CustomAuthManager` e i file correlati nel tuo progetto FlutterFlow. FlutterFlow custom authentication

## Passaggio 3: Sincronizzare il tuo progetto FlutterFlow con GitHub Dopo aver creato la tua interfaccia utente custom e abilitato l'autenticazione custom in FlutterFlow, devi sincronizzare il tuo progetto con GitHub. Vai alla pagina `integrations` - `GitHub` e fai clic su `Push to Repository` FlutterFlow GitHub push

## Passaggio 4: Personalizzare il codice di `CustomAuthManager` Passa al ramo `develop` nel tuo repository GitHub e unisci le ultime modifiche dal ramo `flutterflow`. Questo sincronizzerà tutte le modifiche UI nel tuo ramo `develop`, inclusi i widget delle pagine e la classe `CustomAuthManager` predefinita. ### Installare la dipendenza SDK di Logto Aggiungi la dipendenza Logto SDK al tuo progetto. ```bash flutter pub add logto_dart_sdk ``` Pacchetto Http opzionale: Il client Logto richiede un client http per effettuare chiamate API. Puoi utilizzare il pacchetto `http` o qualsiasi altro pacchetto client http di tua scelta. ```bash flutter pub add http ``` ### Aggiornare la classe UserProvider La classe `UserProvider` è responsabile della gestione dello stato di autenticazione dell'utente. Dobbiamo personalizzare le proprietà per memorizzare le informazioni di autenticazione dell'utente fornite dal Logto SDK. Aggiungi una proprietà `idToken` di tipo `OpenIdClaims` per memorizzare le dichiarazioni `id_token` per l'utente autenticato. > La classe `OpenIdClaims` è definita nel Logto SDK, che fornirà le dichiarazioni `id_token` standard OIDC da un utente autenticato. ```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; } /// Genera uno stream dell'utente autenticato. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### Personalizza la classe CustomAuthManager e inizializza il client Logto ```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; // Configurazione di Logto final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Aggiorna lo stream dell'utente corrente. 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('Errore durante l'inizializzazione dell'autenticazione: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` Il metodo `initialize` inizializzerà un'istanza di client di Logto e aggiornerà lo stream dell'utente corrente con lo stato di autenticazione dell'utente memorizzato nella memoria locale. > Il Logto SDK utilizza il pacchetto [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) per memorizzare in modo sicuro i dati di autenticazione dell'utente. Una volta che l'utente è autenticato, le dichiarazioni `id_token` verranno memorizzate nella memoria locale. ### Implementare il metodo di sign-in utilizzando il client Logto Chiamare il metodo `LogtoClient.signIn` avvierà un flusso di autenticazione `OIDC` standard. La pagina di sign-in di Logto verrà aperta in una webview. Il flusso di autenticazione basato su webview è supportato da [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, ); } ``` Il LogtoClient gestirà i passaggi di autorizzazione, scambio di token e recupero delle informazioni dell'utente. Una volta che l'utente è autenticato, le dichiarazioni `idTokenClaims` verranno memorizzate nella memoria locale. Recupera le dichiarazioni `idTokenClaims` dal LogtoClient e aggiorna lo stream dell'utente corrente. ### Implementare il metodo di Sign-out ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` Il metodo `signOut` cancellerà i dati di autenticazione dell'utente memorizzati nella memoria locale e aggiornerà lo stream dell'utente corrente. ### Aggiornare i metodi utili di auth - Aggiungi il getter `authManager` per accedere all'istanza di `CustomAuthManager`. - Aggiungi il getter `currentUserUid` per ottenere l'uid dell'utente corrente. - Aggiungi il getter `currentUserData` per ottenere i dati dell'utente corrente. - Aggiungi il getter `logtoClient` per accedere all'istanza del client Logto. ```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; ``` ## Passaggio 5: Aggiornare i pulsanti di sign-in e sign-out nella tua UI ### Home Page Chiamare il metodo `authManager.signIn` per avviare il flusso di autenticazione quando l'utente clicca sul pulsante di sign-in. > `redirectUri` è l'URL di callback che verrà utilizzato per catturare il callback di autorizzazione dalla pagina di sign-in di Logto. > Consulta [implement sign-in](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) per ulteriori dettagli sul 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: 'Sign In', // ... ) ``` L'utente verrà reindirizzato alla pagina `user` dopo un'autenticazione riuscita. ### Pagina del profilo utente Utilizza i getter utili di auth per accedere ai dati dell'utente corrente e all'istanza del client Logto. Ad esempio, per visualizzare le informazioni dell'utente utilizzando più widget `Text`: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'User ID: $currentUserUid', ), Text( 'Display Name: ${currentUserData?.name}', ), Text( 'Username: ${currentUserData?.username}', ), Text( 'Email: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Avvia il metodo di sign-out quando l'utente clicca sul pulsante di sign-out e reindirizza l'utente alla home page. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Sign Out', // ... ) ``` ## Testing Esegui la tua applicazione FlutterFlow su un emulatore. Clicca sul pulsante di sign-in nella home page per avviare il flusso di autenticazione. La pagina di sign-in di Logto verrà aperta in una webview. Dopo un'autenticazione riuscita, l'utente verrà reindirizzato alla pagina del profilo utente. Le informazioni dell'utente verranno visualizzate sulla pagina del profilo utente. Clicca sul pulsante di sign-out per disconnettere l'utente e reindirizzarlo alla home page. Non dimenticare di unire il ramo `develop` di nuovo nel ramo `main` e spingere le modifiche al repository GitHub. Il push su GitHub di FlutterFlow è una sincronizzazione unidirezionale da FlutterFlow a GitHub. Eventuali modifiche apportate sotto il ramo `flutterflow` verranno sovrascritte dall'editor UI di FlutterFlow quando spingerai le modifiche al repository GitHub. Assicurati di utilizzare il ramo `develop` per gestire il tuo codice custom e unire le modifiche di nuovo nel ramo `main` per la distribuzione. ## Ulteriori letture Logto SDK fornisce ulteriori metodi per interagire con l'API di Logto. Potresti personalizzare ulteriormente la classe `CustomAuthManager` per implementare altre funzionalità utilizzando il Logto SDK. - [Endpoint informazioni utente](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Ottenere il token di accesso alla risorsa](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Ottenere il token di accesso all'organizzazione](https://docs.logto.io/quick-starts/flutter/#organization)