Flutter: Kuinka tehdä käyttäjän sisäänkirjautuminen Firebase-ohjelmalla

julkaisu

12/12/18 - Päivitetty viimeisin koodinpätkä uudelleenkehittämisen ja puhdistamisen jälkeen.

24/01/19 - Kopioitu linkki githubiin artikkelin yläosassa.

23/07/19 - Lisätty leikkausmenetelmä sähköpostin ja salasanan arvoon

Lähdekoodi

Jos haluat ohittaa koko mumbo-jumbon, voit tarttua lähdekoodin tähän

https://github.com/tattwei46/flutter_login_demo

Päivittää

Tässä on jatko tähän viestiin, joka on Kuinka tehdä CRUD Firebase RTDB: llä. Tarkista se!

Mikä on Flutter?

Flutter on Googlen kehittämä avoimen lähdekoodin mobiili SDK rakentaakseen korkealaatuisia sovelluksia Androidille ja iOS: lle. Sen avulla kehittäjät voivat rakentaa sovelluksen kauniilla suunnittelulla, sujuvalla animaatiolla ja nopealla suorituskyvyllä, mutta pystyvät myös integroimaan uudet ominaisuudet nopeasti. Flutter tarjoaa nopean kehityksen tilallisella kuumalatauksella ja uudella käynnistyksellä. Vain yhdellä hallittavalla koodikannalla säästät paljon kustannuksia verrattuna sekä Android- että iOS-projektien hallintaan, kun Flutter kokoaa sen alkuperäiseen ARM-koodiin. Flutter käyttää Dart-ohjelmointikieltä, jota myös Google on kehittänyt.

Miksi Dart?

  • Haavoittuva, voimakkaasti tyypitetty, olio kieli.
  • Tukee oikea-aikaista ja aikataulun mukaista kokoamista.
  • JIT sallii lepattamisen kääntää koodin suoraan laitteelle sovelluksen ollessa käynnissä.
  • Ota käyttöön nopea kehitys ja mahdollistaa sekunnin vakaan kuuman uudelleenlatauksen.
  • AOT mahdollistaa koodin kääntämisen suoraan alkuperäiseen ARM-koodiin, mikä johtaa nopeaan käynnistykseen ja ennustettavissa olevaan suorituskykyyn.

Mikä on Firebase

Firebase on mobiili- ja web-kehitysalusta, joka tarjoaa kehittäjälle laajan tuotevalikoiman. Tänään etsimme miten rakentaa ensimmäinen lepatussovellus Firebase-todennuksella ja reaaliaikaisella tietokannalla. Tämän sovelluksen avulla käyttäjä voi kirjautua sisään tai kirjautua sisään ja suorittaa CRUD: n kohteita CRB Firebase -sovelluksella. Tässä viestissä keskitymme yksinomaan käyttäjän kirjautumiseen ja sisäänkirjautumiseen.

Kuinka asentaa ympäristö

  • Seuraa tämän linkin ohjeita
  • Hanki Flutter SDK
  • Suorita Flutter lääkäri asentaaksesi riippuvuudet
lepattava lääkäri
  • Avaa iOS-simulaattori alla olevan komennon avulla
avoin - Simulaattori
  • Voit avata android-emulaattorin käynnistämällä Android Studio> työkalut> AVD Manager ja valitsemalla luo virtuaalinen laite.

Building Flutter App

Voit saada täydellisen lähdekoodin viestin alareunassa olevasta GitHub-linkistä. Seuraava osoittaa, kuinka johdetaan Flutter-näyteprojektista lähtekoodin loppuun saattamiseen GitHubissa.

Vaihe 1: Luo uusi flutter-projektipuhelun flutter login login demo. Käynnistä simulaattori ja suorita projekti lepatuksella. Voit käyttää joko Android Studio- tai VSCode-koodia ensisijaisena IDE-tunnuksena. Toimittajan määrittämisen vaiheet täällä.

räpytys juoksee

Jos sinulla on sekä Android-emulaattori että iOS-simulaattori käynnissä, suorita seuraava komento suorittaaksesi molemmilla.

räpytys ajaa kaikki

Sinun pitäisi nähdä samanlaiset näytöt sekä Android Emulatorissa että iOS Simulatorissa.

