Share
Willkommen zu Teil 1 von 3 in meiner kleinen Serie zur Authentifizierung von Benutzern mit Titanium. Titan ist ein Open-Source-Cross-Compiler, mit dem Sie mit Javascript iPhone- und Android-Anwendungen (bald auch Blackberry!) Schreiben können. Kein Objective-C erforderlich! In diesem Lernprogramm verwenden wir PHP als serverseitige Sprache. Meine Datenbank wird MySQL sein.
Erstellen Sie eine neue Datenbank oder verwenden Sie eine vorhandene, und öffnen Sie sie. Um Zeit für diesen Schritt zu sparen, habe ich den folgenden SQL-Code hinzugefügt, um die Tabelle für Sie zu erstellen. Ich habe es einfach "Benutzer" genannt. Fügen Sie nach dem Erstellen der Tabelle eine neue Zeile hinzu. Ich habe "rondog" als meinen Benutzernamen, "1234" als Passwort, meinen richtigen Namen und meine E-Mail-Adresse ausgewählt. VERGESSEN SIE NICHT, beim Einfügen die MD5-Funktion im Kennwortfeld auszuführen. Wenn Ihre MySQL-GUI nicht die Möglichkeit bietet, die MD5-Funktion auszuführen, verwenden Sie diesen MD5-Generator und kopieren / fügen Sie die 32-stellige Zeichenfolge in das Kennwortfeld ein. Es ist auch nicht erforderlich, das 'id' -Feld auszufüllen, da es sich um ein automatisch inkrementierendes Feld handelt.
Accentsconagua
CREATE TABLE 'Benutzer' ('id' int (11) NOT NULL AUTO_INCREMENT, 'Benutzername' Varchar (255) NOT NULL, 'Passwort' Varchar (32) NOT NULL, 'Name' Varchar (255) NOT NULL, 'E-Mail' varchar (255) NOT NULL, PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
Anmerkung: Diese SQL-Anweisung wurde aus phpMyAdmin exportiert. Wenn Sie beim Kopieren / Einfügen dieser SQL-Anweisung Fehler erhalten, müssen Sie die Tabelle und Felder mithilfe der obigen Einstellungen manuell erstellen.
Öffnen Sie Titan und erstellen Sie ein neues Projekt. Der von Ihnen gewählte Name spielt für dieses Tutorial keine Rolle. Wechseln Sie nach der Erstellung des Projekts zur Datei Resources / app.js. Es ist schon eine Menge Sachen drin, die wir nicht brauchen. Fahren Sie fort und entfernen Sie alles außer der Hintergrundfarblinie oben.
Jetzt müssen wir 3 Dinge schaffen:
Wir fügen dann das Fenster zur Registerkarte und die Registerkarte zur Gruppe hinzu und öffnen es.
// Dies legt die Hintergrundfarbe der Master-UIView fest (wenn keine Fenster- / Tab-Gruppen vorhanden sind) Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'Demo zur Benutzerauthentifizierung', tabBarHidden: true, url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", Fenster: login); tabGroup.addTab (loginTab); tabGroup.open (); Ok, also haben wir unsere Fenster-, Tab- und Tab-Gruppe erstellt.
Hinweis: Beachten Sie vor dem Kompilieren die URL-Eigenschaft im Fenster. Erstellen Sie im Ressourcenordner einen neuen Ordner mit dem Namen 'main_windows' und eine neue JS-Datei mit dem Namen login.js. Die URL-Eigenschaft weist den Compiler an, login.js als unser Fenster zu verwenden. Wenn Sie diesen Teil überspringen, wirft Titanium einen hässlichen roten Fehler im Emulator ab.
Nach erfolgreichem Kompilieren sollte Ihr Bildschirm folgendermaßen aussehen:
Öffnen Sie login.js, nachdem Sie es erstellt haben. Wir werden 2 Textfelder und eine Schaltfläche hinzufügen.
var win = Titanium.UI.currentWindow; var username = Titanium.UI.createTextField (Farbe: '# 336699', oben: 10, links: 10, Breite: 300, Höhe: 40, Hinweistext: 'Benutzername', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (Benutzername); var password = Titanium.UI.createTextField (Farbe: '# 336699', oben: 60, links: 10, Breite: 300, Höhe: 40, HinweisText: 'Passwort', Kennwortmaske: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (Passwort); var loginBtn = Titanium.UI.createButton (title: 'Login', oben: 110, Breite: 90, Höhe: 35, borderRadius: 1, Schriftart: fontFamily: 'Arial', fontWeight: 'fett', fontSize: 14 ); win.add (loginBtn);
Fahren Sie fort und kompilieren Sie, und Ihre Benutzeroberfläche sollte so aussehen. Es wird noch keine Funktionalität geben, aber Sie können tippen.
Wir müssen einen Klickereignis-Listener erstellen. Bevor wir jedoch überprüfen, ob der Benutzer in der Datenbank vorhanden ist, möchten wir eine Fehlerprüfung in den Feldern durchführen. Wir erstellen auch einen HTTP-Client über die Funktion createHTTPClient ().
var loginReq = Titanium.Network.createHTTPClient (); loginBtn.addEventListener ('click', Funktion (e) if (username.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php "); var params = Benutzername: Benutzername.Wert, Kennwort: Ti.Utils.md5HexDigest (Kennwort.Wert); loginReq.send (Parameter); else alert (" Benutzername / Kennwort sind erforderlich "); ); Um dies zu erläutern, prüfen wir zunächst, ob eines der Felder leer ist. Wenn dies der Fall ist, wird eine Warnung angezeigt, dass sie erforderlich sind. Wenn beide Werte haben, möchten wir unsere PHP-Datei öffnen (wir erstellen diese als Nächstes) und senden einige Werte an sie. Hinweis Ich verwende MD5-Verschlüsselung für den Kennwortwert.
Diese Datei ist die PHP-Datei, mit der unsere App spricht, wenn Sie auf die Login-Schaltfläche klicken. Der Name muss den Namen in unserer loginReq.open () -Methode im vorherigen Schritt enthalten. Ich habe meine post_auth.php genannt. Ersetzen Sie meine Einstellungen für mysql_connect und mysql_select_db durch Ihre Verbindungseinstellungen.
0) $ row = mysql_fetch_array ($ query); $ response = array ('eingeloggt' => wahr, 'name' => $ row ['name'], 'email' => $ row ['email']); echo json_encode ($ response); else // Sonst war der Benutzername und / oder das Passwort ungültig! Erstellen Sie ein Array, json_encode und geben Sie es aus. $ Response = array ('log' => false, 'message' => 'Ungültiger Benutzername und / oder Passwort'); echo json_encode ($ response); ?> Okay, zurück zu login.js. Lassen Sie uns einige Daten behandeln, wenn unser PHP etwas zurückgibt. Platzieren Sie diesen Code unter var loginReq und über unserem Click-Event.
loginReq.onload = function () var json = this.responseText; var Antwort = JSON.parse (json); if (response.logged == true) alert ("Welcome" + response.name + ". Ihre E-Mail-Adresse lautet:" + response.email "); else alert (Antwortnachricht); ; JSON.parse () ist Teil der Titanium API. Es analysiert den String json_encode (), den wir in unserer PHP-Datei erstellt haben. Lass es uns jetzt starten. Geben Sie Ihren Benutzernamen oder Ihr Passwort ein. Je nachdem, ob Sie sie richtig eingeben oder nicht, sehen Sie entweder die Begrüßungsnachricht oder die ungültige Mitteilung über den Benutzernamen und das Kennwort. Probiere beides!
Wenn in der Titanium-Konsole eine Fehlermeldung angezeigt wird, dass die JSON-Zeichenfolge nicht analysiert werden kann, bedeutet dies, dass Sie keine Verbindung zur Datenbank herstellen oder die Datenbank auswählen können. Versuchen Sie, direkt zu Ihrer post_auth.php-Datei in Ihrem Browser zu navigieren, und sehen Sie, was der Fehler ist. Ich würde meine über diese URL http: // localhost: 8888 / post_auth.php durchsuchen
In Teil 1 dieser Serie haben wir die Datenbank erstellt und einen Benutzer hinzugefügt. Wir haben dann unsere Anmeldeschnittstelle erstellt, indem wir eine Registerkartengruppe, eine Registerkarte und ein Fenster erstellt haben. Wir haben dann unserem Login-Button einige Aktionen gegeben. Unsere PHP-Datei hat unsere Datenbank abgefragt und bei erfolgreichem Login den Namen und die E-Mail-Adresse zurückgegeben. Wenn die Anmeldung fehlgeschlagen ist, haben wir eine Zeichenfolge mit der Angabe eines ungültigen Benutzernamens und / oder Kennworts zurückgegeben. Ich hoffe, dass Ihnen dieses Tutorial gefallen hat und dass es nicht allzu schwer zu folgen war, da wir 3 verschiedene Technologien verwendet haben: PHP, MySQL und Titanium (Javascript)! Bleiben Sie dran für Teil 2 dieser Serie, wo wir eine neue Registerkarte erstellen, auf der Ihre Benutzer ein Konto erstellen können.
