Login de Usuarios Con PhoneGap y JQuery Mobile

Login de usuarios con
PhoneGap y jQuery Mobile

Por: Carlos Solis | 12/04/2013
WEB: http://revolucion.mobi/2013/04/12/login-en-servidores-externos-con-phonegap/
Pgina | 2
La autenticacin de usuarios es un proceso comn en las

aplicaciones mviles pero, aunque
los desarrolladores web estn acostumbrados a realizar rutinas
de autenticacin en un servidor , el proceso es algo distinto
en PhoneGap.
Las aplicaciones PhoneGap, a diferencia de una aplicacin web, tienen

toda su informacin almacenada en el equipo del usuario y no se pueden
conectar directamente a una base de datos externa. Esto no significa que
la informacin debe quedarse atrapada en el mvil. Tenemos
muchas tcnicas para conectar las aplicaciones a cualquier servidor e
interactuar con cualquier base de datos.
En este tutorial vamos a revisar paso a paso el proceso de validacin de
un usuario en una aplicacin PhoneGap con jQuery Mobile.
Cdigo base de la aplicacin
Pgina | 3
Vamos a arrancar con una aplicacin bsica que requiere autenticacin,

usaremos una app basada en jQuery Mobile, si nunca haz hecho
una puedes ver un tutorial ac.
El cdigo de esta aplicacin tiene dos pantallas, la primera tiene un
formulario y la segunda solo puede verse luego de validarse en un
servidor externo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validacion de usuarios</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header">
<h1>Autenticacion de Usuario</h1>
</div>
<div data-role="content">
<form id="formulario" >
<label> Usuario </label>
<input type="text" id="nombredeusuario"
name="nombredeusuario">
<label> Password </label>
<input type="password" id="clave" name="clave" >
<input type="submit" value="Login" id="botonLogin">
</form>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header">
<h1>Bienvenido</h1>
</div>
<div data-role="content">
<h2> Bienvenido a la aplicacion </h2>
Pgina | 4
<h3> Su usuario y password son vlidos</h3>
</div>
</div>
<script>
$('#formulario').submit(function() {
// recolecta los valores que inserto el usuario

var datosUsuario = $("#nombredeusuario").val()
var datosPassword = $("#clave").val()
archivoValidacion =
"http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_de_datos.p
hp?jsoncallback=?"
$.getJSON( archivoValidacion, { usuario:datosUsuario
,password:datosPassword})
.done(function(respuestaServer) {
alert(respuestaServer.mensaje + "\nGenerado en: " +
respuestaServer.hora + "\n" +respuestaServer.generador)
if(respuestaServer.validacion == "ok"){
/// si la validacion es correcta, muestra la pantalla
"home"
$.mobile.changePage("#home")
}else{
/// ejecutar una conducta cuando la validacion falla
}
})
return false;
})
</script>
</body>
</html>
Pgina | 5
Recopilando la informacin
Para recopilar la informacin del formulario vamos a usar JavaScript. El
primer paso es crear una funcin que se active cuando el
usuario presiona el boton de envio:
<script>
$(#formulario).submit(function() {return false;
})
</script>
En esta funcin agregamos la instruccin return false para controlar la

conducta regular del formulario y evitar que intente abrir otro documento.
Pgina | 6
Dentro de esta funcin que acabamos de crear, vamos a seguir

