Warning: Undefined array key "typ" in /srv/vhost/diaridigital.net/home/html/sourcecode/main/articles.php on line 18

Creación de un formulario para solicitar credenciales al usuario

18-05-2022
Tiempo de lectura: 2 minutos

Cuando tenemos que de acceder a datos de usuario que son privados, entonces es necesario identificar al usuario antes de mostrar los datos. Para ello vamos a crear un formulario web para dar acceso a la parte privada de una web.

HTML

Utilizaremos HTML para crar el formulario en una página y verificaremos los datos con un script de PHP que accede a la base de datos del servidor y valida el usuario y una contraseña.

Empezamos con el código HTML, creamos un contenedor DIV, con un titulo H1 y un formulario FORM

<div class="login">
	<h1>Login</h1>
	<form action="validar.php" method="post">
		<label for="username">
			<i class="fas fa-user"></i>
		</label>
		<input type="text" name="username" 
placeholder="Usuario" 
id="username" required>
		<label for="password">
			<i class="fas fa-lock"></i>
		</label>
		<input type="password" name="password" 
placeholder="Contraseña" 
id="password" required>
		<input type="submit" value="Login">
	</form>
</div>

El formulario llamará a un script PHP que se enciargará de validar y aceptar los datos de la credencial del usuario.

Tabién necesiatremos un código de estilo en CSS para dar el aspecto deseado al formulario. El formato que queremos conseguir es el siguiente:

Modelo de formulario para identificar al usuario

CSS

He utillizado Font Awesome para los iconos que representan las casillas de usuario y constraseña.

El formato lo conseguimos con el siguiene codigo CSS. Primero la clase LOGIN nos formatea el contenedor;

.login {
  width: 400px;
  background-color: #eee;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin: 100px auto;
}

Un título para el formulario

.login h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #dee0e4;
}

Centramos el formulario

.login form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 0px;
}

Y definimos los estilos de las etiquetas LABEL

.login form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #4f5458;
  color: #ffffff;
}

Las casillas de entrada de los datos de usuario y contraseña que son los INPUT

.login form input[type="password"], 
.login form input[type="text"] {
  width: 310px;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}

Y no olvidemos el botón de envío SUBMIT, al que le daremos un cambio de colo al pasar por encima con el cursor

.login form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #4f5458;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
  background-color: #363e49;
  transition: background-color 0.2s;
}

PHP

Una vez tenemos estos elementos, pasamos al script en PHP que hará el trabajo duro. En este ejemplo vamos a crear un página WRONG.PHP que nos va a dar el mensaje de error en caso que haya algun dato que no sea correcto o que falle la validación del usuario. En caso contrario, iremos directamente a la página principal del contenido privado.

Validamos que el usuario haya enviado la información

if ( !isset($_POST['username'], 
   $_POST['password']) ) 
{
   message("Cal entrar l'usuari i la contrasenya", 
      $stmt);
   Header("Location: wrong.php");
}

Preparamos una query a la base de datos para recuperar a password de este usuario. La password la tenemos guardada en la base de datos transformada en un HASH. Utilizamos prepare para evitar inyección SQL y dar seguridad. Ejecutamos

if ($stmt = $db->prepare("select username, password".
      " from users where username = ?")) 
{
	$stmt->bind_param("s", $_POST['username']);
	$stmt->execute();
	$stmt->store_result();

Si encontramos que hay un registro para este usuario es porque está registrado, ahora recupearmos la password

	if ($stmt->num_rows > 0) 
	{
		$stmt->bind_result($id, $password);
		$stmt->fetch();

Comprovamos que la contraseña entrada en el formulario corresponde al hash que tenemos guardado. Utilizamos PASSWORD_VERIFY para realizar esta comprobación. Recuerda que todo esto se ejecuta en el servidor.

	if (password_verify($_POST['password'], $password)) 
	{

Y finalmente, si pasa la verificación, informamos en la sesión los datos pertinentes para saber que el usuario está identificado correctamente y navegamos a la página principal

			session_regenerate_id();
			$_SESSION['loggedin'] = TRUE;
			$_SESSION['name'] = $_POST['username'];
			$_SESSION['id'] = $id;
			$stmt->close();

			Header("Location: MainPage.php");

A partir de aquí cerramos e informamos del error que se ha producido con nuestra página de errores.

		} 
	} 
	$stmt->close();
	Header("Location: wrong.php");
}

Todo junto

Llegados a este punto tendremos los archivos login.html, login.css, validar.php y wrong.php, además de la página MainPage.php que a donde queremos llevar al usuario.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Login</title>		
		<link rel="stylesheet" href="login.css">
    </head>
	<body>
		<h1>Login</h1>
		<form action="validar.php" method="post">
			<label for="username">
				<i class="fas fa-user"></i>
			</label>
			<input type="text" name="username" 
placeholder="Usuario" 
id="username" required>
			<label for="password">
				<i class="fas fa-lock"></i>
			</label>
			<input type="password" name="password" 
placeholder="Contraseña" 
id="password" required>
			<input type="submit" value="Login">
		</form>
	</body>
</html>