Benutzerregistrierung mit Flutter und Parse Server

benutzerregistrierung für flutter mit parse server einführung im kern vieler apps haben benutzerkonten eine vorstellung, die es benutzern ermöglicht, sicher auf ihre informationen zuzugreifen parse bietet eine spezialisierte benutzerklasse benutzerklasse die automatisch einen großteil der für die verwaltung von benutzerkonten erforderlichen funktionalität übernimmt mit dieser klasse können sie die funktionalität von benutzerkonten in ihre app integrieren parseuser parseuser ist eine unterklasse von parseobject parseobject , und hat die gleichen funktionen alle methoden, die in parseobject vorhanden sind, existieren auch in parseuser der unterschied besteht darin, dass parseuser parseuser einige spezielle ergänzungen hat, die spezifisch für benutzerkonten sind parseuser parseuser hat mehrere eigenschaften, die es von parseobject unterscheiden benutzername der benutzername für den benutzer (erforderlich) passwort das passwort für den benutzer (erforderlich bei der anmeldung) e mail die e mail adresse für den benutzer (optional) sie können eine e mail adresse e mail adresse als benutzernamen benutzernamen bitten sie ihre benutzer, ihre e mail e mail , aber fügen sie sie in das benutzername benutzername feld ein — parseuser wird normal funktionieren in diesem leitfaden lernen sie, wie sie das flutter plugin für parse server verwenden, um benutzer mit der parseuser parseuser klasse zu verwalten und eine benutzerregistrierungsfunktion für ihre flutter app zu erstellen ziel eine benutzerregistrierungsfunktion 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 befolgen sie das tutorial für neue parse apps um zu lernen, wie man eine parse app auf back4app erstellt eine flutter app, die mit back4app verbunden ist hinweis befolgen sie das installieren sie das parse sdk im flutter projekt um ein flutter projekt zu erstellen, das mit back4app verbunden ist ein gerät (oder virtuelles gerät), das android oder ios ausführt verstehen der signup app um den signup prozess besser zu verstehen, werden wir eine app erstellen, um benutzerdaten zu registrieren und ihr konto zu erstellen wir werden den flutter anwendungscode nicht erklären, da der schwerpunkt dieses leitfadens auf der verwendung von flutter mit parse liegt indem sie die nächsten schritte befolgen, werden sie eine todo app erstellen, die die aufgaben in der back4app datenbank speichert lass uns anfangen! wenn sie die nächsten schritte befolgen, werden sie in der lage sein, eine sign app zu erstellen, die ein benutzerkonto in der back4app datenbank erstellt 1 erstellen sie eine sign app vorlage ö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 signup', 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 final controlleremail = texteditingcontroller(); 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter signup'), 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 registration', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 keyboardtype textinputtype text, 76 textcapitalization textcapitalization none, 77 autocorrect false, 78 decoration inputdecoration( 79 border outlineinputborder( 80 borderside borderside(color colors black)), 81 labeltext 'username'), 82 ), 83 sizedbox( 84 height 8, 85 ), 86 textfield( 87 controller controlleremail, 88 keyboardtype textinputtype emailaddress, 89 textcapitalization textcapitalization none, 90 autocorrect false, 91 decoration inputdecoration( 92 border outlineinputborder( 93 borderside borderside(color colors black)), 94 labeltext 'e mail'), 95 ), 96 sizedbox( 97 height 8, 98 ), 99 textfield( 100 controller controllerpassword, 101 obscuretext true, 102 keyboardtype textinputtype text, 103 textcapitalization textcapitalization none, 104 autocorrect false, 105 decoration inputdecoration( 106 border outlineinputborder( 107 borderside borderside(color colors black)), 108 labeltext 'password'), 109 ), 110 sizedbox( 111 height 8, 112 ), 113 container( 114 height 50, 115 child textbutton( 116 child const text('sign up'), 117 onpressed () => douserregistration(), 118 ), 119 ) 120 ], 121 ), 122 ), 123 )); 124 } 125 126 void showsuccess() { 127 showdialog( 128 context context, 129 builder (buildcontext context) { 130 return alertdialog( 131 title const text("success!"), 132 content const text("user was successfully created!"), 133 actions \<widget>\[ 134 new flatbutton( 135 child const text("ok"), 136 onpressed () { 137 navigator of(context) pop(); 138 }, 139 ), 140 ], 141 ); 142 }, 143 ); 144 } 145 146 void showerror(string errormessage) { 147 showdialog( 148 context context, 149 builder (buildcontext context) { 150 return alertdialog( 151 title const text("error!"), 152 content text(errormessage), 153 actions \<widget>\[ 154 new flatbutton( 155 child const text("ok"), 156 onpressed () { 157 navigator of(context) pop(); 158 }, 159 ), 160 ], 161 ); 162 }, 163 ); 164 } 165 166 void douserregistration() async { 167 //sigup code here 168 } 169 } 170 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 key 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 der anwendungs id und des client schlüssels ihres projekts 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 einen neuen benutzer in ihrer parse app zuvor wird überprüft, ob sowohl der benutzername als auch die e mail adresse eindeutig sind wenn eine anmeldung nicht erfolgreich ist, sollten sie das zurückgegebene fehlerobjekt überprüfen der wahrscheinlichste grund ist, dass ein anderer benutzer bereits den benutzernamen oder die e mail adresse verwendet hat sie sollten dies ihren benutzern mitteilen und sie bitten, einen anderen benutzernamen auszuprobieren suchen sie die funktion douserregistration douserregistration in der datei main dart main dart ersetzen sie den code innerhalb von douserregistration douserregistration mit 1 final username = controllerusername text trim(); 2 final email = controlleremail text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser createuser(username, password, email); 6 7 var response = await user signup(); 8 9 if (response success) { 10 showsuccess(); 11 } else { 12 showerror(response error! message); 13 } um diese funktion zu erstellen, befolgen sie diese schritte erstellen sie eine neue instanz der parseuser parseuser klasse mit dem befehl parseuser createuser(username, password, email) parseuser createuser(username, password, email) , mit daten, die in der app ausgefüllt wurden rufen sie die signup signup funktion auf, die den benutzer in ihrer datenbank im parse dashboard registriert überprüfen sie, ob die benutzerregistrierung erfolgreich war wenn nicht, zeigen sie eine fehlermeldung an der vollständige code sollte so aussehen 1 void douserregistration() async { 2 final username = controllerusername text trim(); 3 final email = controlleremail text trim(); 4 final password = controllerpassword text trim(); 5 6 final user = parseuser createuser(username, password, email); 7 8 var response = await user signup(); 9 10 if (response success) { 11 showsuccess(); 12 } else { 13 showerror(response error! message); 14 } 15 } 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 registrieren gedrückt haben, wenn alles erfolgreich war die fehlerbehandlung kann getestet werden, wenn sie versuchen, einen benutzer mit demselben benutzernamen wie zuvor zu registrieren sie erhalten einen weiteren fehler, wenn sie versuchen, sich ohne passwort anzumelden 4 überprüfen sie die benutzerregistrierung im dashboard melden sie sich an bei back4app website https //www back4app com/ finden sie ihre app und klicken sie auf dashboard dashboard > core core > browser browser > benutzer benutzer an diesem punkt sollten sie ihren benutzer wie unten angezeigt sehen es ist erledigt! am ende dieses leitfadens haben sie gelernt, wie man neue parse benutzer in flutter registriert im nächsten leitfaden zeigen wir ihnen, wie sie benutzer ein und ausloggen