Titlul de autentificare a utilizatorilor Partea 1

Bine ați venit la partea 1 din 3 din seria mea despre autentificarea utilizatorilor cu Titanium. Titanium este un compilator încrucișat cu sursă deschisă, care vă permite să scrieți aplicații iPhone și Android (în curând să fie și!) Folosind Javascript. Nu este necesar obiectivul C! Vom folosi PHP ca limbă de server în acest tutorial și baza de date va fi MySQL.

Pasul 1: Creați tabelul de utilizatori și introduceți un rând

Efectuați o nouă bază de date sau utilizați o bază de date nouă, apoi deschideți-o. Pentru a economisi timp în acest pas, am inclus codul de mai jos pentru a crea tabelul pentru tine. Am numit-o pur și simplu "utilizatori". După crearea tabelului, adăugați un rând nou. Am ales "rondog" drept numele meu de utilizator, "1234" ca parola, numele meu real și e-mailul meu. NU VĂ RUGĂM să rulați funcția MD5 în câmpul de parolă atunci când inserați. Dacă MySQL GUI nu oferă posibilitatea de a rula funcția MD5, utilizați acest generator md5 și copiați / inserați șirul de 32 de caractere în câmpul de parolă. De asemenea, nu trebuie să umpleți câmpul "id", deoarece este un câmp de creștere automată.

 CREATE TABLE "utilizatori" ('id' int (11) NOT NULL AUTO_INCREMENT, 'username' varchar (255) NOT NULL, 'parola' varchar (32) NOT NULL, varchar (255) NOT NULL, KEY PRIMARY ('id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

Notă: Această instrucțiune SQL a fost exportată din phpMyAdmin. Dacă primiți erori la copierea / lipirea acestei instrucțiuni SQL, trebuie să creați manual tabelele și câmpurile utilizând setările de mai sus.

Pasul 2: Creați un nou proiect Titanium

Deschideți titan și creați un nou proiect. Numele pe care îl alegeți nu contează pentru acest tutorial. Odată ce proiectul este creat, navigați la fișierul Resurse / app.js. Sunt multe lucruri în el, de care nu avem nevoie. Continuați și eliminați totul, cu excepția liniei de culoare de fundal din partea de sus.

Acum trebuie să creăm 3 lucruri:

un grup tab
o filă
și o fereastră

Apoi vom adăuga fereastra la fila și fila în grup și apoi o vom deschide.

 // aceasta stabileste culoarea de fundal a vederii UIView (atunci cand nu exista ferestre / grupuri de taburi pe aceasta) Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'Demo de autentificare utilizator', tabBarHidden: true, url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fereastră: login); tabGroup.addTab (loginTab); tabGroup.open ();

Ok, așa că am făcut fereastra, fila și grupul de file.

Notă: Înainte de a compila, observați proprietatea URL din fereastră. În directorul Resurse, creați un folder nou numit 'main_windows' și un nou fișier JS numit login.js. Proprietatea URL indică compilatorului să utilizeze login.js ca fereastră. Dacă ignorați această parte, Titanium va arunca o eroare roșie urâtă în emulator.

După o compilare reușită, ecranul dvs. ar trebui să arate astfel:

Pasul 3: Crearea interfeței de conectare

Deschideți login.js după ce l-ați creat. Vom adăuga 2 câmpuri de text și un buton.

 var win = Titanium.UI.currentWindow; var username = Titanium.UI.createTextField (color: '# 336699', top: 10, stanga: 10, lățimea: 300, înălțimea: 40, hintText: 'Username', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (nume de utilizator); var parola = Titanium.UI.createTextField (color: '# 336699', top: 60, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Password', passwordMask: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (parola); var loginBtn = Titanium.UI.createButton (title: 'Login', top: 110, lățime: 90, înălțime: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14 ); win.add (loginBtn);

Mergeți și compilați, iar interfața dvs. ar trebui să arate așa. Încă nu va mai funcționa, dar veți putea să tastați.

Pasul 4: Faceți butonul de conectare Faceți ceva

Trebuie să creăm un ascultător pentru evenimentul de clic, dar înainte de a merge și de a verifica dacă utilizatorul există în baza de date, dorim să facem o verificare a erorilor pe câmpuri. De asemenea, vom crea un client HTTP prin funcția createHTTPClient ().

 var loginReq = Titaniu.Network.createHTTPClient (); loginBtn.addEventListener ("faceți clic pe", funcția (e) if (username.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php " paramuri = username: username.value, password: Ti.Utils.md5HexDigest (password.value); loginReq.send (params); else alert (" );

Pentru a explica cele de mai sus, verificăm mai întâi dacă unul dintre câmpuri este gol. Dacă sunt, atunci vom prezenta o alertă spunând că sunt necesare. Dacă ambele au valori, vrem să ne deschidem fișierul PHP (vom crea acest lucru în continuare) și să îi trimitem câteva valori. Observați că execut criptare MD5 pe valoarea parolei.

Pasul 5: Crearea fișierului nostru de autentificare PHP

Acest fișier va fi fișierul PHP la care vorbește aplicația atunci când apasă butonul de conectare. Numele trebuie să reflecte numele în metoda noastră de conectareReq.open () din pasul anterior. Am denumit postul meu post_auth.php. Înlocuiți setările mele mysql_connect și mysql_select_db cu setările de conectare.

  0) $ row = mysql_fetch_array ($ interogare); $ answer = array ('logged' => true, 'name' => $ row ['nume'], 'email' => $ row ['email']); echo json_encode ($ răspuns);  altfel // Altfel numele de utilizator și / sau parola nu au fost valabile! Creați o matrice, json_encodați-o și răsfoiți-o $ response = array ('logged' => false, 'message' => 'Nume de utilizator și / sau parolă nevalide'); echo json_encode ($ răspuns); ?>

Pasul 6: Primirea datelor în Login.js

Înapoi la login.js. Să facem niște prelucrări de date când PHP ne întoarce ceva. Plasați acest cod sub var loginReq și deasupra evenimentului nostru de clic.

 loginReq.onload = funcția () var json = aceasta.responseText; var răspuns = JSON.parse (json); dacă (answer.logged == true) alert ("Bun venit" + răspuns.name + ". E-mailul dvs. este:" + reply.email);  altceva alert (reply.message); ;

JSON.parse () face parte din API Titanium. Acesta analizează șirul json_encode () pe care l-am creat în fișierul nostru PHP. Să o lansăm acum. Introduceți numele de utilizator sau parola. În funcție de faptul că o introduceți corect sau nu, veți vedea mesajul de întâmpinare sau veți vedea mesajul nevalid de utilizator / parolă. Încercați ambele!

Dacă primiți o eroare în consola Titanium despre imposibilitatea de a analiza șirul JSON, înseamnă că nu reușiți să vă conectați la baza de date sau să selectați baza de date. Încercați să navigați direct în fișierul post_auth.php în browser și să vedeți ce este eroarea. Aș căuta pe mine prin intermediul acestui URL http: // localhost: 8888 / post_auth.php

Concluzie

În partea 1 a acestei serii, am creat baza de date și am adăugat un utilizator. Apoi, am făcut interfața de conectare creând un grup tab, o filă și o fereastră. Apoi am dat butonul de conectare câteva acțiuni. Fișierul nostru PHP ne-a întrebat baza de date și, după ce ne-am conectat cu succes, ne-a returnat numele și adresa de e-mail. Dacă nu sa reușit conectarea, am returnat un șir pur și simplu afirmând numele de utilizator și / sau parola nevalide. Sper că v-ați bucurat de acest tutorial și că nu a fost prea greu să urmați dacă am folosit 3 tehnologii diferite: PHP, MySQL și Titanium (Javascript)! Rămâneți acordat pentru partea a 2-a din această serie în care vom face o nouă filă care să permită utilizatorilor dvs. să creeze un cont.

Cod