RemoteLogin Class: Login genérico con AJAX

07.11.2006

RemoteLogin Class: Login genérico con AJAX

Por Pichongol (Daniel López) | 13,133 Lecturas
Archivado en: Ajax

El siguiente artículo te permitirá crear un RemoteLogin, para agregar en tu sitio web, utilizando Ajax con PHP.

RemoteLogin intenta facilitar la programación de un Módulo de Login en Ajax, a través de una clase escrita en PHP. Se trata de un Login genérico, que además agrega una barra de progreso a modo decorativo.

La idea principal de RemoteLogin, es que todo webmaster interesado pueda incluir en su sitio un módulo de login basado en AJAX.

Ejemplo de la aplicacion

De esta forma obtendrá no sólo un impacto visual, sino también un mayor performance en un módulo tan importante para un sistema Web.

Archivos del Paquete

(Descarga .zip 164kb)

RemoteLogin.class.php: Contiene los métodos necesarios para realizar el Login.
RemoteLogin.init.php: Parámetros de configuración del RemoteLogin class
demo.css: CSS Stylesheet de la demostración.
progress_div.css: CSS Stylesheet del layer de la barra de progreso.
progress_div: El layer de la barra de progreso.
XMLHttpRequest.js: Funciones javascript para utilización de Ajax.
demo.php: Eso mismo.
demo_validate_user.php: Toma los datos del usuario y realiza el Login.

Modo de Uso

Como dijimos anteriormente, en demo.php tenemos un claro ejemplo de su uso. Su puesta en marcha consiste de 5 pasos:

Configuración:

En RemoteLogin.init.sample setear los parámetros correspondientes.
Renombrar RemoteLogin.init.sample a RemoteLogin.init.php

Instanciación:

Debemos iniciar e instanciar el RemoteLogin haciendo el include correspondiente. Esto nos proporciona un objeto de tipo RemoteLogin, con el nombre $loginDriver.

	/*** Inicia el RemoteLogin, obtenemos $loginBuilder ***/
  include($_SERVER['DOCUMENT_ROOT'].’classes/RemoteLogin.init.php’);

Creación del Formulario HTML con capacidades AJAX

<form <?=$loginDriver->printFormAction();?>>
<table class="loginBox">
<tr>
<td class="header"><div align="center">Acceso al Sistema</div></td>
</tr>
<tr>
<td><?=$loginDriver->printMsgDiv();?></td>
</tr>
<tr>
<td><?=$loginDriver->printUsername("onMouseOver=\"document.getElementById('infoUsuario').style.visibility='visible'\"
onMouseOut=\"document.getElementById('infoUsuario').style.visibility='hidden';\"");?></td>
</tr>
<tr>
<td><?=$loginDriver->printPassword("onMouseOver=\"document.getElementById('infoPassword').style.visibility='visible'\"
onMouseOut=\"document.getElementById('infoPassword').style.visibility='hidden';\"");?></td>
</tr>
<tr>
<td><input type="submit" value="Enviar"></td>
</tr>
</table>
</form>

Utilizaremos eventos Javascript para disparar el RemoteLogin. Para ello, utilizando el $loginDriver, dotaremos al formulario html de la información necesaria. Creamos el formulario HTML donde lo necesitemos y le imprimimos su action:

<form <?=$loginDriver->printFormAction();?>>

Creamos el DIV HTML para los mensajes de error:

<?=$loginDriver->printMsgDiv();?>

Creamos los INPUT HTML, para el username y el password. En caso de que necesitamos setearles otros atributos a dichos elementos, la función de impresión los acepta como Parámetros.

Inclusión de XMLHttpRequest.js y progress_div.html:

Necesitamos incluir el XMLHttpRequest.js dentro de las etiquetas <head></head>. Dicho archivo contiene la lógica para Ajax:

<head>
  <? $loginDriver->printHeader(); ?>
</head>

Además, debemos incluir progress_div.html, que nos proporciona del efecto de barra de progreso, dentro de los tags <body></body>:

<body>
  <? include("html/progress_div.html") ?>
</body>

EJemplo de la aplicación

Adecuación del .css al estilo de tu sitio:

El progress_div.css contiene los estilos del progress_div.html. Es cuestión de adaptarlos para que el login de tu sitio luzca homogéneo.

