## Johdanto [FlutterFlow](https://flutterflow.io/) on vähäkoodialusta, jonka avulla voit rakentaa Flutter-sovelluksia visuaalisesti. Se tarjoaa raahaa-ja-pudota käyttöliittymän suunnittelemaan sovelluksesi käyttöliittymää ja luo vastaavan Flutter-koodin. Virallisen [dokumentaation](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) mukaan se tarjoaa kolme erilaista autentikointiintegrointivaihtoehtoa: 1. Sisäänrakennetun Firebase-autentikoinnin kautta 2. Sisäänrakennetun Supabase-autentikoinnin kautta 3. Mukautettu autentikointi Ensimmäisten kahden kohdalla FlutterFlow tarjoaa saumattoman integroinnin Firebaseen ja Supabaseen. Sinun täytyy määrittää Firebase- tai Supabase-projektisi ja konfiguroida autentikointiasetukset FlutterFlowssa. Jos kuitenkin haluat käyttää erilaista autentikointipalvelua, sinun täytyy toteuttaa autentikointilogiikka itse. Mitä tulee [mukautettuun autentikointiin](https://docs.flutterflow.io/data-and-backend/custom-authentication), FlutterFlow tarjoaa tavan integroida minkä tahansa autentikointipalveluntarjoajan kanssa, joka perustuu yhteen mukautettuun [autentikointi APIin](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users). Käyttäjätunnusten suora vaihtaminen asiakkaan ja autentikointipalvelimen välillä ei kuitenkaan ole suositeltavaa nykyaikaisten turvallisuusstandardien mukaan. Sen sijaan sinun tulisi käyttää turvallista autentikointivirtausta, kuten OAuth 2.0 tai OpenID Connect (OIDC), autentikoimaan käyttäjät. Nykyisille OAuth 2.0- tai OIDC-pohjaisille identiteettitarjoajille (IdP) kuten Auth0, Okta ja Logto, resurssin omistajan salasanatietojen (ROPC) käyttöoikeus ei ole suositeltavaa tai kielletty turvallisuussyistä. Katso [Vanhentunut ropc grant tyyppi](https://blog.logto.io/deprecated-ropc-grant-type/) lisätietoja varten. Tavanomainen OAuth 2.0- tai OIDC-autentikointivirtaus sisältää useita vaiheita ja uudelleenohjauksia asiakkaan sovelluksen, valtuutuspalvelimen ja käyttäjän selaimen välillä. Tässä artikkelissa näytämme, kuinka mukauttaa FluterFlow'n `CustomAuthManager`-luokkaa käyttämällä [Logto Flutter SDK:ta](https://docs.logto.io/quick-starts/flutter) toteuttaaksesi turvallisen autentikointivirtauksen FlutterFlow-sovelluksessasi. ## Vaatimukset - [Logto Cloud](https://cloud.logto.io/) -tili tai itse isännöity Logto-instanssi. (Tutustu [⚡ Aloita](https://docs.logto.io/docs/tutorials/get-started/) opas luodaksesi Logto-instanssin) - FlutterFlow:lla luotu Flutter-sovellus. - Rekisteröi flutter-sovelluksesi Logto-konsolissa. - GitHub-repositorio hallitsemaan kustomoitua koodiasi FlutterFlowssa. - Tutustu Flutter SDK:n integrointi[oppaaseen](https://docs.logto.io/quick-starts/flutter/). - Logto Flutter SDK -paketti on saatavilla [pub.dev](https://pub.dev/packages/logto_dart_sdk) ja Logto [GitHub-repositoriossa](https://github.com/logto-io/dart). - SDK soveltuu tällä hetkellä vain Android- ja iOS-ympäristöille. - Mukautetun koodin hallitseminen GitHubissa on premium-ominaisuus FlutterFlowssa. Sinun täytyy päivittää FlutterFlow `Pro`-suunnitelmaan aktivoidaksesi tämän ominaisuuden. ## Vaihe 1: Aktivoi mukautetun koodin hallinta FlutterFlowssa Mukauttaaksesi `CustomAuthManager`-luokkaa sinun pitää aktivoida mukautetun koodin ominaisuus FlutterFlowssa. Seuraa [Hallitse Mukautettua Koodia GitHubissa](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github) -opasta linkittääksesi ja synkronoidaksesi FlutterFlow-projektisi GitHubin kanssa. Kun se on valmis, sinulla on kolme eri haaraa GitHub FlutterFlow -repositoriossasi: 1. `main`: Päähara flutter-projektille. Tarvitset tätä haaran toteuttaaksesi projektisi. 2. `flutterflow`: Haara, johon FlutterFlow synkronoi muutokset käyttöliittymäeditorista koodipohjaasi. 3. `develop`: Haara, jossa voit muokata mukautettua koodiasi. ## Vaihe 2: Suunnittele ja luo mukautettu UI-vuosi FlutterFlowssa ### Rakenna sivusi Luo käyttöliittymäsi FlutterFlowssa. Voit seurata [FlutterFlow-dokumentaatio](https://docs.flutterflow.io/) luodaksesi käyttöliittymäsi vaatimustesi perusteella. Tässä opetusohjelmassa, vähimmäisvaatimuksena, oletamme, että sinulla on kaksi sivua: 1. Yksinkertainen `HomePage`, jossa on kirjautumispainike. (Kirjautumislomaketta ei tarvita, käyttäjän todentamisvirta hoidetaan Logto-puolella. Tutustu [mukauta sie](https://docs.logto.io/docs/recipes/customize-sie/) opas saadaksesi lisätietoja.) ![etusivu](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. `Käyttäjäprofiilisivu`, jossa näytetään käyttäjätiedot ja uloskirjautumispainike. ![käyttäjäsivu](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### Aktivoi mukautettu autentikointi FlutterFlowssa Siirry `Sovellusasetukset` - `Autentikointi` -sivulle ja ota mukautettu autentikointi käyttöön. Tämä luo `CustomAuthManager`-luokan ja niihin liittyvät tiedostot FlutterFlow-projektissasi. FlutterFlow mukautettu autentikointi

