Este es un tutorial para crear un sistema de inicio de sesión con la ayuda de PHP, MySQL y HTML. Tu sitio web necesita ser dinámico y tus visitantes necesitan tener acceso instantáneo a él. Por lo tanto, quieren iniciar sesión tantas veces como sea posible. El sistema de autenticación de inicio de sesión es muy común para cualquier aplicación web. Permite a los usuarios registrados acceder al sitio web y a las funciones exclusivas para miembros. También es útil cuando queremos almacenar información para los usuarios. Cubre todo, desde sitios de compras, sitios educativos y sitios de membresía, etc.
Gestión y Seguridad de Sistemas Empresariales | Inscríbete en el Curso Gratis*
*Enlace de afiliado. Ver Términos de Uso.
Este tutorial se divide en 5 partes.
Tabla de Contenidos
- Requisitos
- Sistema de Registro
- Sistema de Inicio de Sesión
- Página de Bienvenida
- Script de Cierre de Sesión
1) Requisitos para Construir un Sistema de Inicio de Sesión en PHP
Para poder seguir con éxito este tutorial y construir un sistema de inicio de sesión en PHP, debes tener y estar familiarizado con lo siguiente:
- Un servidor que soporte PHP para ejecutar tu código
- Conocimiento y familiaridad con HTML y CSS
- Una base de datos MySQL instalada en tu dispositivo, y conocimiento sobre cómo usarla
- Capacidad para agregar todas las medidas de seguridad correctas en tu sistema de inicio de sesión
Si cumples con todos estos requisitos básicos y tienes los conocimientos necesarios, entonces estás listo para proceder a los siguientes pasos para aprender cómo construir tu sistema de inicio de sesión en PHP.
2) Crear un Sistema de Registro
En esta parte, crearemos un sistema de registro que permita a los usuarios crear una nueva cuenta en el sistema. Nuestro primer paso es crear un formulario de registro en HTML. El formulario es bastante simple de crear. Solo pide un nombre, correo electrónico, contraseña y confirmación de contraseña. Las direcciones de correo electrónico serán únicas para cada usuario. No se permiten múltiples cuentas para la misma dirección de correo electrónico. Mostrará un mensaje de error a los usuarios que intenten crear múltiples cuentas con la misma dirección de correo electrónico.
Paso 1: Crear Formulario de Registro en HTML
Vamos a crear un archivo PHP llamado register.php con el siguiente código en él. Este es un formulario HTML simple con alguna validación básica. Si no estás familiarizado con HTML, puedes obtenerlo de muchos sitios en línea que ofrecen plantillas de formularios de inicio de sesión html5 listas para usar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Register</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Full Name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" class="form-control" required />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary" value="Submit">
</div>
<p>Already have an account? <a href="login.php">Login here</a>.</p>
</form>
</div>
</div>
</div>
</body>
</html>La salida del formulario HTML anterior se verá así.
Todos los campos de entrada son obligatorios al agregar el atributo "required", que es el atributo HTML predeterminado. El uso de type="email" validará la dirección de correo electrónico proporcionada por los usuarios y dará un error si la dirección de correo electrónico no es válida. Para el formulario de registro, hemos utilizado bootstrap para un desarrollo rápido. Si deseas ahorrar tiempo en el código HTML, siempre puedes utilizar algunas plantillas html5 gratuitas para tu proyecto.
Paso 2: Crear la tabla de la base de datos MySQL
Necesitarás crear una nueva base de datos con el nombre que desees. Después, por favor ejecuta la siguiente consulta SQL para crear la tabla de usuarios dentro de tu base de datos MySQL recién creada.
CREATE TABLE `users` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(75) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;Paso 3: Crear Archivo de Configuración de la Base de Datos
Ahora, hemos creado la tabla de usuarios. Creemos un nuevo archivo PHP llamado config.php para conectarnos con la base de datos MySQL. Pegue el siguiente código en el archivo config.php y cambie el nombre de la base de datos por el que elija al crear la base de datos.
Paso 4: Crear un archivo de sesión
Creemos un archivo llamado session.php. En este archivo, iniciaremos la sesión y comprobaremos si un usuario ya ha iniciado sesión, si es así, redirigiremos al usuario al archivo welcome.php.
Paso 5: Crear un formulario de registro en PHP
Finalmente, es hora de crear un código PHP que permita a los usuarios registrar sus cuentas en el sistema. Este código PHP alertará a los usuarios con un error si algún usuario ya está registrado con la misma dirección de correo electrónico.
Reemplace el siguiente código en el archivo register.php.
prepare("SELECT * FROM users WHERE email = ?")) {
$error = '';
// Vincular parámetros (s = cadena, i = int, b = blob, etc), en nuestro caso, el nombre de usuario es una cadena, así que usamos "s"
$query->bind_param('s', $email);
$query->execute();
// Almacenar el resultado para comprobar si la cuenta existe en la base de datos.
$query->store_result();
if ($query->num_rows > 0) {
$error .= 'The email address is already registered!
';
} else {
// Validar contraseña
if (strlen($password ) < 6) {
$error .= 'Password must have atleast 6 characters.
';
}
// Validar confirmación de contraseña
if (empty($confirm_password)) {
$error .= 'Please enter confirm password.
';
} else {
if (empty($error) && ($password != $confirm_password)) {
$error .= 'Password did not match.
';
}
}
if (empty($error) ) {
$insertQuery = $db->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?);");
$insertQuery->bind_param("sss", $fullname, $email, $password_hash);
$result = $insertQuery->execute();
if ($result) {
$error .= 'Your registration was successful!
';
} else {
$error .= 'Something went wrong!
';
}
}
}
}
$query->close();
$insertQuery->close();
// Cerrar conexión a la base de datos
mysqli_close($db);
}
?>
Sign Up
Register
Please fill this form to create an account.
Una vez que el usuario haga clic en el botón de enviar, se verificará si $_SERVER["REQUEST_METHOD"] == "POST" y si se ha establecido una variable $_POST['submit']. Por motivos de seguridad, siempre sugerimos no almacenar la contraseña como texto plano en la base de datos. Hemos utilizado la función password_hash() que crea un nuevo hash de contraseña utilizando un algoritmo de hash unidireccional fuerte.
El script PHP anterior validará que ningún usuario esté registrado con la misma dirección de correo electrónico y también validará la contraseña. Después de confirmar la validación, almacenamos la información proporcionada por el usuario en la tabla de usuarios y alertamos al usuario que el registro fue exitoso.
3) Construyendo un Sistema de Inicio de Sesión
En esta parte, crearemos un formulario de inicio de sesión para permitir a los usuarios acceder al área restringida del sistema. En nuestro caso, el área restringida es una página de bienvenida que cubriremos en la siguiente parte.
Paso 1: Creando un Formulario de Inicio de Sesión en HTML
A continuación se muestra el Formulario de Inicio de Sesión en HTML. Péguelo en un archivo llamado login.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Login</h2>
<p>Please fill in your email and password.</p>
<form action="" method="post">
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" class="form-control" required />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary" value="Submit">
</div>
<p>Don't have an account? <a href="register.php">Register here</a>.</p>
</form>
</div>
</div>
</div>
</body>
</html>La salida del código anterior se verá así
Paso 2: Creando un Sistema de Inicio de Sesión en PHP.
Después de crear el formulario de inicio de sesión en HTML, escribiremos un código para validar las credenciales de inicio de sesión. Al enviar el formulario, verificaremos que el correo electrónico y la contraseña estén completos. Si están completos, ejecutaremos una consulta SELECT para encontrar el registro en una base de datos en base al correo electrónico y la contraseña. Si se encuentra algún registro, almacenaremos el "userID" en la sesión y se redirigirá al usuario al archivo welcome.php, de lo contrario, el usuario recibirá un mensaje de error.
Reemplacemos el siguiente código en el archivo login.php.
Please enter email.';
}
// validar si la contraseña está vacía
if (empty($password)) {
$error .= 'Please enter your password.
';
}
if (empty($error)) {
if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) {
$query->bind_param('s', $email);
$query->execute();
$row = $query->fetch();
if ($row) {
if (password_verify($password, $row['password'])) {
$_SESSION["userid"] = $row['id'];
$_SESSION["user"] = $row;
// Redirigir al usuario a la página de bienvenida
header("location: welcome.php");
exit;
} else {
$error .= 'The password is not valid.
';
}
} else {
$error .= 'No User exist with that email address.
';
}
}
$query->close();
}
// Cerrar conexión
mysqli_close($db);
}
?>
Login
Login
Please fill in your email and password.
4) Crear una página de bienvenida
A continuación se muestra el código para el archivo welcome.php. Los usuarios serán redirigidos a esta página después de un proceso de inicio de sesión exitoso. Hemos agregado un código en la parte superior de la página para verificar si el usuario no ha iniciado sesión, luego redirigirlo a la página de inicio de sesión.
Creemos un archivo welcome.php y peguemos el siguiente código en él.
Welcome <?php echo $_SESSION["name"]; ?>
Hello, . Welcome to demo site.
5) El Script de Cierre de Sesión
Finalmente, creemos un archivo logout.php con el siguiente código en él.
Una vez que el usuario haga clic en el enlace Cerrar sesión, el script anterior será llamado para destruir la sesión y redirigir al usuario al archivo login.php.
Conclusión
En este tutorial, expliqué cómo puedes crear un sistema de inicio de sesión utilizando HTML, PHP y MySQL. Una vez que entiendas lo sencillo que es crear un sistema de inicio de sesión, puedes agregar otras funciones como restablecer la contraseña, olvidar la contraseña, verificar la dirección de correo electrónico, editar el perfil del usuario, etc.
Source:
https://dzone.com/articles/create-a-login-system-using-php