Acondicionamientos para el Ajax Request:

En RemoteLogin.init.php tenemos la siguiente línea de configuración:

// Quien procesa la petición Ajax
  define ("PATH_TO_RESPONSER", 'http://www.tusitio.com/responser.php');

El Responser es el script que toma el Ajax Request y devuelve los resultados, siendo resultados posibles: Login satisfactorio => "yes" Login incorrecto => "0,1,2,…", siendo este valor subíndice del array de errores, también presente en RemoteLogin.init.php.

El script demo_validate_user.php es un ejemplo de dicho responser, aunque solo chequeando que usuario y password sean "guest". Lo lógico y más frecuente es que con estos dos datos se interactúe con alguna base de datos, o con un archivo de usuarios.

Para que tengas una idea de cómo funciona mira la demo del RemoteLogin.

Califica esta nota:

(3 votos, promedio: 3.67 de 5)

Loading ...

Sobre el autor

Pichongol (Daniel López)
Desarrollador Senior PHP, estudiante de Ing. en Sistemas de Información y Lic. en Biotecnología. Actualmente, reside en Argentina trabajando con PHP y J2EE.

Comentarios

24 comentarios en total.

ssthormess 07.11.2006 - 17:56 - #

Aja? Registro?
InterKraM 07.11.2006 - 20:10 - #

Muy interesante la idea, ya me baje el zip y aunque mi idea de Ajax es bastante amplia su ejemplo le da otro toque loguearse.
Gracias

// http://www.interkram.com //
Henry 10.11.2006 - 08:10 - #

Gracias por este ejemplo tan interesante, me ha servido mucho. También me gustaria que publicaran como se haria lo siguiente: Tengo una pagina php donde en un combobox cargo una lista de personas (ajax), al desplegarlo puedo seleccionar cualquiera y alli tengo una funcion que al cambiar o seleccionar otra persona va y lee otro archivo llamado guarda.php , luego regresa a la pgina nuevamente pero ya se pierde la persona de habia seleccionado en la lista.

Gracias
Pichongol 10.11.2006 - 18:22 - #

Muchas gracias por los buenos comentarios. La idea es que lo prueben y lo critiquen, cuestión de que entre todos podamos mejorarlo en lo que se pueda. Saludos
Agustin 13.11.2006 - 07:07 - #

Muy bueno!!… no lo probe pero lo mire por arriba y esta bueno, lo que se podria mejorar (a mi gusto) es quitar las tablas y hacer un diseño tableless (si ya se, soy un fundamentalsita de los estandares ), ni bien encuentre un \”hueco\” en el trabajo me pongo a hacerlo y te lo paso .. muchas gracias!
cvander 13.11.2006 - 09:21 - #

Muy buen ejemplo de uso de ajax. Sin duda que será muy útil para algunos desarrollos.

Como bien decía Agustín, el tema de incluir el formulario basado en estándares también fue una curiosidad que me pico mencionar

Hay algo por aquí que podría ayudar a hacer esto fácil:
http://www.maestrosdelweb.com/editorial/estilizando/
Pichongol 13.11.2006 - 11:49 - #

Hola Agustin!, gracias por tu comentario. Me parece perfecto tu apreciacion sobre las tablas, y es una gran verdad lo que decis, …pasa que lo mio es mas el código que la parte del diseño ;-). Y con respecto a los fundamentalistas de los estandares, salud por ellos, necesitamos mas talibanes
jpinews 16.11.2006 - 05:40 - #

Disculpeme pero cuando pincho en http://www.maestrosdelweb.com/util/RemoteLogin/demo.php
No me sale nada pero creo que lo he visto funcionando y me parecío muy interesante.
Gracias de todos modos.
Armadno 24.11.2006 - 09:20 - #

Este demo de remote login , no funciona, he intetado ejecutarlo pero salen errores.

Warning: main(D:/Archivos de programa/Apache Group/Apache2/htdocs/classes/RemoteLogin.init.php) [function.main]: failed to open stream: No such file or directory in D:\\Archivos de programa\\Apache Group\\Apache2\\htdocs\\Pruebas_AJAX\\RemoteLogin\\demo.php on line 3

