0

Estoy haciendo un login con js y php. Recibo los datos del form en el js y los envio a php usando fetch, luego de php envio la respuesta de nuevo a js para realizar una accion.

El login funciona bien y recibe las respuestas del php, incluso al imprime los datos que se le dan en el formulario, pero al ir a la dirección del php dice

Warning: Undefined array key "id" in [] on line 14

Warning: Undefined array key "contrasena" in [] on line 15

Formulario: index.html

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

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

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

JS: login.js

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

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

function envio(e) {

  e.preventDefault();

  var datos = new FormData(formulario);

  console.log(datos);
  console.log(datos.get("id"));
  console.log(datos.get("contrasena"));

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

    .then((res) => res.json())
    .then((data) => {
      console.log(data)
      switch (data) {

        case "vacio":
          alerta.innerHTML = '<div class="alert alert-danger">COMPLETE TODOS LOS CAMPOS</div>';
          setTimeout(function () {
            alerta.innerHTML = "<div></div>";
          }, 5000);
          break;

        case "noExiste":
          alerta.innerHTML = '<div class="alert alert-danger">IDENTIFICACIÓN O CONTRASEÑA INCORRECTOS</div>';
          setTimeout(function () {
            alerta.innerHTML = "<div></div>";
          }, 5000);
          break;

        case "ok":
          alerta.innerHTML = '<div class="alert alert-success">INICIANDO SESIÓN</div>';
          setTimeout(function () {
            alerta.innerHTML = "<div></div>";
          }, 5000);
          window.location = "./validar_login.php";
          break;

      }
    })
}

PHP: validar_login.php

<?php

include './config.php';

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']; // En estas dos lineas salta el error, diciendo que estan sin definir los array keys de $_POST
$contrasena = $_POST['contrasena'];

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

  // print_r($_POST); Esto lo imprime en el json que se envia a js, pero las imprime correctamente
  // echo $existe . " ";

  if ($existe === 1) {

    session_start();
    $_SESSION['idUsuario'] = $id;
    $_SESSION['rol'] = obtenerRolUsuario($id, $conn);

    echo json_encode("ok");

    exit;
  } elseif ($existe < 1) {
    echo json_encode("noExiste");
  }

  //   $verificar_contrasena = password_verify($contrasena, $datos['contrasena']);

}

Tambien al iniciar la sesion en otra pagina me dice que la variable global $_SESSION no esta definida, aunque supongo que es por el error de $_POST

5
  • Agrega porfavor el archivo en el que te muestra el error, osea, me refiero a que PHP te debe mostrar el nombre del archivo especifico en el que te sale el error.
    – Layer
    Commented el 9 jun. 2023 a las 22:41
  • ¿Ves los datos en la consola? Luego, algo no cuadra: en el fetch dices que el archivo se llama validar_login.php y en la pregunta pones un archivo llamado validar_datos.php. ¿Es un error de redacción?
    – A. Cedano
    Commented el 9 jun. 2023 a las 22:50
  • 1
    ¿Responde esto a tu pregunta? Variable $_POST no recibe valores
    – Marcos
    Commented el 10 jun. 2023 a las 10:07
  • @Riven Es ese mismo archivo php que adjunte ahi, por alguna razon devuelve la respuesta correctamente al js, pero al ir a ese documento dice que estan vacias
    – Angel Lugo
    Commented el 10 jun. 2023 a las 17:51
  • @A.Cedano Si los datos se imprimen correctamente en consola cuando los imprimo desde el php. Acerca del nombre del archivo me equivoque lo escribi mal en la pregunta, ya la edito
    – Angel Lugo
    Commented el 10 jun. 2023 a las 17:52

1 respuesta 1

2

He probado tu código en mi contexto y funciona, aunque he corregido algunas malas prácticas en las que estás incurriendo:

  1. No declares el formulario como multi-part si no vas a enviar archivos adjuntos.
  2. No uses </input> para cerrar los input, considera usar la notación <input ... />
  3. Considera colocar tu bloque de código Javascript dentro de un bloquedocument.addEventListener("DOMContentLoaded", (event) => { /*aquí todo lo que tenga que ver con el DOM*/ }); ya que en algunos casos podría intentarse leer o modificar elementos del DOM sin que este esté cargado.
  4. Si el tipo de respuesta de fetch es un json, considera emitir desde el servidor un JSON válido. El echo de una cadena simple no es un JSON válido realmente.
  5. No pases a buscar datos en las superglobales directamente. Te expones a situaciones de Undefined index que romperían un flujo normal, como de hecho ocurre aquí. Asigna esos valores con fusión de null o con ternarios.
  6. A mi juicio quedan puntos oscuros en tu lógica, como lo que haces en los case de la respuesta del fetch. Por ejemplo, no veo qué sentido tendría esto: window.location = "./validar_login.php"; en el case ok. Es como volver a validar algo que ya está validado... Tampoco se entiende por qué usas setTimeout ahí. ¿? Si el usuario no pudo verificarse, lo lógico es que vuelvas a pedirle las credenciales, hasta N intentos y que luego bloquees por un tiempo determinado. Es importante que te aclares en ese punto, porque cualquier error de lógica te puede meter en un bucle sin salida. Puede que esto sea parte importante de por qué tu programa sigue funcionando mal.

Aplicando todo lo dicho (y esperando que te aclares en el punto 6), tu código podría escribirse así:

HTML

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

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

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

JS

