Autenticación de usuario de titanio Parte 1

Bienvenido a la parte 1 de 3 en mi pequeña serie sobre la autenticación de usuarios con Titanium. Titanium es un compilador cruzado de código abierto que te permite escribir aplicaciones para iPhone y Android (¡pronto también para Blackberry!) Usando Javascript. No se requiere Objective-C! Usaremos PHP como el idioma del lado del servidor en este tutorial y mi base de datos será MySQL.

Paso 1: crear la tabla de usuarios e insertar una fila

Cree una nueva base de datos o use una existente, luego ábrala. Para ahorrar tiempo en este paso, he incluido el siguiente código SQL para crear la tabla por usted. Lo he llamado simplemente 'usuarios'. Después de crear la tabla, agregue una nueva fila. He elegido 'rondog' como mi nombre de usuario, '1234' como mi contraseña, mi nombre real y mi correo electrónico. NO OLVIDE ejecutar la función MD5 en el campo de contraseña al insertar. Si su GUI de MySQL no ofrece la posibilidad de ejecutar la función MD5, use este generador md5 y copie / pegue la cadena de 32 caracteres en el campo de la contraseña. Tampoco es necesario rellenar el campo 'id', ya que es un campo de incremento automático.

 CREAR TABLA 'usuarios' ('id' int (11) NOT NULL AUTO_INCREMENT, 'username' varchar (255) NOT NULL, 'contraseña' varchar (32) NOT NULL, 'nombre' varchar (255) NOT NULL, 'email' varchar (255) NO NULA, TECLA PRINCIPAL ('id')) MOTOR = CARTA INMEDIATA DE MyISAM = latin1 AUTO_INCREMENT = 1;

Nota: Esta declaración SQL fue exportada desde phpMyAdmin. Si obtiene errores al copiar / pegar esta declaración SQL, debe crear manualmente la tabla y los campos utilizando la configuración anterior.

Paso 2: Crea un nuevo proyecto de titanio

Abre titanio y crea un nuevo proyecto. El nombre que elijas no importa para este tutorial. Una vez creado el proyecto, busque el archivo Resources / app.js. Hay un montón de cosas en él que ya no necesitamos. Continúa y elimina todo excepto la línea de color de fondo en la parte superior.

Ahora necesitamos crear 3 cosas:

un grupo de pestañas
una pestaña
y una ventana

Luego agregaremos la ventana a la pestaña y la pestaña al grupo y luego la abriremos.

 // esto establece el color de fondo del UIView maestro (cuando no hay ventanas / grupos de pestañas en él) Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'Demo de autenticación de usuario', tabBarHidden: true, url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", window: login); tabGroup.addTab (loginTab); tabGroup.open ();

Ok, entonces hemos hecho nuestro grupo de ventanas, pestañas y pestañas..

Nota: antes de compilar, observe la propiedad URL en la ventana. En la carpeta Recursos, cree una nueva carpeta llamada 'main_windows' y un nuevo archivo JS llamado login.js. La propiedad de la URL le dice al compilador que use login.js como nuestra ventana. Si omites esta parte, Titanium lanzará un error rojo feo en el emulador..

Después de una compilación exitosa, su pantalla debería verse así:

Paso 3: Crear la interfaz de inicio de sesión

Abre login.js después de haberlo creado. Añadiremos 2 campos de texto y un botón..

 var win = Titanium.UI.currentWindow; var username = Titanium.UI.createTextField (color: '# 336699', top: 10, izquierda: 10, ancho: 300, altura: 40, hintText: 'Nombre de usuario', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (nombre de usuario); var contraseña = Titanium.UI.createTextField (color: '# 336699', superior: 60, izquierda: 10, ancho: 300, altura: 40, texto de sugerencia: 'Contraseña', contraseñaMáscara: verdadera, tecladoTipo: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); win.add (contraseña); var loginBtn = Titanium.UI.createButton (title: 'Login', top: 110, width: 90, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14 ); win.add (loginBtn);

Continúa y compila y tu interfaz debería tener este aspecto. Aún no habrá funcionalidad, pero podrás escribir.

Paso 4: Haz que el botón de inicio de sesión haga algo

Necesitamos crear un detector de eventos de clic, pero antes de ir y verificar si el usuario existe en la base de datos, queremos hacer algún error en la verificación de los campos. También crearemos un cliente HTTP a través de la función 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 = username: username.value, password: Ti.Utils.md5HexDigest (password.value); loginReq.send (params); else alert (" Se requieren nombre de usuario / contraseña "); );

