Saludos amigos, en este post llamado “PHP MySQli inicio de sesión seguro” compartiré con ustedes los códigos de un sistema PHP para hacer login en una base de datos MySQL con MySQLi, la nueva y mejorada extensión de PHP.
Se trata de un sistema completo, 100% funcional y seguro el cual puedes adaptar a tus necesidades simplemente modificando algunos parámetros.
Veamos las características del sistema:
Características del sistema para login PHP y MySQLi
Veamos las funcionalidades del sistema:
- El sistema permite conectarse a una base de datos para le creación de usuarios.
- El sistema encriptará las contraseñas en formato HASH utilizando el algoritmo CRYPT_BLOWFISH, lo que garantiza un alto nivel de seguridad para la base de datos.
- El script para el inicio de sesión tendrá una presentación formateada con CSS, que le brinda un aspecto mas presentable y profesional.
- Una vez validados los usuarios, ingresaran a una pagina en formato html protegido por una sesión la cual mostrara el nombre del usuario logueado y su DNI.
- El sistema de inicio de sesión detectara si el usuario se equivoca en escribir su usuario o su contraseña
A continuación describiremos paso a paso la creación del sistema:
1. Creación de la tabla Usuarios en la base de datos
Lo primero que debemos hacer es crear nuestra tabla usuarios en nuestra base de datos.
El código para la creación de la tabla es el siguiente:
CREATE TABLE IF NOT EXISTS `usuarios` (
`dni` int(11) NOT NULL AUTO_INCREMENT,
`usuario` varchar(50) NOT NULL,
`clave` varchar(255) NOT NULL,
PRIMARY KEY (`dni`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
A continuación si observas desde un terminal o desde webin la tabla creada tendra este aspecto:
2. Creación del script PHP/MySQLi para agregar los usuarios a la tabla.
A continuación vamos a crear un script para agregar usuarios a la tabla que acabamos de crear este script dependerá de otro script el cual se encargara de la conexión a la base de datos.
Script de conexión a la base de datos conectar.php:
<?php
$conn = mysqli_connect("localhost","root","tu_clave","tu_base_de_datos");
if(!$conn){
die("Connection error: " . mysqli_connect_error());
}
?>
A continuación crearemos el Script PHP para agregar usuarios a la base de datos, sera un formulario y lo llamaremos registro.php
<HTML>
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body style="background-color:hsla(0,16%,65%,0.5);">
<p> </p>
<p style="text-align:center;"> <img src="https://wi.wallpapertip.com/wsimgs/33-337633_nikola-tesla.jpg" style="width:400px;height:120px;"></p>
<h1 align="center">REGISTRO DE USUARIOS</h1>
<table border="" width="400" cellspacing="2" cellpadding="15" align="center" bgcolor="#00FF00">
<tbody>
<tr><td align="center">
<form method="post">
<p><strong>DNI:
<input name="dni" placeholder="DNI"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "8" />
</strong></p>
<p><strong>USUARIO: <input maxlength="10" name="usuario" type="text" value="" placeholder="USUARIO" /></strong></p>
<p><strong>CLAVE: <input maxlength="8" name="password" type="password" value="" placeholder="PASSWORD" /></strong></p>
<p><button name="submit" type="submit"><strong>REGISTRAR</strong> </button></p>
</form></td>
</tr>
</tbody>
</table>
<table border="2" width="400" cellspacing="2" cellpadding="15" align="center">
<tbody>
<tr bgcolor="#FFD700">
<td align="center"><a href="exit.php">SALIR</a></td>
</tr>
</tbody>
</table>
</HTML>
<?php
require_once("conectar.php");
if ($stmt = $conn->prepare("INSERT INTO usuarios (dni, usuario, clave) VALUES (?, ?, ?)"))
{
$dni = $_POST['dni'];
$usuario = $_POST['usuario'];
$password = $_POST['password'];
$options = array("cost"=>4);
$hashPassword = password_hash($password,PASSWORD_BCRYPT,$options);
$stmt->bind_param("iss", $dni, $usuario, $hashPassword);
$stmt->execute();
if (!$stmt->error){
echo "<table border=1 cellspacing=0 cellpading=0 align=center BORDER BGCOLOR=#141318>
<p><tr align=center > <td><font color=yellow ><div style=font-size:1.25em color:yellow> USUARIO REGISTRADO CON EXITO </div></td></tr></p>
</table>";
}
}
?>
Lo que hay que destacar de este formulario es que solo permite el ingreso como máximo 8 caracteres numéricos para la variable DNI y eso se logra con un pequeño script de java. ya que html no permite un bloqueo máximo de la variable number. Obviamente se puede incrementar el valor de esa restricción.
El script registro.php tendrá este aspecto:
Ahora ya podemos agregar usuarios a nuestra tabla, veamos un ejemplo.
Agregaremos el siguiente usuario:
Usuario: Prueba
DNI : 47452683
Clave: prueba01
El script muestra un mensaje de éxito luego de haber agregado el usuario, y si observamos en la tabla veremos la siguiente información:
Como puedes ver la contraseña se guarda en la tabla en su formato HASH tal como lo hemos establecido para el nivel de seguridad del sistema.
A continuación crearemos el script que servirá para el inicio de sesión de los usuarios:
3. Script HTML con CSS el para inicio de sesión.
A continuación crearemos el script HTML, mejoraremos el aspecto del formulario con CSS , este script nos servirá para ingresar al sistema:
se llamara login.html
<html>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.login-link {
font-size: 12px;
color: #444;
display: block;
margin-top: 12px;
}
</style>
<body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<form action="autenticartest.php" method="post">
<img src="https://cdn6.aptoide.com/imgs/7/e/8/7e81d954613ebabc701e35761807c771_icon.png" style="width:104px;height:104px;">
<h1>Tecnociencia Perú</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" name="username" class="login-field" value="" placeholder="username" maxlength="10" id="login-name" required>
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<input type="password" name="password" class="login-field" value="" placeholder="password" maxlength="8" id="login-pass" required>
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<input type="submit" class="btn btn-primary btn-large btn-block" value="INGRESAR">
<a class="login-link" href="registro.php">Registrarse</a>
</div>
</div>
</div>
</body>
</html>
Este script tendra el siguiente aspecto:
A continuación se creara el script que mostrara el perfil del usuario que ha ingresado al sistema el cual mostrara su nombre y su DNI.
4. Creación del Script PHP/MySQLi para la autenticacion de los usuarios.
Este script sera el encargado de revisar las credenciales que presenta el usuario que desea ingresar al sistema.
En primer lugar revisara si el nombre del usuario existe en la base de datos, si no existe, mostrara un mensaje : EL usuario no existe.
Pero si existe procederá a comparar la contraseña proporcionada con la almacenada en la base de datos con la función PASSWORD_VERIFY ().
Este es el código del script autenticar.php:
<?php
session_start();
require_once("conectar.php");
//VERIFICACION DE ESCRITURA DE DATOS EN EL FORM
if ( !isset($_POST['username'], $_POST['password']) )
{
// Could not get the data that should have been sent.
exit('Please fill both the username and password fields!');
}
// SI SE CONECTO Y SI SE ENVIARON AMBOS DATOS SE PROCEDE CON LA CONSULTA DE EXISTENCIA DEL USUARIO EVITANDO INYECCIONES SQL ?
if ($stmt = $conn->prepare('SELECT dni, clave FROM usuarios WHERE usuario = ?'))
{
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
$stmt->store_result();
// SI EL USUARIO EXISTE EN LA TABLA SE EXTRAE Y SE APUNTA SU DNI Y SU CLAVE
if ($stmt->num_rows > 0)
{
$stmt->bind_result($dni, $clave);
$stmt->fetch();
// AHORA VERIFICA SI LA CLAVE QUE SE EXTRAJO DE LA TABLA ES IGUAL A LA QUE SE ENVIA DESDE EL FORMULARIO
//if ($_POST['password'] === $clave)
if(password_verify( $_POST['password'],$clave))
{
// SI COINICIDEN AMBAS CONTRASEÑAS SE INICIA LA SESION Y SE LE DA LA BIENCENIDA AL USUARIO CON ECHO
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['dni'] = $dni;
// echo 'BIENVENIDO USUARIOP : ' . $_SESSION['name'] .' CON TU DNI NUMERO : '. $_SESSION['dni'] . '!';
header('Location: perfil.php');
}
// SI EL USUARIO EXISTE PERO EL PASSWORD NO COINCIDE IMPRIMIR EN PANTALLA PASSWORD INCORRECTO
else { echo " <p> </p> <p style=text-align:center;> <img src=https://cdn141.picsart.com/292255026029211.png?type=webp&to=min&r=640 style=width:200px;height:220px;></p>
<p> </p> <table border=1 cellspacing=0 cellpading=0 align=center BORDER BGCOLOR=#16DFDF>
<tr align=center > <td ><font color=red><h2>¡PASSWORD INCORRECTO !</h2> <a href='exit.php' >SALIR</a> </td> </tr>
</table>"; }
}
// SI EL USUARIO NO EXISTE MOSTRAR USUARIO INCORRECTO
else { echo " <p> </p> <p style=text-align:center;> <img src=https://cdn141.picsart.com/292255026029211.png?type=webp&to=min&r=640 style=width:200px;height:220px;></p>
<p> </p> <table border=1 cellspacing=0 cellpading=0 align=center BORDER BGCOLOR=#16DFDF>
<tr align=center > <td ><font color=red><h2>¡USUARIO INCORRECTO !</h2> <a href='exit.php' >SALIR</a> </td> </tr>
</table>"; }
$stmt->close();
}
?>
Como dijimos hace un rato este script si valida al usuario lo redireccionará a un archivo llamado perfil.php pero si no se validan los datos mostrara el error detectado con la siguiente pantalla:
En caso de que el usuario ingresado sea incorrecto mostrara:
5. Creacion del script PHP/HTML para el perfil de los usuarios.
Cuando el sistema de ingreso acepte el login de algun usuario se mostrara una pagina que mostrara los datos del usuario, se llamara perfil.php
<?php
// Solo se permite el ingreso con el inicio de sesion.
session_start();
// Si el usuario no se ha logueado se le regresa al inicio.
if (!isset($_SESSION['loggedin'])) {
header('Location: login.html');
exit; }
?>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body style="background-color:hsla(0,16%,65%,0.5);">
<p style="text-align:center;"> <img src="https://www.groovylabinabox.com/wp-content/uploads/2015/06/FB_tesla.jpg" style="width:400px;height:120px;"></p>
<table BORDER BGCOLOR="#00FF00" border="2" cellpadding="15" cellspacing="2" width="400" align="center">
<tr><td align="center">
<a><h2> INGRESÓ A LA BASE DE DATOS DE TECNOCIENCIA PERÚ</h2></a>
</td></tr>
</tr>
</table>
<table border="2" cellpadding="15" cellspacing="2" width="400" align="center">
<tr BORDER BGCOLOR="#F07F54"><td align="center">
<h2> Bienvenido Usuario : <?=$_SESSION['name']?> <p> Dni : <?=$_SESSION['dni']?> </p> </h2></td>
<tr BORDER BGCOLOR="#00fff0"><td align="center">
<a href='exit.php'>SALIR</a>
</td></tr>
</tr>
</table>
</body>
</html>
y presentara el siguiente aspecto:
Finalmente el script que nos permite destruir la sesión y salir del sistema de forma segura:
6. Script PHP para cerrar sesión.
El archivo para el cierre de la sesión de usuarios y que nos redirigira a la pantalla de login:
<?php
session_start();
session_destroy();
// Redirect to the login page:
header('Location: login.html');
?>Resumen del sistema LOGIN PHP/MySQLi
Como podemos ver nuestro sistema consta de 6 archivos en total:
Puedes descargarlos todos en un solo archivo winrar desde este LINK:
Eso ha sido todo amigos en nuestro post: “PHP LOGIN a MySQli inicio de sesión seguro”.
Para complementar esta información te recomiendo que leas el siguiente post donde aprendernos a a insertar registros a una base de datos desde un formulario PHP con Mysql:
Como insertar registros en una base de datos Mysql desde PHP.
SI nuestro trabajo te sirvió de ayuda recuerda que una manera muy sencilla de apoyarnos es visitando la publicidad de nuestro post. Gracias !
Recuerda también que puedes visitar todas las entradas de nuestro blog en:
https://www.tecnocienciaperu.com/blog/
También puedes visitar nuestro canal de youtube en:
Hola !! Muchas gracias por tu aporte
Tengo una duda, he creado una base de datos llamada registro con la misma tabla y mismos campos, pero no consigo conectar la base de datos !! al abrir el navegador, me sale que no la ha encontrado
Not Found
The requested resource /perfil.php was not found on this server.
Me puedes decir cuál es el problema, por favor
Mil gracias
Hola David,
revisa que estés colocando tu usuario y contraseña para acceder a tu base de datos.
cuéntanos si lo resolviste.
Espero que tengas suerte saludos.