## Vaihe 3: Synkronoi FlutterFlow-projekti GitHubin kanssa Kun olet luonut mukautetun käyttöliittymän ja ottanut mukautetun autentikoinnin käyttöön FlutterFlowssa, sinun täytyy synkronoida projektisi GitHubin kanssa. Siirry `integraatiot` - `GitHub` -sivulle ja klikkaa `Push to Repository` FlutterFlow GitHub push

## Vaihe 4: Mukauta `CustomAuthManager`-koodia Vaihda `develop`-haaraan GitHub-repositoriossasi ja yhdistä viimeisimmät muutokset `flutterflow`-haarasta. Tämä synkronoi kaikki käyttöliittymämuutokset `develop`-haaraasi mukaan lukien sivu-widgetit ja valmiiksi rakennettu `CustomAuthManager`-luokka. ### Asenna Logto SDK -riippuvuus Lisää Logto SDK:n riippuvuus projektiisi. ```bash flutter pub add logto_dart_sdk ``` Valinnainen Http-paketti: Logto-asiakas tarvitsee http-asiakkaan tekemään API-kutsuja. Voit käyttää `http`-pakettia tai mitä tahansa muuta haluamaasi http-asiakaspakettia. ```bash flutter pub add http ``` ### Päivitä UserProvider-luokka `UserProvider`-luokka on vastuussa käyttäjän autentikointitilan hallinnasta. Meidän täytyy mukauttaa ominaisuudet tallentamaan Logto SDK:n tarjoamat käyttäjän autentikointitiedot. Lisää `idToken`-ominaisuus tyyppiä `OpenIdClaims` tallentamaan autentikoidun käyttäjän `id_token`-väitteitä. > `OpenIdClaims`-luokka on määritelty Logto SDK:ssa, joka tarjoaa `OIDC`-standardin mukaisia `id_token`-väitteitä autentikoidusta käyttäjästä. ```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; } /// Luo virran autentikoidusta käyttäjästä. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### Mukauta CustomAuthManager-luokkaa ja alusta Logto-asiakas ```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; // Logto-konfiguraatio final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Päivitä nykyinen käyttäjävirta. 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('Virhe autentikoinnin alustuksessa: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` `initialize`-metodi alustaa Logto-asiakasinstanssin ja päivittää nykyisen käyttäjävirran käyttäjän autentikointitilalla, joka on tallennettu paikalliseen tallennustilaan. > Logto SDK käyttää [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) -pakettia käyttäjän autentikointitietojen turvalliseen tallentamiseen. Kun käyttäjä on autentikoitu, `id_token`-väitteet tallennetaan paikalliseen tallennustilaan. ### Toteuta kirjautumismenetelmä käyttämällä Logto-asiakasta Kutsumalla `LogtoClient.signIn` metodia aloitetaan standardi `OIDC`-autentikointivirtaus. Logton kirjautumissivu avataan verkkonäkymässä. Verkkonäkymäpohjainen autentikointivirtaus on mahdollista [flutter_web_auth](https://pub.dev/packages/flutter_web_auth) -paketin avulla. ```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, ); } ``` LogtoClient hoitaa valtuutuksen, tokenin vaihdon ja käyttäjätietojen hakemisen. Kun käyttäjä on autentikoitu, `idTokenClaims` tallennetaan paikalliseen tallennustilaan. Hae `idTokenClaims` LogtoClientista ja päivitä nykyinen käyttäjävirta. ### Toteuta uloskirjautumismenetelmä ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` `signOut`-metodi tyhjentää käyttäjän autentikointitiedot paikallisesta tallennustilasta ja päivittää nykyisen käyttäjävirran. ### Päivitä autentikoinnin apumenetelmät - Lisää `authManager`-hakija päästäksesi `CustomAuthManager`-instanssiin. - Lisää `currentUserUid`-hakija saadaksesi nykyisen käyttäjän uid. - Lisää `currentUserData`-hakija saadaksesi nykyiset käyttäjätiedot. - Lisää `logtoClient`-hakija käyttääksesi Logto-asiakasinstanssia. ```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; ``` ## Vaihe 5: Päivitä kirjautumis- ja uloskirjautumispainikkeet käyttöliittymässäsi ### Etusivu Kutsu `authManager.signIn`-metodia aloittaaksesi autentikointivirtaus, kun käyttäjä klikkaa kirjautumispainiketta. > `redirectUri` on palautus-URL, jota käytetään Logton kirjautumissivun valtuutuksen kaappaukseen. > Katso [toteuta kirjautuminen](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) lisätietoja 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', // ... ) ``` Käyttäjä ohjataan `käyttäjä`-sivulle onnistuneen autentikoinnin jälkeen. ### Käyttäjäprofiilisivu Käytä autentikoinnin apuhakijoita käyttääksesi nykyisiä käyttäjätietoja ja Logto-asiakasinstanssia. Esimerkiksi näyttääksesi käyttäjätietoja useiden `Text`-widgetien avulla: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'Käyttäjän tunnus: $currentUserUid', ), Text( 'Näyttönimi: ${currentUserData?.name}', ), Text( 'Käyttäjänimi: ${currentUserData?.username}', ), Text( 'Sähköposti: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Käynnistä uloskirjautumismenetelmä, kun käyttäjä klikkaa uloskirjautumispainiketta, ja ohjaa käyttäjä takaisin etusivulle. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Sign Out', // ... ) ``` ## Testaus Aja FlutterFlow-sovelluksesi emulaattorilla. Klikkaa kirjautumispainiketta etusivulla aloittaaksesi autentikointivirtaus. Logton kirjautumissivu avataan verkkonäkymässä. Onnistuneen autentikoinnin jälkeen käyttäjä ohjataan käyttäjäprofiilisivulle. Käyttäjätiedot näytetään käyttäjäprofiilisivulla. Klikkaa uloskirjautumispainiketta kirjautuaksesi ulos käyttäjästä ja ohjataksesi käyttäjä takaisin etusivulle. Älä unohda yhdistää `develop`-haaraa takaisin `main`-haaraan ja puskea muutokset GitHub-repositorioosi. FlutterFlow github push on yksisuuntainen synkronointi FlutterFlowsta GitHubiin. Kaikki `fluterflow`-haarassa tehdyt muutokset ylikirjoitetaan FlutterFlow-käyttöliittymäeditorilla, kun työnnät muutokset GitHub-repositorioosi. Varmista, että käytät `develop`-haaraa hallitsemaan mukautettua koodiasi ja yhdistät muutokset takaisin `main`-haaraan kehitystä varten. ## Jatkolukemista Logto SDK tarjoaa lisää menetelmiä interaktioksi Logto API:n kanssa. Voit edelleen mukauttaa `CustomAuthManager`-luokkaa toteuttaaksesi lisää ominaisuuksia Logto SDK:n avulla. - [Käyttäjätieto-pääte](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Hanki resurssin käyttöoikeuspyynnötön](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Hanki organisaation käyttöoikeuspyynnötön](https://docs.logto.io/quick-starts/flutter/#organization)