Vasen: Android, oikea: iOS
Jos olet kiinnostunut tietää, miten saada kuvakaappauksia simulaattoreistasi;
Android: Napsauta vain kamerakuvaketta työkaluruudun vasemmalla puolella. Kuva tallennetaan työpöydälle
IOS: [Vaihtoehto 1] Pidä alhaalla ja paina komentoa + shift + 4. Paina välilyöntiä muuttaaksesi hiiren osoittimen kamerakuvakeksi. Osoita iOS-simulaattorille, napsauta ottaa kuvakaappaus. Kuva tallennetaan työpöydälle.

[Vaihtoehto 2] Valitse Simulaattori ja paina komentoa + S. Kiitos JerryZhouille näiden tietojen jakamisesta.

Vaihe 2: Poista main.dart-tiedostosta kaikki sisältö ja lisää seuraava kattilalevy tiedostoon. Aiomme luoda uuden tiedoston nimeltä login_page.dart, jolla on LoginPage-luokka. Paina päätelaitteesi R-näppäintä suorittaaksesi kuuma uudelleenlatauksen, ja näytössä pitäisi olla ”Hello World”.

Main.dart

tuo 'paketti: räpytys / materiaali.dart';
Tuo 'login_signup_page.dart';

void main () => runApp (uusi MyApp ());

luokka MyApp laajentaa StatelessWidget {
  
  @ohittaa
  Widget-rakennus (BuildContext-konteksti) {
    palauta uusi MaterialApp (
      otsikko: 'Flutter Login Demo',
      teema: uusi ThemeData (
        PrimarySwatch: Colors.blue,
      ),
      etusivu: uusi LoginSignUpPage ()
    );
  }
}

login_signup_page.dart

tuo 'paketti: räpytys / materiaali.dart';

luokan LoginSignUpPage laajentaa StatelessWidget {

  @ohittaa
  Widget-rakennus (BuildContext-konteksti) {
    palauta uusi rakennusteline (
      appBar: uusi AppBar (
        otsikko: uusi teksti ("Flutter login demo"),
      ),
      runko: uusi kontti (
        lapsi: uusi teksti ("Hei maailma"),
      ),
    );
  }
}

Vaihe 3: Vaihtaminen valtiottomasta tilalliseksi.

login_signup_page.dart

tuo 'paketti: räpytys / materiaali.dart';

luokan LoginSignUpPage laajentaa StatefulWidget {

  @ohittaa
  Tila  createState () => uusi _LoginSignUpPageState ();

}

luokka _LoginSignUpPageState laajentaa tilaa  {

  @ohittaa
  Widget-rakennus (BuildContext-konteksti) {
    palauta uusi rakennusteline (
      appBar: uusi AppBar (
        otsikko: uusi teksti ("Flutter login demo"),
      ),
      runko: uusi kontti (
        lapsi: uusi teksti ("Hei maailma"),
      ),
    );
  }
}

Vaihe 4: Korvataan Hello Word -teksti rakennustelineen muotoon lomakkeeksi ja sen sisälle asetetaan ListView. ListView ottaa joukon widgettejä. Suoritamme jokaisen käyttöliittymäkomponentin uudelleen erilliseksi widgetiksi.

Aina kun käytämme tekstinsyöttöä, on parempi kääri se ListView: n ympärille estääksesi virheiden tekemisen, kun pehmeä näppäimistö näkyy ylivuotoelementtien takia.

login_signup_page.dart

@ohittaa
Widget-rakennus (BuildContext-konteksti) {
  _isIos = Theme.of (konteksti) .platform == TargetPlatform.iOS;
  palauta uusi rakennusteline (
      appBar: uusi AppBar (
        otsikko: uusi teksti ('Flutter login demo'),
      ),
      runko: pino (
        lapset:  [
          _showBody (),
          _showCircularProgress (),
        ],
      ));
}

Vaihe 5: Kunkin käyttöliittymäkomponentin rakentaminen

Huomautus rakennustelineiden rungossa, meillä on pino-widget rungona. Periaatteessa mitä haluan tehdä, on näyttää käyttäjälle pyöreä lastausosoitin, kun kirjautumis- tai rekisteröintitoiminta on käynnissä. Tätä varten meidän on peitettävä CircularProgressIndicator (onneksi Flutterilla on jo tämä widget, joten sitä voidaan käyttää vain kutsua sitä) widget-pääohjelmamme kanssa (kirjautumis- / kirjautumislomake). Se on pino-widgetin tehtävä, joka antaa yhden widgetin päällekkäin toisen widgetin päällä. Voit hallita, näytetäänkö CircularProgressIndicator vai ei, tarkistamalla bool _isLoading, onko näyttö latautumassa vai ei.

