0

Estoy tratando de hace un login usando js y php, pero al enviar el formulario e ir a la pagina de validar_login.php me salta un error que dice undefined array key $id y contrasena. Y escribe el json_encode como "vacio".

Tambien se supone que al estar esas variables vacias y escribir el json_ecode "vacio" no deberia cambiar la pagina sino mostrar una alerta, pero igual avanza

Formulario: index.php

<form action="" method="POST" id="loginForm" enctype="multipart/form-data">
          <div class="form-floating">
            <input class="input" type="text" name="id" placeholder="Identificación">
          </div>

          <div class="form-floating">
            <input class="input" type="password" name="contrasena" placeholder="Contraseña">
          </div>

          <input class="btn btn-outline-primary" type="submit" value="Iniciar Sesión"></input>
        </form>

JS: validar_login.js

let formulario = document.getElementById("loginForm");
formulario.addEventListener("submit", envio);

let alerta = document.getElementById("alerta");

function envio(e) {

  e.preventDefault();

  let datos = new FormData(formulario);

  fetch("./validar_login.php", {
    method: "POST",
    body: datos
  })

    .then((res) => res.json())
    .then((data) => {

      switch (data) {

        case "vacio":
          alerta.innerHTML = '<div class="alert alert-danger">COMPLETE TODOS LOS CAMPOS</div>';
          break;

        case "noExiste":
          alerta.innerHTML = '<div class="alert alert-danger">IDENTIFICACIÓN O CONTRASEÑA INCORRECTOS</div>';
          break;

        case "ok":
          alerta.innerHTML = '<div class="alert alert-success">INICIANDO SESIÓN</div>';;
          window.location = "./pagina_principal.php";
          break;
      }
    })
}

PHP: validar_login.php

<?php

include "./conexion_db.php";

function validarEntrada($entrada)
{
  if (empty($entrada)) {
    return false;
  }

  return true;
}

function obtenerRolUsuario($idUsuario, $conn)
{
  $query = $conn->query("SELECT * FROM usuarios INNER JOIN roles ON usuarios.rolUsuario = roles.idRol WHERE idUsuario = '$idUsuario'");
  $rol = $query->fetch(PDO::FETCH_ASSOC);
  $rolNombre = $rol['nombreRol'];

  return $rolNombre;
}

$id = $_POST['id']; //AQUI MUESTRA EL ERROR
$contrasena = $_POST['contrasena']; //AQUI MUESTRA EL ERROR

if (!validarEntrada($id) || !validarEntrada($contrasena)) {
  echo json_encode("vacio");
  
} else {
  $query = $conn->query("SELECT * FROM usuarios WHERE idUsuario = '$id'");
  $datos = $query->fetch(PDO::FETCH_ASSOC);
  $existe = $query->rowCount();

  if ($existe !== 1) {
    echo json_encode("noExiste");
  } else {
    $verificar_contrasena = password_verify($contrasena, $datos['contrasena']);

    if (!$verificar_contrasena) {
      echo json_encode("contrasenaIncorrecta");
    } else {
      echo json_encode("ok");
      session_start();
      $_SESSION['idUsuario'] = $id;
      $_SESSION['rol'] = obtenerRolUsuario($id, $conn);
      exit;
    }
  }
}

Tambien intente poniendo al atributo action la direccion de el php.

El codigo no me muestra ningun error

6
  • fetch("./validar_login.php", { method: "POST", body: datos }) No se está enviando bien, prueba con: fetch("../validar_login.php", { method: "POST", body: datos }) Commented el 6 jun. 2023 a las 20:35
  • al poner dos puntos sale de la carpeta de la pagina y busca el archivo php en localhost
    – Angel Lugo
    Commented el 6 jun. 2023 a las 21:20
  • Hola Angel, ¿estas seguro de que no existe OTRO elemento con id="loginForm"? Si ese fuera el caso, entonces tendría sentido que te este ocurriendo lo que mencionas. PD: no veo que este enviando los encabezados para indicar que la respuesta es un JSON
    – Marcos
    Commented el 6 jun. 2023 a las 23:09
  • @Marcos Si, la pagina es unicamente ese formulario. A cerca de los encabezados no entenderia el porque, a en mi equipo los envia.
    – Angel Lugo
    Commented el 7 jun. 2023 a las 0:32
  • Angel, el archivo validar_login.js lo estas incluyendo ¿en el <body> después del <form> o en el <head> antes del <body>?
    – Marcos
    Commented el 7 jun. 2023 a las 9:54

2 respuestas 2

1

Posibles soluciones

Tuve este mismo problema hace un tiempo, puedes revisar: PHP No recibe los datos enviados por POST.

Sin embargo, le daré un enfoque diferente a tu pregunta y a mi respuesta.

Cuando envías una petición a un servidor, el cliente tiene que asegurarse de enviar la solicitud correctamente, esto incluye enviar los encabezados correspondientes y una estructura válida de datos.

En tu caso, no parece haber problemas grandes en la forma en la que se construyen y envían los datos al servidor, sin embargo, puede pasar que PHP no es capaz de procesar de manera adecuada los datos. En tu ejemplo, estás enviando una solicitud a la ruta ./validar_login.php, es posible que necesitemos hacer algunas modificaciones para que el servidor pueda recibir de manera correcta los datos.

