Lär dig hur du implementerar anpassad autentisering i din Flutter-applikation med Logto Flutter SDK.
FlutterFlow ä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 erbjuder den tre olika alternativ för 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 erbjuder FlutterFlow ett sätt att integrera med vilken autentiseringsleverantör som helst med hjälp av en enda anpassad autentiserings-API.
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 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 för att implementera ett säkert autentiseringsflöde i din FlutterFlow-applikation.
För att anpassa CustomAuthManager-klassen behöver du aktivera funktionen för anpassad kod i FlutterFlow. Följ 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:
main: huvudgrenen för flutter-projektet. Du behöver denna gren för att distribuera ditt projekt.flutterflow: grenen där FlutterFlow kommer att synkronisera ändringarna från UI-redigeraren till din kodbas.develop: grenen där du kan modifiera din anpassade kod.Skapa ditt användargränssnitt i FlutterFlow. Du kan följa FlutterFlow-dokumentationen 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:
HomePage med en inloggningsknapp. (Inget inloggningsformulär behövs, användarens autentiseringsflöde hanteras på Logto-sidan. Vänligen kontrollera anpassa sie guiden för mer detaljer.)
användar profilsida för att visa användarinformation och en utloggningsknapp.
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.
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
CustomAuthManager-kodenByt 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.
Lägg till Logto SDK-beroendet till ditt projekt.
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ållaOIDC-standardensid_token-anspråk från en autentiserad användare.
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 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.
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.
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.
signOut-metoden kommer att rensa användarens autentiseringsdata som är lagrade i det lokala lagret och uppdatera den nuvarande användarströmmen.
authManager-hämtare för att komma åt CustomAuthManager-instansen.currentUserUid-hämtare för att få den nuvarande användarens uid.currentUserData-hämtare för att få den nuvarande användardatan.logtoClient-hämtare för att komma åt Logto-klientinstansen.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 för mer detaljer om redirectUri.
Användaren kommer att omdirigeras till user-sidan efter lyckad autentisering.
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:
Initiera utloggningsmetoden när användaren klickar på utloggningsknappen och omdirigera användaren tillbaka till startsidan.
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.
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.