Formulario de login

por

En este artículo explicaremos el primer paso para crear nuestro sistema de inicio de sesión de usuarios con PHP: el formulario de login. Este formulario constituye el punto de entrada del usuario, donde introduce sus credenciales (nombre de usuario y contraseña) para que sean validadas por el servidor. Para ello, aplicaremos un conjunto de buenas prácticas, tanto para la validación básica en el navegador (lado del cliente) como para la validación y la seguridad de los datos en el lado del servidor.

Este artículo forma parte de la serie Sistema de login con PHP, donde se explica paso a paso cómo construir un sistema completo de login de usuarios usando PHP y MySQL.

Estructura del formulario de login

Nuestro formulario de login será un formulario simple con los campos usuario y password. Enviaremos los datos con el método POST, ya que los datos enviados por GET se muestran en la URL (lo cual sería inseguro para contraseñas). El código HTML es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Inicio de sesión</title>
  <style>
    * {
      box-sizing: border-box;	
    }
    body {
      font-family: Arial;
      background: #f3f3f3;
    }
    form {
      width: 300px;
      margin: 100px auto;
      padding: 20px;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 10px;
      margin: 5px 0 10px 0;
    }
    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background: #007BFF;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form action="login.php" method="POST">
    <h2>Iniciar sesión</h2>
    
    <label for="usuario">Usuario:</label>
    <input type="text" name="usuario" id="usuario" required minlength="3" maxlength="20" placeholder="Tu nombre de usuario">
    
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" required minlength="6" maxlength="60" placeholder="Tu correo electrónico">    
    
    <label for="password">Contraseña:</label>
    <input type="password" name="password" id="password" required minlength="4" maxlength="30" placeholder="Tu contraseña">
    
    <input type="submit" value="Entrar">
  </form>
</body>
</html>

Validación en el lado cliente

Nuestro formulario de login incluye una validación básica de HTML5 con los siguientes efectos:

  • required: obliga a completar los campos.
  • minlength, maxlength: establecen longitudes mínimas y máximas.
  • type="password": oculta la contraseña en pantalla.
  • placeholder: guía visual de texto para el usuario.

Actualmente, la navegación web se realiza mediante el protocolo HTTPS, el cual cifra los datos y aplica una capa adicional de seguridad. Sin embargo, aunque este cifrado y la validación básica del formulario en el navegador (HTML) son útiles, no resultan suficientes, ya que pueden manipularse fácilmente desde el propio navegador. Por eso debemos complementarlas con una validación en el servidor.

Validación en el lado servidor (PHP)

Al enviar el formulario de login, el archivo login.php recibirá los datos a través del método POST. Antes de realizar cualquier comprobación en la base de datos, debemos asegurarnos de que los datos sean seguros, válidos y no estén vacíos. Para ello debemos tratar los campos del formulario con PHP.

<?php
  // Comprobamos si el formulario fue enviado
  if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Sanitizar los datos de entrada
    $usuario = trim($_POST['usuario'] ?? '');
    $email    = trim($_POST['email'] ?? '');
    $password = $_POST['password'] ?? '';

    // Validar campo usuario
    if (empty($usuario) || strlen($usuario) < 3 || strlen($usuario) > 20) {
      die("El nombre de usuario debe tener entre 3 y 20 caracteres.");
    }
    // Opcionalmente podemos restringir caracteres
    if (!preg_match("/^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+$/u", $usuario)) {
      die("El Nombre contiene caracteres no permitidos");
    }
    // Validar campo email
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      die("Email inválido");
    }
    // Validar campo password
    if (empty($password) || strlen($password) < 8 || strlen($password) > 30) {
      die("La contraseña debe tener entre 8 y 30 caracteres");
    }
    if (!preg_match("/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{8,}$/", $password)) {
      die("La contraseña debe contener letras, números y símbolos");
    }

    // En este punto, el formulario está validado correctamente.
    // Más adelante (en artículos posteriores) haremos la conexión con la base de datos.
    echo "Formulario validado correctamente. ¡Listo para comprobar en base de datos!";
  }
?>

Una buena práctica consiste en separar este código de validación de los datos del formulario en un archivo independiente, por ejemplo, validar-login.php. Este código lo podemos añadir en nuestro archivo maestro login.php mediante include(). Como veremos más adelante, en el archivo login.php iremos añadiendo todas las partes de nuestro sistema de login de usuarios, utilizando buenas prácticas de seguridad e integridad de los datos. En este caso, la validación del formulario realiza lo siguiente:

  • Comprobación de método POST: Asegura que solo se procesan los datos enviados por un formulario mediante el método POST.
  • Sanitización inicial:
    • trim() elimina espacios extra.
    • ?? '' evita errores si la clave no existe en $_POST.
  • Validación de usuario:
    • Comprueba la longitud y caracteres válidos en el nombre de usuario. Si quieres permitir números o guiones bajos en el usuario, tendrías que ajustar el preg_match().
  • Validación de email:
    • Forma estándar de validar emails en PHP.
  • Validación de password
    • Comprueba la longitud y complejidad (letras, números, símbolos) del password con buenas prácticas para la seguridad moderna.
  • Mensaje final:
    • Indica que todos los campos pasaron la validación antes de añadirlos a la base de datos.

Seguridad del login

En general, esta validación conjunta del formulario de login, tanto del lado del cliente como del servidor, es robusta, moderna y segura, y funciona perfectamente antes de enviar los datos a MySQL. En caso de error, muestra mensajes genéricos (“Datos incorrectos”) para no revelar detalles internos que puedan ser explotados por posibles atacantes.

Aunque la validación del lado del cliente es útil, el servidor siempre debe tener la última palabra. Este código representa un primer paso básico; cada campo puede requerir opciones de verificación adicionales y prepara la base para implementar medidas de seguridad más avanzadas.

Formulario de login

En este artículo hemos explicado cómo crear un formulario de login y aplicar una validación básica tanto en el lado del cliente (HTML) como en el lado del servidor (PHP). Con ello tendrás una base segura para el proceso de inicio de sesión de usuarios mediante nombre de usuario y contraseña.

Sin embargo, aquí solo hemos utilizado dos campos. En formularios con más información que deba almacenarse en una base de datos, la validación e integridad de los datos deben adaptarse específicamente a cada tipo de campo.

Un formulario de login, suele ser uno de los puntos de entrada más habituales para ataques en la web, por lo que la validación de los datos es una tarea crucial. Muchos desarrolladores emplean distintas medidas de seguridad proporcionadas por PHP, junto con expresiones regulares y captchas, para validar los datos e incluso prevenir intentos de inyección o envíos automatizados por robots de spam.

Puedes leer más sobre estos temas en los siguientes artículos relacionados:


¡ Espero que este artículo sea de vuestro interés !

Deja un comentario