Aangepaste FlutterFlow-authenticatie met gebruik van Logto

Inleiding#

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:

1. Via de ingebouwde Firebase-authenticatie
2. Via de ingebouwde Supabase-authenticatie
3. Aangepaste authenticatie

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.

Vereisten#

• Een Logto Cloud account of een self-hosted Logto-instantie. (Bekijk de ⚡ Aan de slag gids om een Logto-instantie te creëren)
• Een Flutter-applicatie gecreëerd met FlutterFlow.
• Registreer een flutter-applicatie in je Logto-console.
• Een GitHub-repository om je aangepaste code in FlutterFlow te beheren.
• Bekijk onze integratie gids voor de Flutter SDK.

Stap 1: Beheer van aangepaste code inschakelen in FlutterFlow#

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:

1. main: De hoofdtak voor het flutter-project. Je hebt deze tak nodig om je project te implementeren.
2. flutterflow: De tak waar FlutterFlow de wijzigingen van de UI-editor naar je codebase synchroniseert.
3. develop: De tak waar je je aangepaste code kunt wijzigen.

Stap 2: Ontwerp en creëer je aangepaste UI-stroom in FlutterFlow#

Bouw je pagina's#

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:

1. Een eenvoudige HomePage met een inlogknop. (Er is geen inlogformulier nodig, gebruikersauthenticatiestroom wordt aan de Logto-kant afgehandeld. Raadpleeg de aanpassen sie gids voor meer details.)

2. Een user-profielpagina om gebruikersinformatie en een uitlogknop weer te geven.

Aangepaste authenticatie inschakelen in FlutterFlow#

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.

Stap 3: Synchroniseer je FlutterFlow-project met GitHub#

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

Stap 4: Pas de CustomAuthManager-code aan#

Schakel 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.

Installeer Logto SDK-afhankelijkheid#

Voeg de Logto SDK-afhankelijkheid toe aan je project.

Werk de UserProvider-klasse bij#

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 de OIDC-standaard id_token-claims van een geauthenticeerde gebruiker zal verstrekken.

Pas de CustomAuthManager-klasse aan en initialiseert Logto-client#

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.

Implementeer de inlogmethode met behulp van Logto-client#

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.

Implementeer de Uitlogmethode#

De signOut-methode zal de gebruikersauthenticatiegegevens die in de lokale opslag zijn opgeslagen wissen en de huidige gebruikersstream bijwerken.

Werk de hulpmethoden voor authenticatie bij#

• Voeg de authManager getter toe om toegang te krijgen tot de CustomAuthManager-instantie.
• Voeg de currentUserUid getter toe om de huidige gebruikers-uid op te halen.
• Voeg de currentUserData getter toe om de huidige gebruikersgegevens op te halen.
• Voeg de logtoClient getter toe om toegang te krijgen tot de Logto-clientinstantie.

Stap 5: Werk de inlog- en uitlogknoppen bij in je UI#

Homepagina#

Roep de authManager.signIn methode aan om de authenticatiestroom te starten wanneer de gebruiker op de inlogknop klikt.

redirectUri is 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.

Gebruikersprofielpagina#

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.

Testen#

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.

Verdere lezingen#

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.

• Endpoint gebruikersinformatie
• Verkrijg resource toegangstoken
• Verkrijg organisatie toegangstoken