Leer hoe je aangepaste authenticatie implementeert in je Flutter-applicatie met behulp van de Logto Flutter SDK.
FlutterFlow 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 biedt het drie verschillende mogelijkheden voor authenticatie-integratie:
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, biedt FlutterFlow een manier om te integreren met elke authenticatieprovider die vertrouwt op een enkele aangepaste authenticatie-API.
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 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 om een veilige authenticatiestroom te implementeren in je FlutterFlow-toepassing.
Om de CustomAuthManager-klasse aan te passen, moet je de functie voor aangepaste code inschakelen in FlutterFlow. Volg de Beheer aangepaste 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:
main: De hoofdtak voor het flutter-project. Je hebt deze tak nodig om je project te implementeren.flutterflow: De tak waar FlutterFlow de wijzigingen van de UI-editor naar je codebase synchroniseert.develop: De tak waar je je aangepaste code kunt wijzigen.Creëer je UI in FlutterFlow. Je kunt de FlutterFlow-documentatie 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:
HomePage met een inlogknop. (Er is geen inlogformulier nodig, gebruikersauthenticatiestroom wordt aan de Logto-kant afgehandeld. Raadpleeg de aanpassen sie gids voor meer details.)
user-profielpagina om gebruikersinformatie en een uitlogknop weer te geven.
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.
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
CustomAuthManager-code aanSchakel 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.
Voeg de Logto SDK-afhankelijkheid toe aan je project.
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 deOIDC-standaardid_token-claims van een geauthenticeerde gebruiker zal verstrekken.
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 pakket om de gebruikersauthenticatiegegevens veilig op te slaan. Zodra de gebruiker is geauthenticeerd, worden de
id_token-claims opgeslagen in de lokale opslag.
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.
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.
De signOut-methode zal de gebruikersauthenticatiegegevens die in de lokale opslag zijn opgeslagen wissen en de huidige gebruikersstream bijwerken.
authManager getter toe om toegang te krijgen tot de CustomAuthManager-instantie.currentUserUid getter toe om de huidige gebruikers-uid op te halen.currentUserData getter toe om de huidige gebruikersgegevens op te halen.logtoClient getter toe om toegang te krijgen tot de Logto-clientinstantie.Roep de authManager.signIn methode aan om de authenticatiestroom te starten wanneer de gebruiker op de inlogknop klikt.
redirectUriis de callback-URL die zal worden gebruikt om de autorisatiecallback van de Logto-inlogpagina vast te leggen. Zie de implement sign-in voor meer details over de redirectUri.
De gebruiker wordt na succesvolle authenticatie doorgestuurd naar de user-pagina.
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:
Roep de uitlogmethode aan wanneer de gebruiker op de uitlogknop klikt en stuur de gebruiker terug naar de startpagina.
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.
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.