Mukautettu FlutterFlow-autentikointi käyttämällä Logtoa

Johdanto#

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:

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

Vaatimukset#

• Logto Cloud -tili tai itse isännöity Logto-instanssi. (Tutustu ⚡ Aloita 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 integrointioppaaseen.

Vaihe 1: Aktivoi mukautetun koodin hallinta FlutterFlowssa#

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:

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 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 opas saadaksesi lisätietoja.)

2. Käyttäjäprofiilisivu, jossa näytetään käyttäjätiedot ja uloskirjautumispainike.

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.

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

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.

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

Mukauta CustomAuthManager-luokkaa ja alusta Logto-asiakas#

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.

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

Toteuta uloskirjautumismenetelmä#

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.

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 lisätietoja redirectUri.

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:

Käynnistä uloskirjautumismenetelmä, kun käyttäjä klikkaa uloskirjautumispainiketta, ja ohjaa käyttäjä takaisin etusivulle.

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.

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
• Hanki resurssin käyttöoikeuspyynnötön
• Hanki organisaation käyttöoikeuspyynnötön