Share
Velkommen til del tre av brukerautentisering ved hjelp av Titanium. Titanium er en åpen kildekode-kompilator som lar deg skrive iPhone og Android (snart for å være blackberry too!) Programmer ved hjelp av Javascript. Vi vil bruke PHP som server side kode språk, og databasen min vil bli MySQL. For dette eksempelet bruker jeg MAMP til å utvikle seg lokalt. I del tre vil vi dekke å legge til et nytt vindu og overføre databaseresultatene til det når en bruker logger på ved hjelp av egendefinerte hendelser. Dette nye vinduet representerer ditt logg inn-grensesnitt. Hvis du ikke allerede har lest det, anbefaler jeg at du begynner med første del.
I del ett lagde vi opp databasen og la til en bruker. Vi lagde deretter innloggingsgrensesnittet vårt ved å opprette en fanegruppe, en fane og et vindu. Vi ga deretter innloggingsknappen noen handlinger. Vår PHP-fil forespørte vår database og etter vellykket innlogging returnerte vi vårt navn og e-post. Hvis innlogging mislyktes, returnerte vi en streng som bare angir ugyldig brukernavn og / eller passord. I del 2 opprettet vi en ny fane på hovedskjermbildet. Denne fanen byttet vårt syn til en "opprett konto" -visning som tillot en bruker å registrere. I del tre vil vi lage et nytt vindu når brukeren logger inn og sender noen av brukerens data til den. Dette vinduet er i siste instans ditt "logget inn" -grensesnitt.
Lar åpne login.js og bla ned til vår loginReq.onload () metode. La oss kvitte oss med varselet vi har på plass ved vellykket pålogging og erstatte det med denne:
Accentsconagua
loginReq.onload = function () var json = this.responseText; var respons = JSON.parse (json); hvis (response.logged == true) username.blur (); password.blur (); Ti.App.fireEvent ('grantEntrance', navn: respons.name, email: response.email); win.close (); ellers alert (response.message); ; Så det vi gjorde her, var å erstatte vårt varsel med et arrangement som vi brann. Vi brann en hendelse som heter 'grantEntrance' siden innlogging var vellykket. Vi sender også to objekter: navn og e-post. Vi angir navnet objektet lik hva brukerinngangen var da de opprettet sin konto (denne informasjonen returneres av vår post_auth.php-fil). Det samme gjelder for e-posten deres. Vi har også kalt blur () -metoden for å fjerne markøren fra et av tekstfeltene. Til slutt lukker vi påloggingsvinduet.
Ikke kompilere ennå, siden du ikke vil legge merke til noe hvis du gjør det. For å kunne fortsette, må vi legge til en hendelseslytter. Vi vil gjøre det i de neste par trinnene.
Åpne opp app.js. Vi ønsker å opprette et nytt vindu og en ny kategori. I de tidligere opplæringsprogrammene har vi lagt til fanene med en gang ved hjelp av addTab () -metoden. I dette tilfellet vil vi ikke legge til det med en gang. Jeg har kalt min "Logged In" -vindu 'main'. Bare legg til det nye vinduet og fanen under vår kategorigruppe linje i app.js:
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); var main = Titanium.UI.createWindow (); var mainTab = Titanium.UI.createTab (); var login = Titanium.UI.createWindow (title: 'User Authentication Demo', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", vindu: logg inn)); var account = Titanium.UI.createWindow (tittel: 'Ny konto', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (tittel: 'Ny konto', vindu: konto); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
Din app.js bør nå gjenspeile ovenstående. Likevel, ikke kompilere som du ikke vil se noe. Vi vil kompilere neste løfte!
I login.js slått vi 'vår' grantEntrance '-hendelse. Vi ønsker å lage en tilføyelseshendelselytter for å lytte etter den hendelsen. Legg til dette nederst i app.js-filen vår:
Ti.App.addEventListener ('grantEntrance', funksjon (hendelse) main.tabBarHidden = true; main.title = 'Velkommen' + event.name; main.url = 'main_windows / main.js'; main.name = event .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (accountTab);); Så, på dette punktet skal vi sette noen egenskaper på vårt hovedvindu. Først skjul fanen nederst, siden vi ikke trenger påloggings- og kontofanen lenger. Vi setter topp tittelen for å si "Velkommen Ronnie Swietek" (eller hvilket navn du skriver inn da du lagde kontoen). Vi angir nettadressegenskapen for å bruke main.js-filen. Vi lager to egenskaper som heter navn og e-post, slik at vi kan ringe dem når som helst i vårt "Logged In" -grensesnitt. Vi setter vår mainTab vindu eiendom til vårt vindu, main. Til slutt legger vi endelig til fanen vår og fjerner loginTab og kontotabellen, siden de ikke lenger er nødvendig.
Før du kompilerer, må du sørge for at du har opprettet en main.js-fil og lagret den i main_windows-mappen. Nå kan du gå videre og kompilere. Når du kompilerer og logger inn, bør du se et tomt skjerm unntatt tittelen øverst som skal inneholde navnet ditt.
Når du logger på, bør du se objektet vi opprettet, vises i titan-konsollen. Min titankonsoll sier dette når jeg logger på:
email = "[email protected]"; navn = "Ronnie Swietek";
Åpne opp main.js. Akkurat nå bør det være tomt, men gå videre og sett inn dette, lagre og kompilere:
var vinne = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "Du har logget inn. Ved innlogging sendte vi tilbake e-postadressen din og navnet ditt. Du kan sende alle slags data ved å lage objekter på vinduet ditt. \ n \ Din e-postadresse er: \ n "+ win.email +" \ n \ nytt navn er: \ n "+ win.name, topp: 10, venstre: 10, bredde: 300, høyde: 'auto'); win.add (msg);
Når du logger på, bør du se teksten vi har satt på vår etikett. Vi har også tilgang til objektene vi opprettet via "win.objectName". I vårt tilfelle, win.name og win.email
I del 3 av denne serien lærte vi om tilpassede hendelser og overføring av data til Windows. Mulighetene er uendelige på dette punktet. Det er opp til deg å lage noe flott med din brukerautentiseringskunnskap. Jeg håper virkelig du likte å ta disse opplæringene så mye som jeg likte å lage dem. Vi ses alle igjen i fremtiden!