Widget _showCircularProgress () {
  if (_isLoading) {
    paluukeskus (lapsi: CircularProgressIndicator ());
  } paluukontti (korkeus: 0.0, leveys: 0.0,);

}

Logossa käytetään sankari-widgetiä ja myös kuvan tuomiseksi lisäämällä seuraava rivi pubspec.yaml-osoitteeseesi. Suorita sitten get-paketit kuvan tuonnissa.

varat:
  - omaisuus / räpytys-icon.png

login_signup_page.dart

Widget _showLogo () {
  palauta uusi sankari (
    tunniste: 'sankari',
    lapsi: pehmuste (
      pehmuste: EdgeInsets.frLLB (0,0, 70,0, 0,0, 0,0),
      lapsi: CircleAvatar (
        backgroundColor: Värit.läpinäkyvä,
        säde: 48,0,
        lapsi: Image.asset ('omaisuus / flutter-icon.png'),
      ),
    ),
  );
}

[Päivitys] Aikaisemmin käytämme joustavaa välilyöntiwidgettiä SizedBoxilla, joka ottaa korkeussyötön saadakseen pystysuoran etäisyyden kahden widgetin välillä. Nyt sijoitamme vain yhden widgetin pehmuste widgetin sisälle ja käytä pehmustetta: EdgeInsets.fromLTRB (), joka tarkoittaa vasemmalta, ylhäältä, oikealta ja alhaalta, ja kirjoita täytteen arvo oikeassa asennossa vastaavasti.

Seuraavaksi tulee sähköposti- ja salasanateksti lomakekenttimme. Huomaa jokaisesta kentästä, joilla meillä on validoija ja onSaved. Nämä kaksi takaisinsoittoa käynnistyvät, kun muotoa.validate () ja muoto.save () kutsutaan. Joten esimerkiksi jos muotoa.save () kutsutaan, teksti lomakekentän arvo kopioidaan toiseen paikallisiin muuttujiin.

Esittelemme kenttiin myös validoijan, jotta voimme tarkistaa, onko kentän syöttö tyhjä, ja sitten varoittaa käyttäjää punaisella. Meidän on myös luotava muuttujat _email ja _password arvojen tallentamiseksi. Salasanana asetamme obsecureText: true piilottaaksesi käyttäjän salasanan.

Päivitys: Olen lisännyt trimmausmenetelmän sekä sähköposti- että salasanan arvoon tahattomien etummaisten tai jäljellä olevien tyhjien kohtien poistamiseksi.

Widget _showEmailInput () {
  palautuspehmuste (
    täyte: const EdgeInsets.lomakkeestaLTRB (0,0, 100,0, 0,0, 0,0),
    lapsi: uusi TextFormField (
      maksimilinjat: 1,
      keyboardType: TextInputType.emailAddress,
      automaattitarkennus: väärä,
      sisustus: uusi InputDecoration (
          hintText: 'Email',
          kuvake: uusi kuvake (
            Icons.mail,
            väri: Colors.grey,
          )),
      validoija: (arvo) => arvo.onko tyhjä? 'Sähköposti ei voi olla tyhjä': nolla,
      onSaved: (arvo) => _postia = arvo.trim (),
    ),
  );
}

Widget _showPasswordInput () {
  palautuspehmuste (
    täyte: const EdgeInsets.lomakkeestaLTRB (0,0, 15,0, 0,0, 0,0),
    lapsi: uusi TextFormField (
      maksimilinjat: 1,
      obscureText: totta,
      automaattitarkennus: väärä,
      sisustus: uusi InputDecoration (
          hintText: 'Salasana',
          kuvake: uusi kuvake (
            Icons.lock,
            väri: Colors.grey,
          )),
      validoija: (arvo) => arvo.onko tyhjä? 'Salasana ei voi olla tyhjä': nolla,
      onSaved: (arvo) => _ salasana = arvo.trim (),
    ),
  );
}

Seuraavaksi meidän on lisättävä ensisijainen painike, mutta sen pitäisi voida näyttää oikea teksti sen mukaan, haluaako käyttäjä kirjautua uuteen tiliin vai kirjautua sisään olemassa olevaan tiliin. Tätä varten meidän on luotava enum, jotta voimme seurata, onko lomake kirjautumista vai rekisteröitymistä varten.

