Ionic Login: Nutzeranmeldung mit dem Parse SDK einrichten

so fügen sie ihrem ionic framework projekt einen anmeldebildschirm hinzu einführung in diesem abschnitt lernen sie, wie sie eine seite erstellen und die registrierung, anmeldung und abmeldung in ihre ionic app implementieren so wird es aussehen voraussetzungen um dieses schnellstartprojekt abzuschließen, benötigen sie https //code visualstudio com/download (oder eine beliebige web ide, die sie mögen) https //ionicframework com/getting started/ eine app, die bei back4app erstellt wurde befolgen sie das https //www back4app com/docs/get started/new parse app , um zu lernen, wie man eine parse app bei back4app erstellt jederzeit können sie auf das vollständige ionic projekt zugreifen, das mit diesem tutorial erstellt wurde, in unserem https //github com/back4app/ionic email verification 1 installieren sie das parse sdk da sie ein bestehendes ionic projekt haben, müssen sie zunächst das parse sdk installieren sie können dies tun, indem sie folgendes ausführen $ npm install parse 2 richten sie die anmeldeinformationen der app ein öffnen sie ihre app component ts app component ts , importieren sie parse parse und initialisieren sie die verbindung zum back4app parse server app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; wenn sie nicht wissen, wie sie ihre schlüssel finden, sehen sie sich das erste ionic tutorial an https //www back4app com/docs/js framework/ionic/ionic template#setup 3 erstellen sie die anmeldeseite jetzt erstellen wir unsere anmeldeseite glücklicherweise erledigt ionic alles für uns alles, was wir tun müssen, ist, den folgenden befehl auszuführen $ ionic generate page login in dieser seitenansicht müssen wir eingaben für benutzername benutzername und passwort passwort und zwei schaltflächen hinzufügen, eine zum registrieren und eine zum anmelden login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 lass uns jetzt die methoden signin() signin() und signup() signup() umsetzen, die in unserer anmeldeseite anmeldeseite erwähnt werden login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } erfahren sie mehr über signup() signup() bei https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } erfahren sie mehr über parse user login() parse user login() bei https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup so sollte es aussehen 4 implementieren sie das ausloggen lass uns zu unserer startseite (oder der seite, auf die der benutzer nach dem einloggen geleitet wird) wechseln und die abmeldung implementieren zuerst öffne home html und füge einen button dafür hinzu login html 1 you are logged in! 2 3 4 5 log out 6 7 jetzt lass uns die logout() logout() methode implementieren und auch eine toast toast komponente hinzufügen, falls die anfrage fehlschlägt home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } erfahren sie mehr über parse user logout() parse user logout() unter https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup es sollte so aussehen 5 setzen sie die startseite eine wichtige funktion von parse parse ist, dass es sich merkt, ob ein benutzer auf einem gerät angemeldet ist oder nicht das bedeutet, dass sie die sitzung des benutzers wiederherstellen können, wenn die app geöffnet ist, selbst wenn der benutzer die app schließt damit können wir bestimmen, ob die startseite unserer app unsere loginpage loginpage oder homepage homepage sein wird um dies zu tun, müssen wir nur currentasync() currentasync() es wird den angemeldeten benutzer oder null null zurückgeben app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) erfahren sie mehr über parse user currentasync() parse user currentasync() unter https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup schließlich ist alles eingerichtet! an diesem punkt führen sie einfach ionic serve ionic serve aus und sie haben funktionen zum anmelden, registrieren und abmelden, die auch den angemeldeten benutzer bis zu dessen abmeldung speichern