PHP – Validar usuario y contraseña usando AJAX

Leyendo la siguiente pregunta en nuestro Foro: “Validación de clave con javascript“, pensé que sería muy útil redactar un artículo que hablara sobre la autenticación de usuarios usando Ajax.  Cuando desarrollamos aplicaciones web con Php, la manera tradicional de evaluar los datos capturados por nuestros usuarios es al recibir los formularios de captura a través de POST o GET.  Esta forma tradicional implica que el navegador enviará los datos y procesará nuevamente toda la página.  Con Ajax podemos optimizar esto, de tal manera que nuestro servidor solo procese la información y devuelva una respuesta sin que el navegador deba solicitar nuevamente toda la página. 

Bien, pues sabiendo lo anterior vamos por partes armando nuestro ejemplo de autenticación usando AJAX.  Lo primero es crear el script de Php responsable de realizar la validación de clave y password del usuario.   Esto es necesario pues la responsabilidad de Ajax será la de realizar la petición al servidor, pero al final, la información será procesada por un script del lado del servidor, así que crearemos la tabla en Mysql que almacenará los datos de usaurios: 

CREATE TABLE MYSQL.USUARIOS SELECT 'USUARIO' USUARIO, '1234567890' PASSWORD

 Luego procedemos a codificar el script valida.php

<?php 

/*  El escript recibirá a través de get los datos de clave y password del usuario*/
$clave  = isset($_GET["clave"])? $_GET["clave"]:"";
$password = isset($_GET["password"])?$_GET["password"]:"";
$LsResultado = "Inválido";

/* de no existir datos o llegar estos en blanco devolvemos mensaje de error:-*/
if (!$clave or ! $password)
  $LsResultado  = "invalido";
else
   {
      /* de otra manera validamos el usuario y password */
      $Conexion= mysql_connect('localhost', 'root', 'MIPASSWORD');
      $resultado = mysql_query("SELECT USUARIO, PASSWORD FROM MYSQL.USUARIOS WHERE USUARIO = '$clave'");
	  if (!$resultado)
	    $LsResultado = "invalido";
	  else {
        $datos = mysql_fetch_row($resultado);
        if ($datos[0] <>  $clave)
          $LsResultado = "invalido";
        else iF ($datos[1] <>  $password)
          $LsResultado = "invalido";
		else  
		  $LsResultado = "valido";
	}	  
   }

/* finalizamos nuestro script de php imprimiendo el mensaje */
echo $LsResultado;

?>

como puede observarse, el script tiene como única responsabilidad recibir los datos, compararlos contra lo que hay en mysql y devuelve un mensaje “valido” o “inválido” según sea el caso. Este mensaje lo podremos tomar como bandera en nuestro script de java.

Ahora, vamos a crear el script js que nos permitirá realizar las peticiones usando Ajax, creamos un archivo js llamado funciones.js y colocaremos el siguiente código:

function DameAjxInst() { 
     var InstAjax=false; 
     try { InstAjax =new ActiveXObject("Msxml2.XMLHTTP"); } 
          catch(e) { 
      try { InstAjax =new ActiveXObject("Microsoft.XMLHTTP"); } 
          catch(E) { 
                 if (!InstAjax && typeof XMLHttpRequest!='undefined') 
                    InstAjax =new XMLHttpRequest(); 
          } 
      } 
return InstAjax;; 
} 

/*  Esta función será la resposable de enviar la petición al servidor  */

function ValidaUsuario(usuario,password) { 
   var ajax= DameAjxInst ();
   var mensaje ="invalido";
   // realiza la petición a través de GET  al script de php que creamos previamente
     ajax.open("GET", "valida.php?clave="+usuario + "&password=" + password, false); 
     ajax.onreadystatechange=function() { 
     if (ajax.readyState==4) 
        mensaje=ajax.responseText; 
     } 
     ajax.send(null); 
	 alert("El usuario es: " + mensaje);
     return null; 
}

El truco aquí está en que al ejecutar el método open del objeto XMLhttpRequest, le decimos al objeto que la comunicación será síncrona, es decir, que deberá esperar la respuesta del servidor para poder continuar con el flujo del programa.

y por último creamos un archivo html donde vamos a probar el script de validación:

 

<html>
  <head>
    <script language="javascript" type="text/javascript" src="funciones.js"></script>
  </head>
  <body>
     <form name="frmvalusu" id= "frmvalusu" action="index.php" method="Get">
	   <span> Usuario:</span>
	     <input type="text" name="usuario" value ="">
	   <span> Password:</span>
	     <input type="text" name="password" value ="">		 
     </form>
       <input type="submit"	 value="Valida" OnClick="ValidaUsuario(document.frmvalusu.usuario.value,document.frmvalusu.password.value);">
  </body>  
</html>

  

 Como se puede ver en el código, dejé el botón fuera de la declaración del formulario, de esa forma evito que después de presionado el botón el formulario sea enviado.  Y bueno, para finalizar una imagen que muestra el resultado de probar nuestro pequeño script de validación:

 

valida_usuario_ajax

6 Comments

  1. Esto es muy simple de implementar, pero tiene un grave problema de seguridad ya que los datos de usuario y contraseña viajan en texto plano, muy fácil para interceptarse. Necesita seguridad. Tendrías que desde el jscript codificar esa infocación además de usar un token único para cada llamada.

    • Gracias por comentar Leonardo, efectivamente este es un ejemplo muy básico de la autenticación. Como bien mencionas lo ideal es implementar medidas de seguridad que eviten ataques por inyección de código o pueda interceptarse la información. Pero esa parte de seguridad prefiero en todo caso tratarla en un segundo artículo.

      Gracias de nuevo por tomarte el tiempo de comentar.

  2. felicidades por el articulo…pero no le encuentro sentido de autentificar por Ajax cuando se supone que tienes que cargar el entorno de la aplicación una vez autentificado el usuario

    • Hola Daniel,

      El uso de la comunicación síncrona usando ajax tiene múltiples ventajas. En casos como algo tan sencillo como la validación de un usuario puede que no te parezca tan útil pero si cambiamos el enfoque a la captura de múltiples datos, el usar ajax nos permite optimizar recursos al no tener que refrescar toda la pantalla para almacenar información y mostrarla.

      Gracias por comentar.

Deja un comentario