Como todos ya sabemos qué es Phonegap y cómo funciona gracias a ¿Qué es Phonegap?, ahora vamos a pasar a aprender como realizar una petición AJAX al servidor y que éste nos devuelva una respuesta. Para ilustrar mejor esta lección vamos a hacerlo sobre la base de un Login.
La tarea consistirá en crear una página de Login en el que deberemos introducir Usuario y Contraseña y al enviar los datos el servidor retornará ciertos datos necesarios para identificar el usuario.
Lo primero de todo vamos a crear una págna HTML de Login.html cuya ruta será assets/login.html
Login
Como podemos observar en el código anterior, hemos declarado un evento "click" que se invoca cuando intentamos enviar el formulario. Este evento recoje los datos introducidos y se los pasa a la función login() que es la encargada de procesarlos. Además, si os fijáis encriptamos el password en md5 para evitar enviarlo en texto plano y que cualquier persona lo pueda capturar.
El siguiente paso será declarar la función login() y que esta procese los datos recibidos. Para ello creamos un archivo llamada funciones.js
var public_key="123456789";
function login(user, pass){
$.getJSON('http://www.midominio.com/app/services/login.php?callback=?',{user:user, pass:pass, key:public_key},function(data){
if(data.error > 0){
switch (data.error){
case '1':
alert('Debes rellenar todos los campos');
break;
case '2':
alert('Usuario o password incorrecto');
break;
default:
alert('Error desconocido');
break;
}
}
else{
/** GUARDAMOS DATOS EN localStorage **/
window.localStorage.setItem("id_user", data.id_user);
window.localStorage.setItem("username", data.username);
window.localStorage.setItem("private_key", data.private_key);
}
});
}
Para comprender el funcionamiento de esta función debemos tener en cuenta los siguientes puntos:
- El formato del objeto devuelto por el servidor será JSONP por lo que la petición deberá ser realida con $.getJSON()
- Para evitar que cualquier persona externa pueda hacer peticiones al servidor sin nuestro consentimiento hemos agregado una public key que sirve como primera defensa. Después veremos como introducir más defensas contra accesos no permitidos.
- Una vez sepamos que tanto el usuario como su contraseña son correctos, guardaremos ciertos datos necesarios en el almacenamiento local del teléfono móvil. Estos actuarán como lo harían en $_SESSION.
Por último, debemos crear el servicio en el servidor que reciba los datos y devuelva el objeto JSONP. Lo hemos llamado login.php y como se puede ver en getJSON() esta alojado en www.midominio.com/app/services/. Vosotros debéis alojarlo en vuestro servidor.
$id_user, "username" => $username, "private_key" => $private_key ,"error" => "0");
$json = json_encode($data);
}
else{
$data = array("error" => "2");
$json = json_encode($data);
}
}
else{
$data = array("error" => "1");
$json = json_encode($data);
}
echo $_GET['callback'] . '(' . $json . ')';
?>
Recibimos el usuario, contraseña y public key a través de $_GET[]. Realizamos las comprobaciones pertinentes para saber si existe el usuario y su contraseña es correcta y si así es, actualizamos su fecha de acceso y creamos una private_key para él.
La private_key se utilizará para prevenir accesos prohibidos a secciones privadas que sólo deberían tener acceso el propio usuario. Esta private_key se genera al loguearse un usuario y se genera a partir de la public_key, la fecha de acceso y una cadena de texto cualquiera y se encripta con md5 para que no pueda ser leída por nadie. La private key de cada usuario se regenerará cada vez que el usuario inicie sesión.