Fatal error: main() [function.require]: Failed opening required \’D:/Archivos de programa/Apache Group/Apache2/htdocs/classes/RemoteLogin.init.php\’ (include_path=\’.;C:\\php5\\pear\’) in D:\\Archivos de programa\\Apache Group\\Apache2\\htdocs\\Pruebas_AJAX\\RemoteLogin\\demo.php on line 3
manuel 31.01.2007 - 13:55 - #

muy bueno pero me gustaria verlo ejecutandoce gracias
Alain Sanchez 03.02.2007 - 21:07 - #

Hola, acabo de probar el demo y me ha mostrado los siguientes errores:
Warning: include(/home/maestros/public_htmlclasses/RemoteLogin.init.php) [function.include]: failed to open stream: No such file or directory in /home/maestros/public_html/util/RemoteLogin/demo.php on line 3

Warning: include() [function.include]: Failed opening ‘/home/maestros/public_htmlclasses/RemoteLogin.init.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/maestros/public_html/util/RemoteLogin/demo.php on line 3

Fatal error: Call to a member function printHeader() on a non-object in /home/maestros/public_html/util/RemoteLogin/demo.php on line 11

por favor corregirlos, vale, por lo demas el contenido esta perfecto y me ha servido de mucha ayuda.
Muchas gracias.

Saludos desde Cuba…
anunciolibre 21.03.2007 - 18:11 - #

Me he descargado el zip y me encanta como sale, lo intaré implementar para hacer más sencillo loguearse y además con buen diseño. Gracias
Aleck Vinent 12.04.2007 - 21:54 - #

a mi también el demo me sale con errores.
karlos 13.04.2007 - 21:12 - #

me manda errores el demo..por cierto
” Desarrollador Senior PHP, estudiante de Ing. en Sistemas ”
un estudiante de sistemas no puede considerarse “SENIOR”..
BCN 22.04.2007 - 16:11 - #

El tipo es ambicioso …
Javier 03.05.2007 - 11:03 - #

Al papanatas de Karlos, el seniority tiene mas relacion con la experiencia que con el titulo universitario. Lo universitario apunta mas a lo funcional.
Inepto
Benjamín sánchez 22.06.2007 - 12:35 - #

muy buen ejemplo de ajax, lo instalé y trabaja a la perfección, pero al tratar de hacerlo con una base de datos pareceiera qu eno interpreta mi codig; cómo debo meterlo y en donde? lo estoy poniendo en el demo_validate_user.php
Alejandro 14.08.2007 - 12:27 - #

El script no funciona … Corregirlo porfavor!
Thera Hack 02.10.2007 - 16:17 - #

Muy buen manual aunque esta clase de logins ya estan vulnerados……. por ahi en mi web deje unos manuales de como entrar a estos logins sin password ni user…..
http://you-know.rudy21hosting.com/index.php?topic=167.0
Este manual es para flash pero se emplean la misma libreria para los sockets (XMLHTTP)….
Roberto Navarres 12.11.2007 - 17:50 - #

Bueno la verdad es que a mi no me funciono al principio pero lo arregle a mi modo, lo que os pregunto a ustedes maestros web es que como haria o mejor dicho crear sesiones usando ajax sin recargar la pagina solo usando POST haber, por la verdad que ResponseText no sirve para esto para comparar nose si hay un metodo nuevo que dicen ah!!!.
pablo 19.11.2007 - 15:39 - #

Muy bueno el script pichongol, para q funcionara solo tuve q cambiarle la extensión del archivo “RemoteLogin.init.sample” a “RemoteLogin.init.php”, q esta en la carpeta classes, seria bueno q corrigieran este error para q todos puedan ejecutarlo , saludos
Rafa 19.02.2008 - 06:08 - #

La demo no funciona.
http://www.maestrosdelweb.com/util/RemoteLogin/demo.php

Un saludo
ruben 29.04.2008 - 00:19 - #

Hola que tal me parece muy bueno el codigo sin embargo me he encontrado con un problema, al usuarlo con las variables $_post[] normales no pasa nada malo pero al utilizar el codigo de mysql_* algo pasa que me aparece arriba undefined y simplemente no hace nada al quitarle todo e codigo relacionado con mysql vuelve a funcionar, no se si hice algo mal o me falta alguna linea espero su ayuda gracias
Mario 09.05.2008 - 10:46 - #

El demo no funcina….

… Es una basura…