Una consideración a tener en cuenta es que trabajar con una estructura desordenada puede dificultar la comprensión del código y del entorno, por lo que te recomendaría que tengas el cliente y el servidor por separado.

Una vez dicho esto, es posible que necesites hacer una depuración en búsqueda de posibles errores en tu código, para esto, puedes usar la función var_dump() para comprobar que los datos se estén recibiendo correctamente, de no obtener resultados, puedes tratar de enviar directamente la petición a una URL absoluta en vez de una ruta relativa.

Ejemplo de depuración:

var_dump($_POST);

Con esto, deberías poder ver lo que se está recibiendo del lado del cliente, si esto no muestra ningún resultado, es posible que debas enviar la solicitud a tu URL correspondiente en vez de a la ruta relativa.

Ejemplo:

// ...

// Cambia la URL por la correspondiente en tu caso
fetch("http://localhost:3000/api/validar_login.php", {method: "POST", body: datos}).then(e => e.json()).then(data => { /* ... */ });

Si aún así no recibes nada, es posible que necesites echarle un vistazo a tu configuración de PHP para comprobar que todo esté en orden.

Otra posible solución es estructurar los datos de manera diferente. En vez de pasarle el formulario completo, puedes estructurar los datos en un nuevo FormData

Ejemplo:

const datos = new FormData();
datos.append("contrasena", document.querySelector("input[name=contrasena]").value);
datos.append("id", document.querySelector("input[name=id]").value);

fetch("./validar_login.php", {
  method: "POST",
  body: datos
})
.then((res) => res.json())
.then((data) => { /* ... */ });

Si aún así el servidor no es capaz de recibir datos, te recomendaría que revises la configuración de PHP en el archivo php.ini y la configuración de tu entorno (la máquina local o virtual).


Consideraciones adicionales

Si tu aplicación maneja datos sensibles, siempre es bueno implementar algoritmos de criptografía en tu aplicación para asegurar la integridad de los datos. Es muy común aún usar md5, pero hoy en día se considera un algoritmo obsoleto, se sabe que un atacante puede llevar a cabo un ataque de fuerza bruta y descifrar la cadena original, para encriptar datos de manera irreversible, hoy en día se usa bcrypt, el cual es ampliamente conocido por su resistencia ante ataques de fuerza bruta, para usar bcrypt en PHP, puedes usar la función password_hash. Además, es muy común ver Ataques de inyección SQL, Ataques DDoS, Ataques de fuerza bruta, y demás ataques populares, es muy importante que protejas tu aplicación con algoritmos sólidos que aseguren que tu aplicación se pueda defender ante este tipo de ataques, a continuación te explicaré algunos de los ataques populares:

  • Ataques de fuerza bruta: Consiste en probar todas las combinaciones posibles de cadenas con el fin de que al menos una combinación sea correcta. Para defenderte de esto, puedes limitar el número de intentos fallidos en un tiempo establecido.
  • Ataques DDoS: Son conocidos como Ataques de Denegación de Servicio Distribuidos, consisten en tratar de saturar a un servidor con el fin de colapsarlo o ralentizarlo para que los usuarios legítimos no tengan acceso al servidor. Puedes usar infraestructuras conocidas que te defiendan de esto como CloudFlare
  • Ataques de inyección SQL: Si las entradas de los usuarios en tu aplicación interactúan con la base de datos, es importante tomar medidas al respecto, una buena práctica es usar consultas parametrizadas para separar los datos del SQL, de esta manera, los datos no se interpretarán como consultas. Mucha gente dirá que codificar los caracteres puede ser suficiente, pero no lo es, ya que un atacante puede truncar la base de datos fácilmente si esta es la única medida que se toma.

Puedes seguir investigando más si lo deseas, pero en general, aunque tu aplicación no maneje datos sensibles, te recomiendo también que compruebes la integridad de los datos y las sesiones.


Enlaces de interés y referencias

0

En la parte de tu HTML observo (con respecto al PHP) que hace uso del valor en name; sin embargo, no tiene el valor de la propiedad id; es eso lo que falta; coloca como valor de id lo que tienes en name:

Ejemplo: El tag

<input class="input" type="text" name="id" placeholder="Identificación">

sea

<input class="input" type="text" name="id" id="id" placeholder="Identificación">

Observa que se agrega propiedad id.

y así cada uno de los tag en el form.

3
  • Puse el atributo id a ambos input en el form con el mismo valor que en name, pero sigue dando el mismo error
    – Angel Lugo
    Commented el 7 jun. 2023 a las 1:15
  • @AngelLugo recarga la página; usar la combinación de teclas Ctrl + Shift + R y prueba de nuevo. Commented el 7 jun. 2023 a las 1:19
  • No funciona, incluso borre las cookies, por que ya me a pasado que a veces no se actualiza el codigo hasta que las borre, pero aun asi no funciona
    – Angel Lugo
    Commented el 7 jun. 2023 a las 2:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.