Share
Velkommen til del 1 av 3 i min serie om autentisering av brukere med Titanium. Titanium er en åpen kildekode kompilator som lar deg skrive iPhone og Android (snart for å være blackberry også!) Programmer som bruker Javascript. Ingen mål-C kreves! Vi bruker PHP som serverespråk i denne opplæringen, og databasen min vil være MySQL.
Lag en ny database eller bruk en eksisterende, og åpne den deretter. For å spare tid på dette trinnet har jeg tatt med SQL-koden nedenfor for å lage tabellen for deg. Jeg har kalt det bare 'brukere'. Når bordet er opprettet, legg til en ny rad. Jeg har valgt 'rondog' som brukernavn, '1234' som passord, mitt virkelige navn og min e-postadresse. Glem ikke å kjøre MD5-funksjonen på passordfeltet når du setter inn. Hvis din MySQL GUI ikke tilbyr muligheten til å kjøre MD5-funksjonen, bruk denne md5-generatoren og kopier / lim inn 32-tegnstrengen i passordfeltet. Du trenger heller ikke å fylle 'id' -feltet ut som det er et automatisk stigende felt.
Accentsconagua
CREATE TABLE 'users' ('id' int (11) IKKE NULL AUTO_INCREMENT, 'brukernavn' varchar (255) IKKE NULL, 'passord' varchar (32) IKKE NULL, 'navn' varchar (255) IKKE NULL, 'email' varchar (255) IKKE NULL, PRIMARY KEY ('id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
Merk: Denne SQL-setningen ble eksportert fra phpMyAdmin. Hvis du får feil når du kopierer / limer denne SQL-setningen, må du manuelt opprette tabellen og feltene ved hjelp av innstillingene ovenfor.
Åpne opp titan og opprett et nytt prosjekt. Navnet du velger, spiller ingen rolle for denne opplæringen. Når prosjektet er opprettet, blar du til Resources / app.js-filen. Deres er mange ting i det allerede som vi ikke trenger. Gå videre og fjern alt unntatt bakgrunnsfargen øverst.
Nå må vi lage tre ting:
Vi legger da vinduet til fanen og fanen til gruppen og åpner den deretter.
// dette setter bakgrunnsfargen til master UIView (når det ikke er noen vinduer / fanegrupper på den) Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'User Authentication Demo', tabBarHidden: true, url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", vindu: logg inn)); tabGroup.addTab (loginTab); tabGroup.open (); Ok, så vi har laget vårt vindu, fan og fanegruppe.
Merk: Før du kompilerer, legg merke til URL-egenskapen i vinduet. I mappen Resources, lag en ny mappe som heter 'main_windows' og en ny JS-fil som heter login.js. Nettadressegenskapen forteller at kompilatoren bruker login.js som vårt vindu. Hvis du hopper over denne delen, vil Titanium kaste en stygg rød feil i emulatoren.
Ved en vellykket kompilering bør skjermen se slik ut:
Åpne opp login.js etter at du har opprettet den. Vi legger til 2 tekstfelter og en knapp.
var vinne = Titanium.UI.currentWindow; var brukernavn = Titanium.UI.createTextField (color: '# 336699', topp: 10, venstre: 10, bredde: 300, høyde: 40, hintText: 'Brukernavn', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (brukernavn); var passord = Titanium.UI.createTextField (color: '# 336699', topp: 60, venstre: 10, bredde: 300, høyde: 40, hintText: 'Passord', passordMask: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (passord); var loginBtn = Titanium.UI.createButton (title: 'Logg inn', topp: 110, bredde: 90, høyde: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'fet', fontSize: 14 ); win.add (loginBtn);
Gå videre og kompilere og grensesnittet ditt skal se slik ut. Deres vil ikke være noen funksjonalitet ennå, men du vil kunne skrive.
Vi må opprette en klikkhendelselytter, men før vi går og sjekker om brukeren finnes i databasen, vil vi gjøre noe feilkontroll på feltene. Vi vil også opprette en HTTP-klient via createHTTPClient () -funksjonen.
var loginReq = Titanium.Network.createHTTPClient (); loginBtn.addEventListener ('klikk', funksjon (e) if (brukernavn.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php "); var params = brukernavn: brukernavn.value, passord: Ti.Utils.md5HexDigest (password.value); loginReq.send (params); else alert (" Brukernavn / passord er påkrevd "); ); For å forklare det ovennevnte, kontrollerer vi først om noen av feltene er tomme. Hvis de er, presenterer vi et varsel som sier at de er påkrevd. Hvis de begge har verdier, vil vi åpne vår PHP-fil (vi vil opprette dette neste) og sende noen verdier til den. Legg merke til at jeg kjører MD5-kryptering på passordverdien.
Denne filen blir PHP-filen vår app snakker til når du trykker på innloggingsknappen. Navnet må gjenspeile navnet i vår loginReq.open () metode i forrige trinn. Jeg har kalt min post_auth.php. Erstatt mine mysql_connect og mysql_select_db innstillinger med tilkoblingsinnstillingene.
0) $ row = mysql_fetch_array ($ query); $ response = array ('logged' => sant, 'navn' => $ rad ['navn'], 'email' => $ rad ['email']); ekko json_encode ($ respons); else // Ellers var brukernavnet og / eller passordet ugyldig! Opprett en matrise, json_enkode den og ekko den ut $ response = array ('logged' => false, 'message' => 'Ugyldig brukernavn og / eller passord'); ekko json_encode ($ respons); ?> Ok, tilbake til login.js. La oss gjøre litt datahåndtering for når PHP returnerer noe. Plasser denne koden under var loginReq og over klikk-hendelsen.
loginReq.onload = function () var json = this.responseText; var respons = JSON.parse (json); hvis (response.logged == true) alert ("Welcome" + response.name + ". Din epost er:" + response.email); ellers alert (response.message); ; JSON.parse () er en del av Titanium API. Den analyserer json_encode () strengen vi opprettet i vår PHP-fil. La oss starte det nå. Skriv inn brukernavnet eller passordet ditt. Avhengig av om du skriver det riktig eller ikke, vil du enten se velkomstmeldingen eller du vil se feil brukernavn / passordbeskjed. Prøv begge!
Hvis du får en feil i Titanium-konsollen om ikke å kunne analysere JSON-strengen, betyr det at du ikke kobler til databasen eller velger databasen. Prøv å bla direkte til filen post_auth.php i nettleseren din og se hva feilen er. Jeg ville bla gjennom til min via denne nettadressen http: // localhost: 8888 / post_auth.php
I del 1 av denne serien opprettet vi 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. Jeg håper du likte denne opplæringen, og at det ikke var for vanskelig å følge med tanke på at vi brukte 3 forskjellige teknologier: PHP, MySQL og Titanium (Javascript)! Hold deg oppdatert for del 2 i denne serien der vi skal lage en ny fane som lar brukerne opprette en konto.
