Share
Benvenuti nella parte 1 di 3 della mia piccola serie sull'autenticazione degli utenti con Titanium. Titanium è un cross-converter open source che ti permette di scrivere applicazioni per iPhone e Android (presto anche per il blackberry!) Usando Javascript. Non è richiesto nessun obiettivo-C! Useremo PHP come linguaggio lato server in questo tutorial e il mio database sarà MySQL.
Crea un nuovo database o usane uno esistente, quindi aprilo. Per risparmiare tempo su questo passaggio, ho incluso il codice SQL qui sotto per creare il tavolo per te. L'ho chiamato semplicemente 'utenti'. Dopo aver creato la tabella, aggiungi una nuova riga. Ho scelto 'rondog' come nome utente, '1234' come la mia password, il mio vero nome e la mia email. NON DIMENTICARE di eseguire la funzione MD5 sul campo della password durante l'inserimento. Se la tua GUI MySQL non offre la possibilità di eseguire la funzione MD5, usa questo generatore md5 e copia / incolla la stringa di 32 caratteri nel campo della password. Inoltre non è necessario compilare il campo 'id' perché è un campo autoincrementante.
Accentsconagua
CREATE TABLE 'users' ('id' int (11) NOT NULL AUTO_INCREMENT, 'username' varchar (255) NOT NULL, 'password' varchar (32) NOT NULL, 'name' varchar (255) NOT NULL, 'email' varchar (255) NOT NULL, PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
Nota: questa istruzione SQL è stata esportata da phpMyAdmin. Se si verificano errori durante la copia / incolla di questa istruzione SQL, è necessario creare manualmente la tabella e i campi utilizzando le impostazioni precedenti.
Apri il titanio e crea un nuovo progetto. Il nome che scegli non ha importanza per questo tutorial. Una volta creato il progetto, accedere al file Resources / app.js. Il loro è un sacco di cose in esso già che non abbiamo bisogno. Vai avanti e rimuovi tutto tranne la linea del colore di sfondo in alto.
Ora dobbiamo creare 3 cose:
Quindi aggiungeremo la finestra alla scheda e la scheda al gruppo e quindi aprirlo.
// questo imposta il colore di sfondo del master UIView (quando non ci sono gruppi di finestre / tab su di esso) 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", finestra: login); tabGroup.addTab (loginTab); tabGroup.open (); Ok, abbiamo creato la nostra finestra, il tab e il gruppo di schede.
Nota: prima di compilare, nota la proprietà URL nella finestra. Nella cartella Risorse, crea una nuova cartella chiamata 'main_windows' e un nuovo file JS chiamato login.js. La proprietà URL dice al compilatore di usare login.js come nostra finestra. Se salti questa parte, il titanio genererà un brutto errore rosso nell'emulatore.
Dopo aver compilato con successo, lo schermo dovrebbe apparire come questo:
Apri login.js dopo averlo creato. Aggiungeremo 2 campi di testo e un pulsante.
var win = Titanium.UI.currentWindow; var nomeutente = Titanium.UI.createTextField (color: '# 336699', inizio: 10, sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Nome utente', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (nome utente); var password = Titanium.UI.createTextField (color: '# 336699', inizio: 60, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Password', passwordMask: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (password); var loginBtn = Titanium.UI.createButton (title: 'Login', inizio: 110, larghezza: 90, altezza: 35, borderRadius: 1, tipo di carattere: fontFamily: 'Arial', fontWeight: 'bold', fontDimensione: 14 ); win.add (loginBtn);
Vai avanti e compilazione e la tua interfaccia dovrebbe assomigliare a questo. Non saranno ancora disponibili funzionalità, ma sarete in grado di digitare.
Dobbiamo creare un listener di eventi click, ma prima di andare a controllare se l'utente esiste nel database, vogliamo fare un controllo degli errori sui campi. Creeremo anche un client HTTP tramite la funzione createHTTPClient ().
var loginReq = Titanium.Network.createHTTPClient (); loginBtn.addEventListener ('click', function (e) if (username.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php "); var params = nome utente: nomeutente.valore, password: Ti.Utils.md5HexDigest (password.value); loginReq.send (params); else avviso (" Nome utente / password sono obbligatori "); ); Per spiegare quanto sopra, per prima cosa controlliamo se uno dei campi è vuoto. Se lo sono, quindi presentiamo un avviso che dice che sono obbligatori. Se entrambi hanno dei valori, vogliamo aprire il nostro file PHP (lo creeremo in seguito) e inviarvi alcuni valori. Si noti che sto eseguendo la crittografia MD5 sul valore della password.
Questo file sarà il file PHP a cui la nostra app parla quando si preme il pulsante di accesso. Il nome deve riflettere il nome nel nostro metodo loginReq.open () nel passaggio precedente. Ho chiamato il mio post_auth.php. Sostituisci le mie impostazioni mysql_connect e mysql_select_db con le tue impostazioni di connessione.
0) $ row = mysql_fetch_array ($ query); $ response = array ('logged' => true, 'name' => $ row ['name'], 'email' => $ row ['email']); echo json_encode ($ response); else // Altrimenti il nome utente e / o la password non erano validi! Crea un array, json_encode e echo it $ response = array ('logged' => false, 'message' => 'Username e / o Password non validi'); echo json_encode ($ response); ?> Ok, torna a login.js. Facciamo un po 'di gestione dei dati per quando il nostro PHP restituisce qualcosa. Inserisci questo codice sotto var loginReq e sopra il nostro evento click.
loginReq.onload = function () var json = this.responseText; var response = JSON.parse (json); if (response.logged == true) alert ("Welcome" + response.name + ". La tua email è:" + response.email); else alert (response.message); ; JSON.parse () è parte dell'API Titanium. Analizza la stringa json_encode () che abbiamo creato nel nostro file PHP. Lascialo ora. Inserisci il tuo nome utente o password. A seconda che tu lo inserisca correttamente o meno, visualizzerai il messaggio di benvenuto o vedrai il messaggio di username / password non valido. Prova entrambi!
Se ricevi un errore nella console di Titanium in merito alla impossibilità di analizzare la stringa JSON, significa che non riesci a connetterti al database o a selezionare il database. Prova a navigare direttamente nel tuo file post_auth.php nel tuo browser e vedi qual è l'errore. Vorrei navigare al mio tramite questo URL http: // localhost: 8888 / post_auth.php
Nella parte 1 di questa serie, abbiamo creato il database e aggiunto un utente. Abbiamo quindi creato la nostra interfaccia di accesso creando un gruppo di schede, una scheda e una finestra. Abbiamo quindi dato il nostro pulsante di accesso alcune azioni. Il nostro file PHP ha interrogato il nostro database e, dopo aver effettuato il login, ci ha restituito il nostro nome e la nostra email. Se l'accesso non è riuscito, abbiamo restituito una stringa indicando semplicemente nome utente e / o password non validi. Spero che questo tutorial ti sia piaciuto e che non sia stato troppo difficile da seguire considerando che abbiamo utilizzato 3 diverse tecnologie: PHP, MySQL e Titanium (Javascript)! Restate sintonizzati per la parte 2 di questa serie in cui creeremo una nuova scheda che consente agli utenti di creare un account.
