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.
Creamos nuestra base de datos la que llamaremos “pruebas“:
CREATE DATABASE pruebas;Ingresamos a la base de datos para crear la tabla usuarios:
use pruebas;Ahora lo 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 tendrá 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
define('DB_SERVER', "localhost");
define('DB_USERNAME', "TU_USUARIO");
define('DB_PASSWORD', "TU_CLAVE");
define('DB_DATABASE', "pruebas");
$conn=mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
A continuación crearemos el Script PHP para agregar usuarios a la base de datos, sera un formulario y lo llamaremos registro.php
<HTML>
<style>
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
table, th, td {
border:1px solid black;
}
</style>
<head>
<meta charset="utf-8">
<title>Registrar</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">
<table style="auto" >
<tr>
<td>DNI</td>
<td><p><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" autocomplete="off"/>
</strong></p></td>
</tr>
<tr>
<td>USUARIO</td>
<td><input type='text' maxlength="12" name="usuario" value="" placeholder="USUARIO" autocomplete='off' /></td>
</tr>
<tr>
<td>CLAVE</td>
<td><input type='text' maxlength="10" name="password" value="" placeholder="PASSWORD" autocomplete='off' class='secure'/></td>
</tr>
</table>
<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
<!DOCTYPE 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="autenticar.php" method="post">
<img src="gif/login.jpg" style="width:204px;height:104px;">
<h1>Login Seguro </h1>
<div class="login-form">
<div class="control-group">
<input type="text" name="el_usuario" class="login-field" value="" placeholder="username" maxlength="12" id="login-name" required>
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
</div>
<div class="control-group">
<input type="password" name="la_clave" class="login-field" value="" placeholder="password" maxlength="10" 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>
</form>
</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['el_usuario'], $_POST['la_clave']) )
{
exit('Por favor llenar todos los campos!');
}
//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['el_usuario']);
$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(password_verify( $_POST['la_clave'],$clave))
{
// SI COINICIDEN AMBAS CONTRASEÑAS SE INICIA LA SESION Y SE LE DA LA BIENCENIDA AL USUARIO
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['el_usuario'];
$_SESSION['dni'] = $dni;
//echo 'BIENVENIDO : ' . $_SESSION['name'] .' CON TU DNI NUMERO : '. $_SESSION['dni'] . '!';
header('Location: wellcome.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 verifica que el usuario y la contraseña ingresados son correctos 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 wellcome.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; }
?>
<?php
$name=$_SESSION['name'];
$dni=$_SESSION['dni'];
?>
<!DOCTYPE html>
<html>
<style>
div { border: 0px solid; }
body {
margin: 0 auto;
}
#contenedor {
width: 900px;
margin: 0 auto;
align:center;
margin: auto;
width: 50%;
padding: 10px;
}
h1 {text-align:center;}
h2 {text-align:center;}
h3 {text-align:center;}
h4 {text-align:center;}
h3::after{
display: block;
content: '';
margin-top: 10px;
border-bottom: 1px solid #000;
}
#resp-table {
width: 100%;
display: table;
}
#resp-table-body{
display: table-row-group;
}
.resp-table-row{
display: table-row;
}
.table-body-cell-titulo{
display: table-cell;
border: 1px solid #dddddd;
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
background-color: #EBEBEB;
text-align: center;
}
.table-body-cell{
display: table-cell;
border: 1px solid #dddddd;
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
text-align: center;
}
.center-div-mks {
margin: 0 auto;
align:center;
margin: auto;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid #dddddd;
}
</style>
<body style="background: #F0F0F0">
<div style="grid-area: header; height: 55px"></div>
<div id="contenedor" style=" box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); margin-bottom: 20px !important; background-color: #fff !important; width: 800px; height: 550px;">
<h1 style="background-color:powderblue;">Bienvenido Usuario</h1>
<h3>Datos Personales:</h3>
<div id="resp-table">
<div id="resp-table-body">
<div class="resp-table-row">
<div class="table-body-cell-titulo">
Nombre :
</div>
<div class="table-body-cell-titulo">
DNI :
</div>
<div class="table-body-cell-titulo">
DATO 3
</div>
<div class="table-body-cell-titulo">
DATO 4
</div>
</div>
<div class="resp-table-row">
<div class="table-body-cell">
<?php echo "$name"; ?>
</div>
<div class="table-body-cell">
<?php echo "$dni"; ?>
</div>
<div class="table-body-cell">
second row col 3
</div>
<div class="table-body-cell">
second row col 4
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div style =" text-align:center; border: 1px solid #dddddd; width: 300px; margin: 0 auto;">Fotografia:</div>
<div class ="center-div-mks"><img src="gif/login.jpg" style="width:204px;height:104px;"></div>
<br>
<div style =" text-align:center; width: 300px; margin: 0 auto;">
<button style= " margin: 5px; width: 200px; background-color: #4CAF50 " onclick="location.href='exit.php'" type="button">salir</button>
</div>
</div>
</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 y una carpeta llamada GIF donde se guardan las imágenes:
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.
Parcero desde Colomba, muchas gracias ningun video de youtube explico tan bien como vos muchas gracias felicidades y uff genial tu trabajo y tu aporte
Gracias por escribirnos amigo Juan.
Éxitos.
¡Hola y buenas tardes!
Este artículo me ha sido de mucha ayuda. He estado buscando la forma de hacer un login y ahora lo he logrado. ¡Gracias!
Gracias por escribirnos amigo Sergio.
Suerte.