enum FormMode {LOGIN, SIGNUP}

Annamme menetelmän painikkeiden takaisinsoitto-toiminnolle. Tätä varten luomme _validateAndSubmit-nimisen menetelmän, joka välittää sekä sähköpostin että salasanan Firebase-todennusta varten. Lisää siitä myöhemmin tässä viestissä.

Widget _showPrimaryButton () {
  palauta uusi tyyny (
      pehmuste: EdgeInsets.frLLB (0,0, 45,0, 0,0, 0,0),
      lapsi: uusi MaterialButton (
        korkeus: 5.0,
        minleveys: 200.0,
        korkeus: 42,0,
        väri: Colors.blue,
        lapsi: _formMode == FormMode.LOGIN
            ? uusi teksti ('Kirjaudu',
                tyyli: uusi TextStyle (fontSize: 20.0, väri: Colors.white))
            : uusi teksti ('Luo tili',
                tyyli: uusi TextStyle (fontSize: 20.0, väri: Colors.white)),
        onPressed: _validateAndSubmit,
      ));
}

Nyt meidän on lisättävä toissijainen painike, jotta käyttäjä voi siirtyä rekisteröinnin ja kirjautumislomakkeen välillä. OnPressed-menetelmällä haluamme vaihtaa lomakkeen tilan LOGIN ja SIGNUP välillä. Huomautus toissijaisesta painikkeesta, käytämme FlatButtonia RaisedButtonin sijasta, kuten edellisessä lähetä-painikkeessa. Syynä on, että jos sinulla on 2 painiketta ja haluat tehdä yhden erottuvaisemmaksi kuin toinen, RaisedButton on oikea valinta, koska se kiinnittää käyttäjän huomion heti FlatButtoniin verrattuna.

login_page.dart

Widget _showSecondaryButton () {
  palauta uusi FlatButton (
    lapsi: _formMode == FormMode.LOGIN
        ? uusi teksti ('Luo tili',
            tyyli: uusi TextStyle (fontSize: 18.0, fontWeight: FontWeight.w300))
        : uusi teksti ('Onko sinulla tili? Kirjaudu sisään',
            tyyli:
                uusi TextStyle (fontSize: 18.0, fontWeight: FontWeight.w300)),
    onPressed: _formMode == FormMode.LOGIN
        ? _changeFormToSignUp
        : _changeFormToLogin,
  );
}

Mooditilan vaihtamismenetelmässä on ensiarvoisen tärkeää kääriä se setState: n ympärille, koska meidän on sanottava Flutterille, että ruudun tulee tehdä uudelleen FormMode-päivitetyllä arvolla.

void _changeFormToSignUp () {
  _formKey.currentState.reset ();
  _errorMessage = "";
  setState (() {
    _formMode = FormMode.SIGNUP;
  });
}

tyhjä _changeFormToLogin () {
  _formKey.currentState.reset ();
  _errorMessage = "";
  setState (() {
    _formMode = FormMode.LOGIN;
  });
}

Seuraavaksi meillä on _showErrorMessage (), joka välittää virheviestin käyttäjälle Firebase-puolelta yrittäessään kirjautua sisään tai kirjautua sisään. Tämä virheilmoitus voi olla esimerkiksi "jo olemassa oleva käyttäjätili". Joten meillä on String _errorMessage tallentaaksesi virhesanoman Firebaseen.

Widget _showErrorMessage () {
  if (_errorMessage.length> 0 && _errorMessage! = nolla) {
    palauta uusi teksti (
      _virheviesti,
      tyyli: TextStyle (
          fontSize: 13,0,
          väri: Colors.red,
          korkeus: 1,0,
          fontWeight: FontWeight.w300),
    );
  } muuta {
    palauta uusi kontti (
      korkeus: 0,0,
    );
  }
}

Järjestämme lopuksi nämä yksittäiset käyttöliittymäkomponentit ja palauta se takaisin ListView-tietokantaan.

Widget _showBody () {
  palauta uusi kontti (
      pehmustus: EdgeInsets.all (16.0),
      lapsi: uusi muoto (
        avain: _formKey,
        lapsi: uusi ListView (
          shrinkWrap: totta,
          lapset:  [
            _showLogo (),
            _showEmailInput (),
            _showPasswordInput (),
            _showPrimaryButton (),
            _showSecondaryButton (),
            _showErrorMessage (),
          ],
        ),
      ));
}
TextFormField-validointi toiminnassa

