Impara come implementare l'autenticazione custom nella tua applicazione Flutter utilizzando il Logto Flutter SDK.
FlutterFlow è 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 ufficiale, fornisce tre diverse opzioni di integrazione per l'autenticazione:
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, FlutterFlow fornisce un modo per integrarsi con qualsiasi provider di autenticazione basato su una singola custom API di autenticazione.
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 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 per implementare un flusso di autenticazione sicuro nella tua applicazione FlutterFlow.
Per personalizzare la classe CustomAuthManager, devi abilitare la funzione di codice custom in FlutterFlow. Segui la guida 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:
main: Il ramo principale per il progetto flutter. Avrai bisogno di questo ramo per distribuire il tuo progetto.flutterflow: Il ramo in cui FlutterFlow sincronizzerà le modifiche dall'editor UI alla tua base di codice.develop: Il ramo in cui puoi modificare il tuo codice custom.Crea la tua interfaccia utente in FlutterFlow. Puoi seguire la documentazione FlutterFlow per creare la tua interfaccia utente in base alle tue esigenze. In questo tutorial, per il requisito minimo, supporremo che tu abbia due pagine:
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 per maggiori dettagli.)
user del profilo utente per visualizzare le informazioni dell'utente e il pulsante di sign-out.
Vai alla pagina App Settings - Authentication e abilita l'autenticazione custom. Questo creerà una classe CustomAuthManager e i file correlati nel tuo progetto FlutterFlow.
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
CustomAuthManagerPassa 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.
Aggiungi la dipendenza Logto SDK al tuo progetto.
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 dichiarazioniid_tokenstandard OIDC da un utente autenticato.
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 per memorizzare in modo sicuro i dati di autenticazione dell'utente. Una volta che l'utente è autenticato, le dichiarazioni
id_tokenverranno memorizzate nella memoria locale.
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.
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.
Il metodo signOut cancellerà i dati di autenticazione dell'utente memorizzati nella memoria locale e aggiornerà lo stream dell'utente corrente.
authManager per accedere all'istanza di CustomAuthManager.currentUserUid per ottenere l'uid dell'utente corrente.currentUserData per ottenere i dati dell'utente corrente.logtoClient per accedere all'istanza del client Logto.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 per ulteriori dettagli sul redirectUri.
L'utente verrà reindirizzato alla pagina user dopo un'autenticazione riuscita.
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:
Avvia il metodo di sign-out quando l'utente clicca sul pulsante di sign-out e reindirizza l'utente alla home page.
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.
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.