Login de usuarios con PhoneGap y jQuery Mobile Por: Carlos Solis | 12/0/201! "#$: h%%p://re&olucion'(obi/201!/0/12/login)en)ser&idores)e*%ernos)con)phonegap/
P á g i n a |
2
La autenticación de usuarios es un proceso común en las aplicaciones móviles pero, aunque los desarrolladores web están acostumbrados a realizar rutinas de autenticación en un servidor , el proceso es algo distinto en PhoneGap.
Las aplicaciones PhoneGap, a diferencia de una aplicación web, tienen toda su información almacenada en el equipo del usuario no se pueden conectar directamente a una base de datos e!terna. "sto no significa que la información debe quedarse atrapada en el móvil. #enemos muchas t$cnicas para conectar las aplicaciones a cualquier servidor e interactuar con cualquier base de datos. "n este tutorial vamos a revisar paso a paso el proceso de validación de un usuario en una aplicación PhoneGap con %&uer 'obile.
(ódigo base de la aplicación
P á g i n a |
)amos a arrancar con una aplicación básica que requiere autenticación, usaremos una app basada en %&uer 'obile, si nunca haz hecho una puedes ver un tutorial acá. "l código de esta aplicación tiene dos pantallas, la primera tiene un formulario la segunda solo puede verse luego de validarse en un servidor e!terno. <meta charset="UTF-8">
Validacion de sarios<title> <lin rel="st#lesheet" hre$="htt%&code'()er#'commo*ile+','+()er#'mo*ile-+','+'min'css" > <scri%t src="htt%&code'()er#'com()er#-+''+'min'(s"><scri%t> <scri%t src="htt%&code'()er#'commo*ile+','+()er#'mo*ile+','+'min'(s"><scri%t> <head> <*od#> <di. data-role="%a/e" id="inicio"> <di. data-role="header"> <h+>0tenticacion de Usario<h+> <di.> <di. data-role="content"> <$orm id="$ormlario" > <la*el> Usario <la*el> <in%t t#%e="te1t" id="nom*redesario" name="nom*redesario"> <la*el> Pass2ord <la*el> <in%t t#%e="%ass2ord" id="cla.e" name="cla.e" > <in%t t#%e="s*mit" .ale="3o/in" id="*oton3o/in"> <$orm> <di.> <di.> <di. data-role="%a/e" id="home"> <di. data-role="header"> <h+>4ien.enido<h+> <di.> <di. data-role="content"> <h5> 4ien.enido a la a%licacion <h5><br />
<br />
3<br />
<br />
P á g i n a | <h,> 6 sario # %ass2ord son .7lidos<h,> <di.> <di.> <scri%t> 9:;$ormlario:'s*mit9$nction9 <br />
<br />
recolecta los .alores )e inserto el sario .ar datosUsario = 9";nom*redesario"'.al9 .ar datosPass2ord = 9";cla.e"'.al9 archi.oValidacion = "htt%&re.olcion'mo*ie(em%los%hone/a%en.ioFormlario.alidaciondedatos'% h%?(soncall*ac=?" '/et@6OA9 archi.oValidacionB sario&datosUsario B%ass2ord&datosPass2ord 'done9$nction9res%esta6er.er alert9res%esta6er.er'mensa(e "nenerado en& " res%esta6er.er'hora "n" res%esta6er.er'/enerador i$9res%esta6er.er'.alidacion == "o" si la .alidacion es correctaB mestra la %antalla "home" 'mo*ile'chan/ePa/e9";home" else e(ectar na condcta cando la .alidacion $alla retrn $alseG <scri%t> <*od#> <html><br />
<br />
4<br />
<br />
P á g i n a |<br />
<br />
*ecopilando la información Para recopilar la información del formulario vamos a usar +avacript. "l primer paso es crear una función que se active cuando el usuario presiona el boton de envio<scri%t> 9H;$ormlarioI's*mit9$nction9 retrn $alseG <scri%t><br />
<br />
"n esta función agregamos la instrucción return false para controlar la conducta regular del formulario evitar que intente abrir otro documento.<br />
<br />
5<br />
<br />
P á g i n a |<br />
<br />
6<br />
<br />
entro de esta función que acabamos de crear, vamos a seguir agregando código, primero agregamos dos variables que recolectan la información de las casillas de te!to. .ar datosUsario = 9J;nom*redesarioK'.al9 .ar datosPass2ord = 9J;cla.eK'.al9<br />
<br />
/hora que a tenemos disponible la información del usuario ,vamos a enviarla a un archivo hospedado en un servidor e!terno, en este caso el archivo 0validacion1de1datos.php2 que se encuentra hospedado en este servidor. archi.oValidacion = Jhtt%&re.olcion'mo*ie(em%los%hone/a%en.ioFormlario.alidaciond edatos'%h%?(soncall*ac=?K<br />
<br />
Para enviar la información a este archivo usaremos el comando de %&uer $.getJSON que a inclue todos los settings formato para enviar la información al servidor'/et@6OA9 archi.oValidacionB sario&datosUsario B%ass2ord&datosPass2ord<br />
<br />
(omo parámetros de esta función incluimos la variable que define la ruta del archivo que recibe los datos 3archivo)alidacion4 los datos que recopilamos del formulario.<br />
<br />
Procesando la información en el servidor Para este punto tenemos una aplicación que puede recopilar enviar información a un servidor, el siguiente paso es crear el archivo que va a<br />
<br />
P á g i n a |<br />
<br />
7<br />
<br />
procesar la información en el servidor 30validacion1de1datos.php24 . )amos a usar P5P por ser un lengua%e sencillo popular, pero la información que env6a la aplicación puede leerse en cualquier otro lengua%e de programación. "n este caso, para mantener el e%emplo simple vamos a definir dos variables con el nombre de usuario password correctos. (uando hagas tu aplicación real, posiblemente estos valores vengan de una base de datos o algún otro proceso interno del servidor. sarioValido = Jre.olcionKG %ass2ordValido = Jmo.ilKG<br />
<br />
/ partir de este punto, nuestra aplicacion de prueba, le dará acceso a cualquiera que utilice el usuario 0 revolucion2 el password 0 movil0. /hora vamos a e!traer la información enviada desde la aplicación como puedes ver destacado en ro%o, está el nombre de las variables que se enviaron desde la aplicación móvil. sarioEn.iado = ETLHsarioHMG %ass2ordEn.iado = ETLH %ass2ordHMG<br />
<br />
La aplicacion movil tiene la capacidad de leer cualquier informacion que envie el servidor, la comple%idad 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 e!tra que enviaremos de vuelta a la aplicacion. "n este caso vamos a incluir la fecha hora en que se realiza el proceso el dominio en que se generó.<br />
<br />
P á g i n a |<br />
<br />
resltados = arra#9G resltadosLJhoraKM = time9G resltadosLJ/eneradorKM = J/enerado en re.olcion'mo*iKG<br />
<br />
"l siguiente paso es verificar que los datos enviados desde la aplicación coincidan con los que están definidos en el servidor. egún el resultado de esta verificación agregaremos diferentes respuestas del servidor para que el usuario pueda saber si la autenticación tuvo e!ito o no. i$9 sarioEn.iado == sarioValido NN %ass2ordEn.iado == %ass2ordValido resltadosLJres%estaKM = JValidacion CorrectaKG resltadosLJ.alidacionKM = JoKG else resltadosLJres%estaKM = JUsario # %ass2ord incorrectosKG resltadosLJ.alidacionKM = JerrorKG <br />
<br />
7a tenemos listos los resultados de la verificación. )amos a convertir los datos que contiene el arreglo a formato +89 para enviarlo de vuelta a la aplicación. "ste formato es mu popular en aplicaciones móviles porque es fácil de leer ocupa menos ancho de banda que formatos similares como :'L. resltados@son = (sonencode9resltadosG echo resltados@sonG<br />
<br />
La aplicación esta lista para recibir datos, pero aun te falta aprender un truco e!tra.<br />
<br />
8<br />
<br />
P á g i n a |<br />
<br />
9<br />
<br />
"vitar restricción de seguridad de +avascript con +89P "n %avascript e!iste una restricción de seguridad llamada la pol6tica del mismo origen, que solo permite a los archivos %avascript comunicarse únicamente con archivos que se encuentran en el mismo dominio. #ratar de leer archivos entre dominios diferentes despliega un error de seguridad bloquea la lectura del archivo e!terno. i bien es cierto por la forma que se e%ecutan las aplicaciones PhoneGap, esta restricción no aplica, si tratas de emular tu app en un browser te encontraras con un error similar a este-<br />
<br />
Para evitar esta restricción debemos usar el formato +89P 3 +89 with Padding4 que permite acceder al contenido en servidores e!ternos sin generar errores en el navegador. Para usar el formato +89P en esta aplicación solo tenemos que hacer dos leves cambios. "l primero es editar la variable de %avascript 0archivo)alidacion2 de esta formaarchi.oValidacion = Jhtt%&re.olcion'mo*ie(em%los%hone/a%en.ioFormlario.alidaciond edatos'%h%?jsoncallback=?J<br />
<br />
P á g i n a |<br />
<br />
10<br />
<br />
8bserva que al final del ;*L se inclue “?jsoncallback=?” este te!to env6a una llamada de regreso o callbac< para que %avascript pueda leer procesar la respuesta del servidor sin problemas. "l segundo paso es reemplazar la ultima linea de tu archivo P5P para que se a%uste al formato correctoecho $_GET[‘jsoncallback’] . ‘(‘ . resltados@son . ‘);';<br />
<br />
(on estos m6nimos cambios tu aplicación no solo funcionara en un móvil, tambi$n podrás probarla desde tu browser=<br />
<br />
*ecibir datos del servidor en la app 7a casi esta lista nuestra aplicación, solo resta programar la conducta que tendrá la aplicación cuando reciba los datos de vuelta desde el servidor. (omo se menciono antes, el comando $.getJSON inclue todo lo que necesitamos para enviar recibir datos del servidor. )amos a agregarle un m$todo e!tra llamado 0 .done2 que se e%ecuta únicamente cuando se recibe una respuesta válida desde el servidor, en este caso vamos a usar el parámetro 0 respuestaServer 2 en el cual se almacenan automáticamente los datos que se reciben desde el servidor. '/et@6OA9 archi.oValidacionB sario&datosUsario B%ass2ord&datosPass2ord 'done9$nction9 respuestaer!er alert9 respuestaer!er'mensa(e Jnenerado en& K respuestaer!er'hora JnK respuestaer!er'/enerador i$9res%esta6er.er'.alidacion == JoK<br />
<br />
P á g i n a |<br />
<br />
11<br />
<br />
'mo*ile'chan/ePa/e9J;homeK <br />
<br />
(omo se puede ver para acceder uno de los elementos que estaban en el arreglo del archivo P5P, solo se invocan dentro de la variable<br />
<br />
respuestaServer. Para terminar con el proceso de autenticacion, si la respuesta de la validacion es correcta, el comando $.mobile.changePage cambia de pagina nos lleva a la pantalla de bienvenida porque presentamos las credenciales correctas. Puedes ver el código completo acá<br />
<br />
(onclusión "n esta aplicación de prueba hemos logrado enviar recibir información dinámica a un servidor, con algo de código e!tra en el servidor puedes conectar tu app con cualquier base de datos o webservice e!terno. #ambi$n usamos el formato +89P para ignorar restricciones del navegador emular sin problemas nuestras aplicaciones en el browser. "ste formato tambi$n puedes aplicarlo en cualquier interacción que realice tu aplicación con datos de un servidor e!terno. (onectandote a datos e!ternos usando la capacidad de proceso de un servidor, podrás aumentar el nivel de comple%idad de tu aplicación llevarla al siguiente nivel=<br />
<br />
P á g i n a |<br />
<br />
escargar e%emplo )er e%emplo online<br />
<br />
12<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://idoc.tips/report/login-de-usuarios-con-phonegap-y-jquery-mobile-pdf-free" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Login de Usuarios Con PhoneGap y JQuery Mobile"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2025 IDOC.TIPS. All rights reserved.
<div class="pull-right">
<span><a href="https://idoc.tips/about">About Us</a></span> |
<span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> |
<span><a href="https://idoc.tips/term">Terms of Service</a></span> |
<span><a href="https://idoc.tips/copyright">Copyright</a></span> |
<span><a href="https://idoc.tips/contact">Contact Us</a></span> |
<span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://idoc.tips/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177830117-1');
</script>
<script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://idoc.tips/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_IDOCTIPS_cookie_box() {
document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/";
hide_IDOCTIPS_cookie_box();
}
function hide_IDOCTIPS_cookie_box() {
var cb = document.getElementById('IDOCTIPS_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var IDOCTIPS_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('IDOCTIPS_cookie_box_viewed');
if (IDOCTIPS_cookie_box_viewed) {
hide_IDOCTIPS_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