Para explicar lo anterior, primero verificamos si alguno de los campos está vacío. Si lo son, entonces presentamos una alerta diciendo que son necesarios. Si ambos tienen valores, queremos abrir nuestro archivo PHP (lo crearemos a continuación) y enviarle algunos valores. Observe que estoy ejecutando el cifrado MD5 en el valor de la contraseña.

Paso 5: Crear nuestro archivo PHP de autenticación

Este archivo será el archivo PHP al que nuestra aplicación habla cuando se pulsa el botón de inicio de sesión. El nombre debe reflejar el nombre en nuestro método loginReq.open () en el paso anterior. He nombrado el mío post_auth.php. Reemplace mis configuraciones mysql_connect y mysql_select_db con sus configuraciones de conexión.

  0) $ row = mysql_fetch_array ($ query); $ respuesta = matriz ('registrado' => verdadero, 'nombre' => $ fila ['nombre'], 'correo electrónico' => $ fila ['correo electrónico']); echo json_encode ($ response);  else // De lo contrario, el nombre de usuario y / o la contraseña no son válidos! Cree una matriz, json_encode y haga eco de ella $ response = array ('loged' => false, 'message' => 'Nombre de usuario y / o contraseña no válidos'); echo json_encode ($ response); ?>

Paso 6: Recibiendo datos en Login.js

Está bien volver a login.js. Hagamos un poco de manejo de datos para cuando nuestro PHP devuelva algo. Coloque este código debajo de var loginReq y encima de nuestro evento click.

 loginReq.onload = function () var json = this.responseText; respuesta var = JSON.parse (json); if (response.logged == true) alert ("Welcome" + response.name + ". Su correo electrónico es:" + response.email);  else alert (response.message); ;

JSON.parse () es parte de la API de Titanium. Analiza la cadena json_encode () que creamos en nuestro archivo PHP. Vamos a lanzarlo ahora. Ingrese su nombre de usuario o contraseña. Dependiendo de si lo ingresaste correctamente o no, verás el mensaje de bienvenida o verás un mensaje de usuario / contraseña inválido. Prueba ambos!

Si está obteniendo un error en la consola Titanium por no poder analizar la cadena JSON, eso significa que no puede conectarse a la base de datos o seleccionar la base de datos. Intente navegar directamente a su archivo post_auth.php en su navegador y vea cuál es el error. Navegaría a la mía a través de esta URL http: // localhost: 8888 / post_auth.php

Conclusión

En la parte 1 de esta serie, creamos la base de datos y agregamos un usuario. Luego creamos nuestra interfaz de inicio de sesión mediante la creación de un grupo de pestañas, una pestaña y una ventana. Entonces le dimos a nuestro botón de inicio de sesión algunas acciones. Nuestro archivo PHP consultó nuestra base de datos y, al iniciar sesión correctamente, devolvió nuestro nombre y correo electrónico. Si el inicio de sesión falló, devolvimos una cadena simplemente indicando un nombre de usuario y / o contraseña no válidos. Espero que hayas disfrutado este tutorial y que no haya sido tan difícil de seguir, ya que usamos 3 tecnologías diferentes: PHP, MySQL y Titanium (Javascript). Manténgase atento a la parte 2 de esta serie, donde crearemos una nueva pestaña que permitirá a sus usuarios crear una cuenta..

Código