Autentificación

Muchas de nuestras aplicaciones moviles necesitaran autentificar a un usuario, por eso el hecho de crear esta publicación. Despúes de pensar un tiempo esta es una posible solución a este problema esto resulto.


De inicio utilice Titanium.App.Properties el cual es un modulo para almacenar datos persistentes en la aplicación los cuales tienen un nombre y un valor. Se pueden guardar valores enteros, booleanos, cadenas, decimales y listas.

Y para el manejo de eventos e intercambio de datos entre contextos ocupe Titanium.App.fireEvent, con este modulo se crean eventos personalizados donde se puede intercambiar datos para diferentes contextos entre ventanas, funciones.

Antes que nada borremos todo lo contenido archivo app.js, y lo que se hace primero es verificar si existe la propiedad autentificación, como la primera vez que se utilice la aplicación esta propiedad no va existir entonces se crea con un valor false, lo cual significa que el usuario no esta autentificado.

if(!Titanium.App.Properties.hasProperty('autentificacion')) {
	Titanium.App.Properties.setBool('autentificacion', false);
}

Ya que existe se crean dos ventanas una para el inicio de sesion y la otra lo relacionado a la aplicacion.

var autentificacion = Ti.UI.createWindow({url:'/ui/autentificacion.js'});
var aplicacion = Ti.UI.createWindow({url:'/ui/aplicacion.js'});

Ahora se va a evaluar el valor de la propiedad ‘autentificacion’, si este es falso entonces el usuario se tiene que autentificar por lo tanto se abre la ventana de inicio de sesion, en caso se abrira la ventana inicial de la aplicacion.

if(Titanium.App.Properties.getBool('autentificacion')) {
	aplicacion.open();
   }else{
	autentificacion.open();
   };

Por el momento nuestro archivo apps.js se quedara con este codigo. Ahora nos falta crear una carpeta que se llame ui dentro de la carpeta Resources, dentro de ella crear un archivo llamado autentificacion.js el cual contendra:

var autentificacion = Titanium.UI.currentWindow;  
 autentificacion.backgroundColor='#fff';

//campo de texto correo
var correo = Titanium.UI.createTextField({  
    color:'#336699',  
    top:200,  
    left:60,  
    width:200,  
    height:40,  
    hintText:'Correo',    
});  
autentificacion.add(correo);  

//campo de texto para contraseña
var contraseña = Titanium.UI.createTextField({  
    color:'#336699',  
    top:245,  
    left:60,  
    width:200,  
    height:40,  
    hintText:'Contraseña',  
    passwordMask:true,    
});  
autentificacion.add(contraseña);  

//boton para validar usuario
var autentificacionBtn = Titanium.UI.createButton({  
    title:'Iniciar Sesion',  
    top:300,  
    width:150,  
    height:35,
    left:85,  
    borderRadius:1,  
    font:{fontFamily:'Arial',fontSize:14}  
});  
autentificacion.add(autentificacionBtn);

autentificacionBtn.addEventListener('click', function(e){
	if(correo.value!='' && contraseña.value!=''){
		if(correo.value=='admin'&&contraseña.value=='admin'){
			Titanium.App.Properties.setBool('autentificacion', true);
			Ti.App.fireEvent('autentificacion');
		}else{
			alert('Usuario invalido');
		}
	}else{
		alert('Correo Y Constraseña son necesarios');
	}    
});

La magia del codigo anterior es que cuando se seleccione el boton con la leyenda ‘Iniciar Sesion’ se verificara que los campos de texto no esten vacios, y para poder accesar a la aplicacion el correo y la contraseña tienen que tener el valor de ‘admin‘, por momento esta sera nuestra validacion para poder accesar a la aplicacion, en otra publicacion hablare de una autentificacion con un servidor utilizando PHP.

Al autentificarnos el valor de la propiedad ‘autentificacion’ se vuelve true, y se activa el evento ‘autentificacion’.

El ‘evento’ ‘autentificacion’ tendra un controlador en apps.js que al activarse cerrara la ventana de autentificacion y abrira la ventana aplicacion.

Ti.App.addEventListener('autentificacion', function(e) {
	aplicacion.open();
	autentificacion.close();

});

Lo que falta es crear el archivo aplicacion.js en la carpeta ui. La cual contendra la referencia a una ventana y en ella una etiqueta. Ademas he creado un menu para Android para poder desautentificarse, salir de la aplicacion.

var aplicacion = Ti.UI.currentWindow;
aplicacion.backgroundColor = '#fff';

var hola = Ti.UI.createLabel({
	text : 'Aplicacion'
});

aplicacion.add(hola);

//Para hacer una desautentifiacion se crea un menu
//que solo es posible en android
if(Titanium.Platform.osname == 'android') {
	//Se hace referencia a la activity
	var activity = Ti.Android.currentActivity;

	//Se crea el menu y se agrega la opcion de 
	//salir, desautentificacion
	activity.onCreateOptionsMenu = function(e) {
		var menu = e.menu;

		var desautentificacion = menu.add({
			title : "Salir"
		});

		//cuando se selecciona 'salir' se cambia el valor de
		//autenficacion a falso, y se activa el evento desautenticacion
		//para que se abra la ventana de autentificacion
		desautentificacion.addEventListener("click", function(e) {
			Titanium.App.Properties.setBool('autentificacion', false);
			Ti.App.fireEvent('desautentificacion');
		});
	}
}

Lo ultimo por hacer para que funcione la app es agregar el controlador para cuando se desautentifique el usuario agregando las ultimas lineas en apps.js

Ti.App.addEventListener('autentificacion', function(e) {
	aplicacion.open();
	autentificacion.close();

});

El codigo final se encuentra en mi github. Espero no haberlos revuelto, si tienen dudas no se queden con ellas y pregunten, igual cualquier comentario es bueno.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: