Share
Bienvenue dans la partie 1 de 3 de ma petite série sur l'authentification des utilisateurs avec Titanium. Titanium est un compilateur croisé open source qui vous permet d'écrire des applications pour iPhone et Android (bientôt sur le BlackBerry!) En utilisant Javascript. Aucun objectif-C requis! Nous allons utiliser PHP comme langue côté serveur dans ce tutoriel et ma base de données sera MySQL.
Créez une nouvelle base de données ou utilisez-en une existante, puis ouvrez-la. Pour gagner du temps sur cette étape, j'ai inclus le code SQL ci-dessous afin de créer la table pour vous. Je l'ai appelé simplement "utilisateurs". Une fois la table créée, ajoutez une nouvelle ligne. J'ai choisi 'rondog' comme nom d'utilisateur, '1234' comme mot de passe, mon vrai nom et mon email. N'OUBLIEZ PAS d'exécuter la fonction MD5 sur le champ du mot de passe lors de l'insertion. Si votre interface graphique MySQL n'offre pas la possibilité d'exécuter la fonction MD5, utilisez ce générateur md5 et copiez / collez la chaîne de 32 caractères dans le champ mot de passe. De plus, pas besoin de remplir le champ 'id' car il s'agit d'un champ auto-incrémenté.
Accentsconagua
CREATE TABLE 'users' ('id' int (11) NON NUL AUTO_INCREMENT, 'nom d'utilisateur' varchar (255) NON NULL, 'mot de passe' varchar (32) NON NULL, 'nom' varchar (255) NON NULL, 'email' varchar (255) NOT NULL, PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
Remarque: cette instruction SQL a été exportée à partir de phpMyAdmin. Si vous rencontrez des erreurs lors du copier / coller de cette instruction SQL, vous devez créer manuellement la table et les champs en utilisant les paramètres ci-dessus..
Ouvrez titanium et créez un nouveau projet. Le nom que vous choisissez n'a pas d'importance pour ce tutoriel. Une fois le projet créé, accédez au fichier Resources / app.js. Il y a déjà beaucoup de choses dont nous n’avons pas besoin. Allez-y et supprimez tout sauf la ligne de couleur d'arrière-plan en haut.
Maintenant, nous devons créer 3 choses:
Nous allons ensuite ajouter la fenêtre à l'onglet et l'onglet au groupe, puis l'ouvrir..
// ceci définit la couleur d'arrière-plan de l'UIView maître (lorsqu'il n'y a pas de groupe de fenêtres / onglets dessus) Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (titre: 'Démo d'authentification d'utilisateur', tabBarHidden: true, url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fenêtre: login); tabGroup.addTab (loginTab); tabGroup.open (); Ok, nous avons donc créé notre groupe de fenêtres, onglets et onglets.
Remarque: Avant de compiler, notez la propriété URL dans la fenêtre. Dans le dossier Ressources, créez un nouveau dossier appelé "main_windows" et un nouveau fichier JS appelé login.js. La propriété URL indique au compilateur d'utiliser login.js comme fenêtre. Si vous ignorez cette partie, Titanium émettra une erreur rouge laide dans l'émulateur..
Après une compilation réussie, votre écran devrait ressembler à ceci:
Ouvrez login.js après l'avoir créé. Nous allons ajouter 2 champs de texte et un bouton.
var win = Titanium.UI.currentWindow; var nom d'utilisateur = Titanium.UI.createTextField (color: '# 336699', haut: 10, gauche: 10, width: 300, hauteur: 40, hintText: 'Username', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (nom d'utilisateur); var password = Titanium.UI.createTextField (color: '# 336699', haut: 60, left: 10, width: 300, height: 40, hintText: 'Password', passwordMask: true, type de clavier: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (mot de passe); var loginBtn = Titanium.UI.createButton (title: 'Login', haut: 110, largeur: 90, hauteur: 35, borderRadius: 1, fonte: fontFamily: 'Arial', fonteChaussée: 'bold', taille de la fonte: 14 ); win.add (loginBtn);
Allez-y et compilez et votre interface devrait ressembler à ceci. Leur sera pas encore de fonctionnalité, mais vous serez en mesure de taper.
Nous devons créer un écouteur d’événements click, mais avant de vérifier si l’utilisateur existe dans la base de données, nous souhaitons effectuer une vérification des erreurs dans les champs. Nous allons également créer un client HTTP via la fonction createHTTPClient ().
var loginReq = Titanium.Network.createHTTPClient (); loginBtn.addEventListener ('click', fonction (e) if (username.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php "); var params = username: username.value, password: Ti.Utils.md5HexDigest (password.value); loginReq.send (params); else alert (" Les nom d'utilisateur / mot de passe sont obligatoires "); ) Pour expliquer ce qui précède, nous vérifions d’abord si l’un des champs est vide. S'ils le sont, nous présentons une alerte indiquant qu'ils sont obligatoires. S'ils ont tous les deux des valeurs, nous voulons ouvrir notre fichier PHP (nous allons créer ce prochain) et lui envoyer quelques valeurs. Remarquez que j'utilise le cryptage MD5 sur la valeur du mot de passe.
Ce fichier sera le fichier PHP auquel notre application s'adresse lorsque vous appuyez sur le bouton de connexion. Le nom doit refléter le nom de notre méthode loginReq.open () à l'étape précédente. J'ai nommé le mien post_auth.php. Remplacer mes paramètres mysql_connect et mysql_select_db par vos paramètres de connexion.
0) $ row = mysql_fetch_array ($ query); $ response = array ('logs' => true, 'name' => $ row ['name'], 'email' => $ row ['email']); echo json_encode ($ response); else // Sinon, le nom d'utilisateur et / ou le mot de passe n'était pas valide! Créez un tableau, json_encode et echo-le $ response = array ('logs' => false, 'message' => 'Nom d'utilisateur et / ou mot de passe invalide'); echo json_encode ($ response); ?> Bon retour à login.js. Faisons quelques manipulations de données pour quand notre PHP retourne quelque chose. Placez ce code sous var loginReq et au-dessus de notre événement click.
loginReq.onload = function () var json = this.responseText; var réponse = JSON.parse (json); if (response.logged == true) alert ("Bienvenue" + response.name + ". Votre email est:" + response.email); else alert (response.message); ; JSON.parse () fait partie de l'API Titanium. Il analyse la chaîne json_encode () que nous avons créée dans notre fichier PHP. Lançons-le maintenant. Entrez votre nom d'utilisateur ou mot de passe. Selon que vous l'ayez entré correctement ou non, le message de bienvenue s'affiche ou le message de nom d'utilisateur / mot de passe invalide. Essayez les deux!
Si vous obtenez une erreur dans la console Titanium à propos de l'impossibilité d'analyser la chaîne JSON, cela signifie que vous ne parvenez pas à vous connecter à la base de données ou à sélectionner la base de données. Essayez de naviguer directement dans votre fichier post_auth.php dans votre navigateur et découvrez l’erreur. Je naviguerais jusqu'au mien via cette URL http: // localhost: 8888 / post_auth.php
Dans la partie 1 de cette série, nous avons créé la base de données et ajouté un utilisateur. Nous avons ensuite créé notre interface de connexion en créant un groupe d’onglets, un onglet et une fenêtre. Nous avons ensuite donné quelques actions à notre bouton de connexion. Notre fichier PHP interrogé notre base de données et sur une connexion réussie, il a renvoyé notre nom et email. Si la connexion échouait, nous renvoyions une chaîne indiquant simplement un nom d'utilisateur et / ou un mot de passe non valide. J'espère que vous avez apprécié ce tutoriel et qu'il n'a pas été trop difficile à suivre, car nous avons utilisé 3 technologies différentes: PHP, MySQL et Titanium (Javascript)! Restez à l'écoute pour la partie 2 de cette série où nous allons créer un nouvel onglet permettant à vos utilisateurs de créer un compte..