Quizá, la estructura switch ... case es confusa para tu caso. Te recomendaría que trabajes en base a exito / error, acoplando el código de servidor, como veremos en la parte de PHP. Allí, pondrás en el array de respuesta una clave error cuando algo vaya mal. Y aquí, verificarás si data tiene o no una clave error. Me parece que así el código queda más limpio. Si no te convence mi propuesta, adapta el código.

document.addEventListener("DOMContentLoaded", (event) => {

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

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

    function envio(e) {

      e.preventDefault();

      var datos = new FormData(formulario);

      console.log(datos);
      console.log(datos.get("id"));
      console.log(datos.get("contrasena"));

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

        .then((res) => res.json())
        .then((data) => {
          console.log(data)
          if (data.error) {
              //Completa aquí tu lógica de manejo de errores
              alert (data.error)
          } else {
              alert (data.msg)
              //Aquí significa que todo está OK
              //Haz lo que tengas que hacer     
          }
        })
    }
});

PHP

Como dije en la parte de JS, aquí, mediante el array llamado $outPut, iremos siguiendo todo el flujo del código. Cuando algo falle, pondremos en $outPut una clave error con un mensaje asociado. Y cuando ocurra lo contrario, pondremos una entrada msg asociada a un mensaje. Finalmente, daremos salida a $outPut como JSON. Como dije en el punto (4), para que un JSON sea válido, debe tener una clave : valor, por eso usamos un array. En este caso JS sí recibirá un JSON válido.

He mejorado más cosas en el código. Por ejemplo, en PDO, para saber si hay datos, basta con verificar el resultado de fetch. El uso de rowCount() no se aconseja para consultas SELECT, como podrás ver en el Manual de PHP.

include './config.php';

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);
    return $rol['nombreRol'] ?? '';
}

$outPut=array();
$id = !empty($_POST['id']) ?? NULL; // En estas dos lineas salta el error, diciendo que estan sin definir los array keys de $_POST
$contrasena = !empty($_POST['contrasena']) ?? NULL;
# Evaluaremos en positivo
if ($id && $contrasena) {
    if($conn) {
        $query = $conn->query("SELECT * FROM usuarios WHERE idUsuario = '$id' AND contrasena = '$contrasena'");
        $datos = $query->fetch(PDO::FETCH_ASSOC);
        if ($datos) {
            session_start();
            $_SESSION['idUsuario'] = $id;
            $_SESSION['rol'] = obtenerRolUsuario($id, $conn);
            $outPut['msg']='ok';
        } else {
            $outPut['error']='noExiste';        
        }
    } else {
        $outPut['error']='No hay conexion';
    }
} else {
    $outPut['error']='No hay datos en el POST'; 
}
header("Content-type: application/json; charset=utf-8");
echo json_encode($outPut);
exit();

Post-Data

En algunos servidores, las peticiones fetch de Javascript van a parar al flujo de entrada y no se almacenan en la superglobal. Si es tu caso (podría serlo, si aplicas correctamente todo lo dicho anteriormente y el código sigue sin funcionar), entonces puedes hacer lo siguiente para recuperar los valores:

$json=json_decode(file_get_contents('php://input'));
$mData=json_encode($json);

En $mData deberías tener todos los datos enviados al servidor mediante la API fetch de Javascript. Recuerdo haber tenido este problema en el pasado, en un servidor donde antes alojaba un sitio remoto y la forma de recuperar los datos era esta cuando usaba fetch.

Todavía deben mejorarse varias cosas:

  • Considera usar consultas preparadas, para blindar el código contra ataques de Inyección SQL.
  • Considera usar passwords encriptadas, así, si las contraseñas quedan comprometidas no podrán ser explotadas por usuarios mal intencionados.
  • La llamada a obtenerRolUsuario() es redundante en este contexto, recargas el código haciendo una segunda consulta, pudiendo haber hecho todo en la primera consulta, pues en ese momento ya tenías todo lo necesario para obtener también el rol. Eso es como hacer un viaje largo y traer una sola cosa, cuando en el mismo viaje pudiste traer las dos. Ahora haces un segundo viaje, para traer algo que pudiste traer en el primero. Pongo este ejemplo, porque programar pensando en la vida real, ayuda a ver errores gravísimos (de lógica) que se cometen en el código.
5
  • Excelente respuesta.
    – Layer
    Commented el 11 jun. 2023 a las 1:53
  • Muchas gracias, aplicare esto a mi codigo y lo estudiare un poco más. a cerca del punto 6 el window.location lo dirigi a esa pagina para ver el error que me saltaba lo que tenia pensado era que me enviara a la pagina principal. Del resto lo agradezco mucho
    – Angel Lugo
    Commented el 11 jun. 2023 a las 18:29
  • @AngelLugo cuando haces una petición fetch desde JavaScript el cliente se queda esperando el resultado de dicha petición, así que no tiene sentido redirigir a otra parte desde otro contexto que no sea el then donde manejas la respuesta. Si haces un location el cliente se quedará esperando una respuesta que nunca llega y no tendrás coherencia en tu código.
    – A. Cedano
    Commented el 11 jun. 2023 a las 19:14
  • @A.Cedano ah vale creo que entiendo. Entonces deberia hacerlo como en tu respuesta y poner el redireccionamiento abajo de alert (data.msg), en el alert (data.error) pondria el switch donde se modifica la alerta, cierto?
    – Angel Lugo
    Commented el 12 jun. 2023 a las 17:26
  • @AngelLugo sí, esa es la idea, más o menos, que todo vuelva al cliente y desde allí decidir qué rumbo debe continuar el código, sea redirigiendo a otra parte, sea mostrando en pantalla un mensaje, etc.
    – A. Cedano
    Commented el 12 jun. 2023 a las 22:38

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.