Opi toteuttamaan mukautettu autentikointi Flutter-sovelluksessasi käyttämällä Logto Flutter SDK:ta.
FlutterFlow 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 mukaan se tarjoaa kolme erilaista autentikointiintegrointivaihtoehtoa:
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, FlutterFlow tarjoaa tavan integroida minkä tahansa autentikointipalveluntarjoajan kanssa, joka perustuu yhteen mukautettuun autentikointi APIin.
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 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 toteuttaaksesi turvallisen autentikointivirtauksen FlutterFlow-sovelluksessasi.
Mukauttaaksesi CustomAuthManager-luokkaa sinun pitää aktivoida mukautetun koodin ominaisuus FlutterFlowssa. Seuraa Hallitse Mukautettua Koodia GitHubissa -opasta linkittääksesi ja synkronoidaksesi FlutterFlow-projektisi GitHubin kanssa.
Kun se on valmis, sinulla on kolme eri haaraa GitHub FlutterFlow -repositoriossasi:
main: Päähara flutter-projektille. Tarvitset tätä haaran toteuttaaksesi projektisi.flutterflow: Haara, johon FlutterFlow synkronoi muutokset käyttöliittymäeditorista koodipohjaasi.develop: Haara, jossa voit muokata mukautettua koodiasi.Luo käyttöliittymäsi FlutterFlowssa. Voit seurata FlutterFlow-dokumentaatio luodaksesi käyttöliittymäsi vaatimustesi perusteella. Tässä opetusohjelmassa, vähimmäisvaatimuksena, oletamme, että sinulla on kaksi sivua:
HomePage, jossa on kirjautumispainike. (Kirjautumislomaketta ei tarvita, käyttäjän todentamisvirta hoidetaan Logto-puolella. Tutustu mukauta sie opas saadaksesi lisätietoja.)
Käyttäjäprofiilisivu, jossa näytetään käyttäjätiedot ja uloskirjautumispainike.
Siirry Sovellusasetukset - Autentikointi -sivulle ja ota mukautettu autentikointi käyttöön. Tämä luo CustomAuthManager-luokan ja niihin liittyvät tiedostot FlutterFlow-projektissasi.
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
CustomAuthManager-koodiaVaihda 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.
Lisää Logto SDK:n riippuvuus projektiisi.
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 tarjoaaOIDC-standardin mukaisiaid_token-väitteitä autentikoidusta käyttäjästä.
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 -pakettia käyttäjän autentikointitietojen turvalliseen tallentamiseen. Kun käyttäjä on autentikoitu,
id_token-väitteet tallennetaan paikalliseen tallennustilaan.
Kutsumalla LogtoClient.signIn metodia aloitetaan standardi OIDC-autentikointivirtaus. Logton kirjautumissivu avataan verkkonäkymässä. Verkkonäkymäpohjainen autentikointivirtaus on mahdollista flutter_web_auth -paketin avulla.
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.
signOut-metodi tyhjentää käyttäjän autentikointitiedot paikallisesta tallennustilasta ja päivittää nykyisen käyttäjävirran.
authManager-hakija päästäksesi CustomAuthManager-instanssiin.currentUserUid-hakija saadaksesi nykyisen käyttäjän uid.currentUserData-hakija saadaksesi nykyiset käyttäjätiedot.logtoClient-hakija käyttääksesi Logto-asiakasinstanssia.Kutsu authManager.signIn-metodia aloittaaksesi autentikointivirtaus, kun käyttäjä klikkaa kirjautumispainiketta.
redirectUrion palautus-URL, jota käytetään Logton kirjautumissivun valtuutuksen kaappaukseen. Katso toteuta kirjautuminen lisätietoja redirectUri.
Käyttäjä ohjataan käyttäjä-sivulle onnistuneen autentikoinnin jälkeen.
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:
Käynnistä uloskirjautumismenetelmä, kun käyttäjä klikkaa uloskirjautumispainiketta, ja ohjaa käyttäjä takaisin etusivulle.
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.
Logto SDK tarjoaa lisää menetelmiä interaktioksi Logto API:n kanssa. Voit edelleen mukauttaa CustomAuthManager-luokkaa toteuttaaksesi lisää ominaisuuksia Logto SDK:n avulla.