Vaihe 6: rekisteröi uusi projekti Firebaseen

Siirry osoitteeseen https://console.firebase.google.com ja rekisteröi uusi projekti.

Napsauta android-kuvaketta. Kirjoita paketin nimi, joka löytyy Androidista / app / src / main / AndroidManifest.xml

Lataa konfigurointitiedosto, joka on google-services.json (Android).

Vedä google-services.json sovelluskansioon projektinäkymässä

Meidän on lisättävä Google Services Gradle -laajennus lukeaksesi google-services.json. Lisää /android/app/build.gradle seuraavat tiedoston viimeiselle riville.

käytä laajennusta: 'com.google.gms.google-palvelut'

Lisää uusi riippuvuus Android-sovellukseen / build.gradle rakennuskirjauskentän sisällä.

rakennuskirja {
   arkistot {
      // ...
}
riippuvuudet {
   // ...
   classpath 'com.google.gms: google-palvelut: 3.2.1'
}

IOS: lle, avaa ios / Runner.xcworkspace avataksesi Xcode. Paketin nimi löytyy paketin tunnisteesta Runner-näkymässä.

Lataa asetustiedosto, joka on GoogleService-info.plist (iOS).

Vedä GoogleService-info.plist Runner-alikansioon Runnerin sisällä alla olevan kuvan mukaisesti.

Vaihe 7: Lisää riippuvuudet pubspec.yaml
Seuraavaksi meidän on lisättävä riippuvuus firebase_auth-sivustossa pubspec.yaml. Saadaksesi uusimman versionumeron, siirry osoitteeseen https://pub.dartlang.org/ ja etsi firebase-todennus.

firebase_auth: ^ 0.6.6

Vaihe 8: Tuo Firebase Auth

Tuo 'paketti: firebase_auth / firebase_auth.dart';

Vaihe 9: Ota rekisteröinti käyttöön sähköpostitse ja salasanalla Firebase-palvelussa

Vaihe 10: Kirjaudu Firebaseen

Firebase signInWithEmailAndPassword on menetelmä, joka palauttaa arvon tulevaisuudessa. Siksi menetelmän on oltava odotettavissa ja ulkoisella kääretoiminnolla on oltava asynk. Joten liitämme sisäänkirjautumis- ja kirjautumismenetelmät kokeile saalislohkoa. Jos tapahtui virhe, saalislohkon pitäisi pystyä sieppaamaan virhesanoma ja näyttämään se käyttäjälle.

On eroa siinä, kuinka todellinen viesti tallentuu Firebase-virheen aiheuttamaan virheeseen. IOS: ssä viesti on e.detailsissä, kun taas Androidille, on e.message. Voit tarkistaa alustan helposti käyttämällä _isIos = Theme.of (konteksti) .platform == TargetPlatform.iOS, ja sen tulisi olla minkä tahansa rakennuswidget-menetelmän sisällä, koska se tarvitsee kontekstin.

_validateAndSubmit () async {
  setState (() {
    _errorMessage = "";
    _isLoading = totta;
  });
  if (_validateAndSave ()) {
    Merkkijono userId = "";
    yrittää {
      if (_formMode == FormMode.LOGIN) {
        userId = odota widget.auth.signIn (_posti, _ salasana);
        print ('Sisäänkirjautunut: $ userId');
      } muuta {
        userId = odota widget.auth.signUp (_ sähköposti, _ salasana);
        print ('Rekisteröitynyt käyttäjä: $ userId');
      }
      if (userId.length> 0 && userId! = nolla) {
        widget.onSignedIn ();
      }
    } saalis (e) {
      print ('Virhe: $ e');
      setState (() {
        _isLoading = false;
        if (_isIos) {
          _errorMessage = e.tiedot;
        } muuta
          _errorMessage = sähköposti;
      });
    }
  }
}

Vaihe 11: Tyhjennä lomakekenttä vaihdettaessa

Meidän on lisättävä seuraava rivi sekä _changeFormToSignUp- että _changeFormToLogin-tiedostoihin, jotta lomakekenttä voidaan nollata aina, kun käyttäjä vaihtaa kirjautumis- ja rekisteröintimuodon välillä.

formKey.currentState.reset ();

Vaihe 12: Yritä rekisteröidä käyttäjä

Yritetään rekisteröidä käyttäjä antamalla sähköpostiosoite ja salasana.

Jos kohtaat jotain alla olevista, tämä johtuu siitä, että sähköpostin lopussa on ylimääräinen väli
I / räpytys (14294): Virhe PlatformException (poikkeus, sähköpostiosoite on muotoiltu huonosti, tyhjä)
Jos kohtaat jotain alla olevista, vaihda salasanasi vähintään 6 merkkiä pitkäksi.
I / räpytys (14294): Virhe PlatformException (poikkeus, annettu salasana on virheellinen. [Salasanan tulee olla vähintään 6 merkkiä], nolla)

Viimeinkin menestyksen jälkeen sinun pitäisi pystyä näkemään terminaalissasi seuraava rivi. Satunnainen merkkijono on käyttäjätunnus.

I / räpytys (14294): Rekisteröitynyt JSwpKsCFxPZHEqeuIO4axCsmWuP2

Samoin jos yritämme kirjautua sisään saman käyttäjän, jonka rekisteröimme, meidän pitäisi saada jotain tällaista:

I / räpytys (14294): Sisäänkirjautunut JSwpKsCFxPZHEqeuIO4axCsmWuP2

Vaihe 13: Ota käyttöön Auth-luokka

Luo uusi tiedostopuhelu todennus.dart. Aiomme myös toteuttaa abstraktin luokan BaseAuthin. Tämän abstraktin luokan tarkoitus on, että se toimii keskikerroksena käyttöliittymäkomponenttiemme ja todellisen toteutusluokan välillä, joka riippuu valitsemistamme puitteista. Joka tapauksessa päätimme vaihtaa Firebaseen jotain PostgreSQL: n kaltaista, niin sillä ei olisi vaikutusta käyttöliittymän komponentteihin.

Tuo 'dart: async';
Tuo 'paketti: firebase_auth / firebase_auth.dart';

abstrakti luokka BaseAuth {
  Tuleva  sisäänkirjautuminen (merkkijono-sähköposti, merkkijonon salasana);
  Future  signUp (merkkijono-sähköposti, merkkijonon salasana);
  Future  getCurrentUser ();
  Future  signOut ();
}

luokan Auth toteuttaa BaseAuth {
  lopullinen FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  Tuleva  sisäänkirjautuminen (merkkijono-sähköposti, merkkijonon salasana) async {
    FirebaseUser user = odota _firebaseAuth.signInWithEmailAndPassword (sähköposti: sähköposti, salasana: salasana);
    palauttaa käyttäjä.uid;
  }

  Tuleva  signUp (merkkijonon sähköposti, merkkijonon salasana) async {
    FirebaseUser user = odota _firebaseAuth.createUserWithEmailAndPassword (sähköposti: sähköposti, salasana: salasana);
    palauttaa käyttäjä.uid;
  }

  Tuleva  getCurrentUser () async {
    FirebaseUser user = odota _firebaseAuth.currentUser ();
    palauttaa käyttäjä.uid;
  }

  Tulevaisuuden  signOut () async {
    return _firebaseAuth.signOut ();
  }
}

Sisään login_page.dart

luokan LoginSignUpPage laajentaa StatefulWidget {
LoginSignUpPage ({this.auth});
lopullinen BaseAuth-todennus;
@ohittaa
Tila  createState () => uusi _LoginPageState ();
}

Main.dart

etusivu: uusi LoginSignUpPage (auth: new Auth ())

Palaa sisään login_page.dart -sovellukseen, vaihtaa sisäänkirjautumisenWithEmailAndPassword

Merkkijono userId = odota widget.auth.signIn (_posti, _ salasana);
Merkkijono userId = odota widget.auth.signUp (_posti, _ salasana);

Vaihe 14: Juuri ja kotona VoidCallbackilla

Luomme uuden tiedoston puhelun home_page.dart. Tämä näkyy tyhjänä tehtäväluettelona, ​​kun käyttäjä on onnistuneesti kirjautunut sisään tai rekisteröitynyt. Kuten tavallista, toteutamme telineet AppBarilla, mutta tällä kertaa meillä on FlatButton AppBarin sisällä uloskirjautumista varten. Tämä uloskirjautuminen kutsuu FireBase-uloskirjautumismenetelmää BaseAuth-luokan sisällä.

Meidän on myös luotava tiedostokoodi root_page.dart. Tämä korvaa home: LoginSignUpPage (auth: new Auth ()) main.dart -sivustossamme.

etusivu: uusi RootPage (auth: new Auth ())

Kun sovellus käynnistyy, sen pitäisi siirtyä tälle sivulle. Tämä sivu toimii ylläpitäjänä tarkistaakseen voimassa olevan Firebase-käyttäjätunnuksen ja ohjaa hänet sopivalle sivulle. Esimerkiksi, jos käyttäjätunnus on läsnä, tarkoittaa, että käyttäjä on jo kirjautunut sisään ja käyttäjälle tulisi näyttää kotisivu kirjautumissivun sijasta. Tämä tehdään initState: n sisällä, joka on toiminto, joka suoritetaan ensin tiedostossa.

Juurisivulla on 2 tapaa, jotka ovat _onLoggedIn ja _onSignedOut. _OnLoggedIn-sovelluksessa yritämme saada käyttäjätunnuksen ja asetukset tila authStatus käyttäjälle on jo kirjautuneena sisään. _OnSignedOut -sovelluksessa tyhjennetään tallennettu käyttäjän tunnus ja asetukset tila authStatus käyttäjälle ei ole kirjautuneena sisään.

Juurisivulla siirrämme 2 parametria sisäänkirjautumissivulle, yksi on Auth-luokka, jonka toteutamme helpommin (välitämme sen osoitteessa main.dart) ja _onLoggedIn-menetelmä). Login_signup_ -sivulle luomme 2 muuttujaa, jotka ovat autA tyyppiä BaseAuth ja onSignaIn tyyppi VoidCallback. Voimme noutaa helposti login_signup_page -sivulle siirretyt 2 parametria paikallisiin muuttujiimme seuraavan rivin avulla.

LoginSignUpPage ({this.auth, this.onSignedIn});

lopullinen BaseAuth-todennus;
lopullinen VoidCallback onSignedIn;

VoidCallback antaa login_signup_page -sovellukselle kutsua juurihakemistosivun sisäistä menetelmää, joka on _onS SignIn, kun käyttäjä kirjautuu sisään. Kun _onSignedIn kutsutaan, se asettaa authStatus-arvoon LOGGED_IN ja asettaaState-sovelluksen piirrämään sovelluksen uudelleen. Kun sovellus piirretään uudelleen, initState tarkistaa authStatuksen ja koska se on LOGGED_IN, se näyttää kotisivun, joka kulkee sisäänkirjautumisen ja _signOut-sovelluksen tyhjentämisen kautta.

root_page.dart

@ohittaa
Widget-rakennus (BuildContext-konteksti) {
  kytkin (authStatus) {
    tapaus AuthStatus.NOT_DETERMINED:
      return _buildWaitingScreen ();
      tauko;
    tapaus AuthStatus.NOT_LOGGED_IN:
      palauta uusi LoginSignUpPage (
        auth: widget.auth,
        onSignaIn: _onLoggedIn,
      );
      tauko;
    tapaus AuthStatus.LOGGED_IN:
      if (_userId.length> 0 && _userId! = nolla) {
        palauta uusi kotisivu (
          userId: _userId,
          auth: widget.auth,
          onSignaOut: _onSignedOut,
        );
      } else return _buildWaitingScreen ();
      tauko;
    oletus:
      return _buildWaitingScreen ();
  }
}

Huomaa vianetsintanauha sovelluksen oikeassa yläkulmassa. Voit poistaa sen helposti lisäämällä seuraava rivi MaterialApp-widgettiin main.dartissa

Demon kirjautumisnäyttö
debugShowCheckedModeBanner: false,
Debug-banneri poistettu

Saat täydellisen lähdekoodin alla olevasta github-linkistä

Jos tämä artikkeli on hyödyllinen, anna jotain

Viite:

Flutter Pub on keskikokoinen julkaisu, joka tarjoaa sinulle uusimmat ja upeat resurssit, kuten artikkelit, videot, koodit, podcastit jne. Tästä upeasta tekniikasta ja opettaa sinulle kuinka rakentaa kauniita sovelluksia sen kanssa. Löydät meidät Facebookista, Twitteristä ja Mediumista tai saat lisätietoja meistä täältä. Haluaisimme yhteyden! Ja jos olet kirjailija, joka on kiinnostunut meille kirjoittamisesta, voit tehdä niin näiden ohjeiden avulla.