Flutter-Login mit Parse: Benutzerverwaltung optimieren

benutzeranmeldung und abmeldung für flutter mit parse server einführung nachdem sie die benutzerregistrierung für flutter auf parse im letzten leitfaden implementiert haben, lernen sie, wie sie benutzer mit derselben parseuser klasse anmelden und abmelden nach einer registrierung wird die anmeldeoperation automatisch durchgeführt und eine neue benutzersitzung erstellt die abmeldeoperation löscht das aktive sitzungsobjekt für den angemeldeten benutzer in diesem leitfaden lernen sie, wie sie das flutter plugin für parse server verwenden, um die anmeldung/abmeldung mit der parseuser klasse für ihre flutter app durchzuführen ziel eine benutzeranmelde /abmeldefunktion mit parse für eine flutter app zu erstellen voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter version 2 2 x oder höher https //flutter dev/docs/get started/install android studio https //developer android com/studio oder vs code installiert (mit plugins dart und flutter) eine app erstellt auf back4app hinweis folgen sie dem neuen parse app tutorial um zu lernen, wie man eine parse app auf back4app erstellt eine flutter app, die mit back4app verbunden ist hinweis folgen sie dem installieren sie das parse sdk im flutter projekt um ein flutter projekt zu erstellen, das mit back4app verbunden ist vervollständigen sie den vorherigen leitfaden, damit sie ein besseres verständnis der parseuser parseuser klasse haben ein gerät (oder virtuelles gerät), das android oder ios ausführt verstehen der login/logout app um den anmelde /abmeldeprozess besser zu verstehen, werden wir eine app erstellen, um benutzer in ihr konto ein und auszuloggen wir werden den flutter anwendungscode nicht erklären, da der schwerpunkt dieses leitfadens auf der verwendung von flutter mit parse liegt in den folgenden schritten werden sie eine anmelde und abmelde app in der back4app datenbank erstellen lass uns anfangen! in den folgenden schritten werden sie in der lage sein, eine login/logout app zu erstellen 1 erstellen sie die vorlage für die login/logout app öffnen sie ihr flutter projekt aus dem vorherigen leitfaden flutter plugin für parse server gehen sie zur main dart main dart datei, bereinigen sie den gesamten code und ersetzen sie ihn durch 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 4 void main() async { 5 widgetsflutterbinding ensureinitialized(); 6 7 final keyapplicationid = 'your app id here'; 8 final keyclientkey = 'your client key here'; 9 final keyparseserverurl = 'https //parseapi back4app com'; 10 11 await parse() initialize(keyapplicationid, keyparseserverurl, 12 clientkey keyclientkey, debug true); 13 14 runapp(myapp()); 15 } 16 17 class myapp extends statelesswidget { 18 @override 19 widget build(buildcontext context) { 20 return materialapp( 21 title 'flutter login/logout', 22 theme themedata( 23 primaryswatch colors blue, 24 visualdensity visualdensity adaptiveplatformdensity, 25 ), 26 home homepage(), 27 ); 28 } 29 } 30 31 class homepage extends statefulwidget { 32 @override 33 homepagestate createstate() => homepagestate(); 34 } 35 36 class homepagestate extends state\<homepage> { 37 final controllerusername = texteditingcontroller(); 38 final controllerpassword = texteditingcontroller(); 39 bool isloggedin = false; 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter login/logout'), 46 ), 47 body center( 48 child singlechildscrollview( 49 padding const edgeinsets all(8), 50 child column( 51 crossaxisalignment crossaxisalignment stretch, 52 children \[ 53 container( 54 height 200, 55 child image network( 56 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 57 ), 58 center( 59 child const text('flutter on back4app', 60 style 61 textstyle(fontsize 18, fontweight fontweight bold)), 62 ), 63 sizedbox( 64 height 16, 65 ), 66 center( 67 child const text('user login/logout', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 enabled !isloggedin, 76 keyboardtype textinputtype text, 77 textcapitalization textcapitalization none, 78 autocorrect false, 79 decoration inputdecoration( 80 border outlineinputborder( 81 borderside borderside(color colors black)), 82 labeltext 'username'), 83 ), 84 sizedbox( 85 height 8, 86 ), 87 textfield( 88 controller controllerpassword, 89 enabled !isloggedin, 90 obscuretext true, 91 keyboardtype textinputtype text, 92 textcapitalization textcapitalization none, 93 autocorrect false, 94 decoration inputdecoration( 95 border outlineinputborder( 96 borderside borderside(color colors black)), 97 labeltext 'password'), 98 ), 99 sizedbox( 100 height 16, 101 ), 102 container( 103 height 50, 104 child textbutton( 105 child const text('login'), 106 onpressed isloggedin ? null () => douserlogin(), 107 ), 108 ), 109 sizedbox( 110 height 16, 111 ), 112 container( 113 height 50, 114 child textbutton( 115 child const text('logout'), 116 onpressed !isloggedin ? null () => douserlogout(), 117 ), 118 ) 119 ], 120 ), 121 ), 122 )); 123 } 124 125 void showsuccess(string message) { 126 showdialog( 127 context context, 128 builder (buildcontext context) { 129 return alertdialog( 130 title const text("success!"), 131 content text(message), 132 actions \<widget>\[ 133 new textbutton( 134 child const text("ok"), 135 onpressed () { 136 navigator of(context) pop(); 137 }, 138 ), 139 ], 140 ); 141 }, 142 ); 143 } 144 145 void showerror(string errormessage) { 146 showdialog( 147 context context, 148 builder (buildcontext context) { 149 return alertdialog( 150 title const text("error!"), 151 content text(errormessage), 152 actions \<widget>\[ 153 new textbutton( 154 child const text("ok"), 155 onpressed () { 156 navigator of(context) pop(); 157 }, 158 ), 159 ], 160 ); 161 }, 162 ); 163 } 164 165 void douserlogin() async { 166 167 } 168 169 void douserlogout() async { 170 171 } 172 } 173 wenn debug debug parameter in der funktion parse() initialize parse() initialize ist true true , ermöglicht das anzeigen von parse api aufrufen in der konsole diese konfiguration kann beim debuggen des codes helfen es wird empfohlen, das debugging in der release version zu deaktivieren 2 verbinden sie die vorlage mit dem back4app projekt finden sie ihre anwendungs id und client schlüssel anmeldeinformationen, indem sie zu ihrem app dashboard navigieren unter back4app website https //www back4app com/ aktualisieren sie ihren code in main dart main dart mit den werten ihrer anwendungs id und client schlüssel in back4app keyapplicationid = anwendungs id keyclientkey = client schlüssel führen sie das projekt aus, und die app wird wie im bild gezeigt geladen 3 code für benutzeranmeldung die benutzeranmeldefunktion erstellt ein sitzung sitzung objekt, das auf den benutzer benutzer verweist, der angemeldet ist, und speichert in ihrem lokalen speicher eine gültige benutzersitzung zukünftige aufrufe von methoden wie currentuser currentuser werden erfolgreich ihre benutzer benutzer daten und sessiontoken sessiontoken für das sitzungs sitzungs objekt, das im dashboard dashboard erstellt wurde suchen sie die funktion douserlogin douserlogin in der datei main dart main dart ersetzen sie den code innerhalb von douserlogin douserlogin mit 1 final username = controllerusername text trim(); 2 final password = controllerpassword text trim(); 3 4 final user = parseuser(username, password, null); 5 6 var response = await user login(); 7 8 if (response success) { 9 showsuccess("user was successfully login!"); 10 setstate(() { 11 isloggedin = true; 12 }); 13 } else { 14 showerror(response error! message); 15 } um diese funktion zu erstellen, befolgen sie diese schritte erstellen sie eine neue parseuser parseuser klasseninstanz mit dem befehl parseuser(username, password, null); parseuser(username, password, null); unter verwendung der im app eingegebenen daten das e mail feld ist nicht erforderlich und muss mit null angegeben werden rufen sie die login login funktion auf, die eine sitzung sitzung in ihrer datenbank im parse dashboard erstellt und das token im lokalen speicher speichert überprüfen sie, ob die benutzeranmeldung erfolgreich war wenn sie nicht erfolgreich war, zeigen sie die fehlermeldung an die vollständige funktion sollte folgendermaßen aussehen 1 void douserlogin() async { 2 final username = controllerusername text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser(username, password, null); 6 7 var response = await user login(); 8 9 if (response success) { 10 showsuccess("user was successfully login!"); 11 setstate(() { 12 isloggedin = true; 13 }); 14 } else { 15 showerror(response error! message); 16 } 17 } um es zu testen, klicken sie auf die ausführen ausführen schaltfläche in android studio/vscode nachdem sie die gewünschten benutzeranmeldeinformationen eingegeben haben, sehen sie diese nachricht, nachdem sie auf anmelden gedrückt haben, wenn alles erfolgreich war die fehlerbehandlung kann getestet werden, wenn sie versuchen, sich mit ungültigen anmeldeinformationen anzumelden sie erhalten einen weiteren fehler, wenn sie versuchen, sich ohne passwort anzumelden 4 code zum abmelden des benutzers die benutzer abmeldefunktion löscht das sitzung sitzung , die in der anmeldefunktion erstellt wurde sie wird diese sitzung auf dem gerät löschen und sich von allen verknüpften diensten auf ihrem parse server abmelden suchen sie nach der funktion douserlogout douserlogout in der datei main dart main dart ersetzen sie den code innerhalb von douserlogout douserlogout mit 1 final user = await parseuser currentuser() as parseuser; 2 var response = await user logout(); 3 4 if (response success) { 5 showsuccess("user was successfully logout!"); 6 setstate(() { 7 isloggedin = false; 8 }); 9 } else { 10 showerror(response error! message); 11 } um diese funktion zu erstellen, befolgen sie diese schritte holen sie sich den aktuell angemeldeten benutzer mit der funktion parseuser currentuser() parseuser currentuser() rufen sie die logout logout funktion für parseuser parseuser objekt auf, das die session session in ihrer datenbank löscht und das token im lokalen speicher bereinigt überprüfen sie, ob die abmeldung des benutzers erfolgreich war wenn sie nicht erfolgreich war, zeigen sie die fehlermeldung an der vollständige code sollte folgendermaßen aussehen 1 void douserlogout() async { 2 final user = await parseuser currentuser() as parseuser; 3 var response = await user logout(); 4 5 if (response success) { 6 showsuccess("user was successfully logout!"); 7 setstate(() { 8 isloggedin = false; 9 }); 10 } else { 11 showerror(response error! message); 12 } 13 } um es zu testen, klicken sie auf die ausführen ausführen schaltfläche in android studio/vscode nachdem sie die gewünschten benutzeranmeldeinformationen eingegeben haben, sehen sie diese nachricht, nachdem sie auf anmelden gedrückt haben, wenn alles erfolgreich war klicken sie auf die schaltfläche „abmelden“ es ist erledigt! am ende dieses leitfadens können sie parse benutzer ihrer app mit den kernfunktionen von parse server über back4app anmelden und abmelden!