agregando cdigo, primero agregamos dos variables que recolectan
la informacin de las casillas de texto.
var datosUsuario = $(#nombredeusuario).val()
var datosPassword = $(#clave).val()
Ahora que ya tenemos disponible la informacin del usuario ,vamos a

enviarla a un archivo hospedado en un servidor externo, en este caso el
archivo validacion_de_datos.php que se encuentra hospedado en este
servidor.
archivoValidacion =
http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_d
e_datos.php?jsoncallback=?
Para enviar la informacin a este archivo usaremos el comando

de jQuery $.getJSON que ya incluye todos los settings y formato para
enviar la informacin al servidor:
$.getJSON( archivoValidacion,
{ usuario:datosUsuario ,password:datosPassword})
Como parmetros de esta funcin incluimos la variable que define la ruta

del archivo que recibe los datos (archivoValidacion) y los datos que
recopilamos del formulario.
Procesando la informacin en el servidor

Para este punto tenemos una aplicacin que puede recopilar y enviar
informacin a un servidor, el siguiente paso es crear el archivo que va a
Pgina | 7
procesar la informacin en el servidor (validacion_de_datos.php) .

Vamos a usar PHP por ser un lenguaje sencillo y popular, pero
la informacin que enva la aplicacin puede leerse en cualquier otro
lenguaje de programacin.
En este caso, para mantener el ejemplo simple vamos a definir dos
variables con el nombre de usuario y password correctos. Cuando hagas
tu aplicacin real, posiblemente estos valores vengan de una base de
datos o algn otro proceso interno del servidor.
$usuarioValido = revolucion;
$passwordValido = movil;
A partir de este punto, nuestra aplicacion de prueba, le dar acceso a

cualquiera que utilice el usuario revolucion y el password movil.
Ahora vamos a extraer la informacin enviada desde la aplicacin como
puedes ver destacado en rojo, est el nombre de las variables que se
enviaron desde la aplicacin mvil.
$usuarioEnviado = $_GET[usuario];
$passwordEnviado = $_GET[password];
La aplicacion movil tiene la capacidad de leer cualquier informacion que

envie el servidor, la complejidad de los datos depende de las
necesidades de cada aplicacion. Para demostrar que podemos enviar
datos compuestos, vamos a crear un arreglo con algunos datos extra que
enviaremos de vuelta a la aplicacion. En este caso vamos a incluir la
fecha y hora en que se realiza el proceso y el dominio en que se gener.
Pgina | 8
$resultados = array();
$resultados[hora] = time();
$resultados[generador] = generado en revolucion.mobi;
El siguiente paso es verificar que los datos enviados desde

la aplicacin coincidan con los que estn definidos en el
servidor. Segn el resultado de esta verificacin agregaremos diferentes
respuestas del servidor para que el usuario pueda saber si
la autenticacin tuvo exito o no.
if( $usuarioEnviado == $usuarioValido && $passwordEnviado ==
$passwordValido ){
$resultados[respuesta] = Validacion Correcta;
$resultados[validacion] = ok;
}else{
$resultados[respuesta] = Usuario y password incorrectos;
$resultados[validacion] = error;
}
Ya tenemos listos los resultados de la verificacin. Vamos a convertir los

datos que contiene el arreglo a formatoJSON para enviarlo de vuelta a
la aplicacin. Este formato es muy popular en
aplicaciones mviles porque es fcil de leer y ocupa menos ancho de
banda que formatos similares como XML.
$resultadosJson = json_encode($resultados);
echo $resultadosJson;
La aplicacin esta lista para recibir datos, pero aun te falta aprender un
truco extra.
Pgina | 9
Evitar restriccin de seguridad de Javascript

con JSONP
En javascript existe una restriccin de seguridad llamada la poltica del
mismo origen, que solo permite a los archivos javascript
comunicarse nicamente con archivos que se encuentran en el mismo
dominio. Tratar de leer archivos entre dominios diferentes despliega un
error de seguridad y bloquea la lectura del archivo externo.
Si bien es cierto por la forma que se ejecutan las aplicaciones
PhoneGap, esta restriccin no aplica, si tratas de emular tu app en un
browser te encontraras con un error similar a este:
Para evitar esta restriccin debemos usar el formato JSONP (JSON with
Padding) que permite acceder al contenido en servidores externos sin
generar errores en el navegador. Para usar el formato JSONP en
esta aplicacin solo tenemos que hacer dos leves cambios. El primero es
editar la variable de javascript archivoValidacion de esta forma:
archivoValidacion =
http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_d
e_datos.php?jsoncallback=?
P g i n a | 10
Observa que al final del URL se incluye ?jsoncallback=? este

texto enva una llamada de regreso o callback para que javascript pueda
leer y procesar la respuesta del servidor sin problemas.
El segundo paso es reemplazar la ultima linea de tu archivo PHP para
que se ajuste al formato correcto:
echo $_GET[jsoncallback] . ( . $resultadosJson . );';
Con estos mnimos cambios tu aplicacin no solo funcionara en

un mvil, tambin podrs probarla desde tu browser!
Recibir datos del servidor en la app

Ya casi esta lista nuestra aplicacin, solo resta programar la conducta
que tendr la aplicacin cuando reciba los datos de vuelta desde el
servidor.
Como se menciono antes, el comando $.getJSON incluye todo lo que
necesitamos para enviar y recibir datos del servidor. Vamos a agregarle
un mtodo extra llamado .done que se ejecuta nicamente cuando se
recibe una respuesta vlida desde el servidor, en este caso vamos a usar
el parmetro respuestaServer en el cual se
almacenan automticamente los datos que se reciben desde el servidor.
$.getJSON( archivoValidacion, { usuario:datosUsuario
,password:datosPassword})
.done(function(respuestaServer) {
alert(respuestaServer.mensaje + \nGenerado en:
+ respuestaServer.hora + \n +respuestaServer.generador)
if(respuestaServer.validacion == ok){
P g i n a | 11
$.mobile.changePage(#home)
}
})
Como se puede ver para acceder uno de los elementos que estaban en
el arreglo del archivo PHP, solo se invocan dentro de la variable
respuestaServer.
Para terminar con el proceso de autenticacion, si la respuesta de la
validacion es correcta, el comando $.mobile.changePage cambia de
pagina y nos lleva a la pantalla de bienvenida porque presentamos las
credenciales correctas.
Puedes ver el cdigo completo ac
Conclusin
En esta aplicacin de prueba hemos logrado enviar y
recibir informacin dinmica a un servidor, con algo de cdigo extra en el
servidor puedes conectar tu app con cualquier base de datos o
webservice externo.
Tambin usamos el formato JSONP para ignorar restricciones del
navegador y emular sin problemas nuestras aplicaciones en el browser.
Este formato tambin puedes aplicarlo en cualquier interaccin que
realice tu aplicacin con datos de un servidor externo.
Conectandote a datos externos usando la capacidad de proceso de un
servidor, podrs aumentar el nivel de complejidad de tu aplicacin y
llevarla al siguiente nivel!
P g i n a | 12
Descargar ejemplo Ver ejemplo online

Login de Usuarios Con PhoneGap y JQuery Mobile

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Login de Usuarios Con PhoneGap y JQuery Mobile

Încărcat de

Drepturi de autor:

Formate disponibile

Login de usuarios con

PhoneGap y jQuery Mobile

La autenticacin de usuarios es un proceso comn en las

Las aplicaciones PhoneGap, a diferencia de una aplicacin web, tienen

Cdigo base de la aplicacin

Vamos a arrancar con una aplicacin bsica que requiere autenticacin,

// recolecta los valores que inserto el usuario

En esta funcin agregamos la instruccin return false para controlar la

Dentro de esta funcin que acabamos de crear, vamos a seguir

Ahora que ya tenemos disponible la informacin del usuario ,vamos a

Para enviar la informacin a este archivo usaremos el comando

Como parmetros de esta funcin incluimos la variable que define la ruta

Procesando la informacin en el servidor

procesar la informacin en el servidor (validacion_de_datos.php) .

A partir de este punto, nuestra aplicacion de prueba, le dar acceso a

La aplicacion movil tiene la capacidad de leer cualquier informacion que

El siguiente paso es verificar que los datos enviados desde

Ya tenemos listos los resultados de la verificacin. Vamos a convertir los

Evitar restriccin de seguridad de Javascript

Observa que al final del URL se incluye ?jsoncallback=? este

Con estos mnimos cambios tu aplicacin no solo funcionara en

Recibir datos del servidor en la app

Descargar ejemplo Ver ejemplo online

S-ar putea să vă placă și