LOGIN SEGURO (contra inyección sql e intro en páginas interiores)
Básicamente tenemos 3 páginas, la de login, logout y las interiores.
La de login compara user y clave con la DB mediante sentencias preparadas (anti inyección SQL) y la función limpiar (aquí se agregaría un chequeo de longitud y de caracteres permitidos para más seguridad). Si se valida se generan 2 cokies de seguridad (arriba se les da el tiempo en segundos de vida para que la página de un time out y se cierre si permanece inactiva). El script en jquery maneja el aspecto clásico de un login (ver detalles en el código). La acción del form en echo htmlspecialchars($_SERVER['PHP_SELF']); impide una XSS al convertir cualquier etiqueta de script en sus equivalentes html
Las interiores solo se encabezan con un control de si existe la cokie de seguridad, si no existe se redirecciona al login.
La de logout es un script php que destruye la session, las cokies y el id.
Los detalles y explicaciones están como comentarios del código
La de login compara user y clave con la DB mediante sentencias preparadas (anti inyección SQL) y la función limpiar (aquí se agregaría un chequeo de longitud y de caracteres permitidos para más seguridad). Si se valida se generan 2 cokies de seguridad (arriba se les da el tiempo en segundos de vida para que la página de un time out y se cierre si permanece inactiva). El script en jquery maneja el aspecto clásico de un login (ver detalles en el código). La acción del form en echo htmlspecialchars($_SERVER['PHP_SELF']); impide una XSS al convertir cualquier etiqueta de script en sus equivalentes html
Las interiores solo se encabezan con un control de si existe la cokie de seguridad, si no existe se redirecciona al login.
La de logout es un script php que destruye la session, las cokies y el id.
Los detalles y explicaciones están como comentarios del código
*************CÓDIGO PHP EN LOGIN ANTES DE <htlm>**************
<?php
session_start(['cookie_lifetime' => 3600,]);//aquí fijo el time-out de la cookie de seguridad
include("conexion.php"); // abre la conexión a la base de datos
global $conn; //lo usamos en conexion, lo declaramos acá para no llamar siempre a $GLOBALS[]
function limpiar($data) {
$data = trim($data); //elimina de principio y final espacios, tabuladores, etc (\t \n \r \0 \v)
return $data;
}
$msg=" <br> "; // blanqueo el mensaje
if(isset($_POST['login'])){ //solo se ejecuta el bloque de php si la página viene de clicar el botón login
$user= limpiar($_POST['usuario']); //limpio el usuario y la contraseña
$password= limpiar($_POST['password']);
if(conectar()){ //conecto con db
Try{
$sqltxt = "SELECT id,nombre,nivel FROM usuarios WHERE nombre=? AND clave=?";
//"SELECT * FROM nombres WHERE nombre=? OR id=?";
$sentencia = $conn->prepare($sqltxt); //1 prepara la sentencia
$sentencia->bind_param("ss", $user,$password); //2 enlaza las variables
$sentencia->execute(); //3 ejecuta la consulta
$resultado = $sentencia->get_result(); //4 pasa el resultado a un array en cache
$n = $resultado->num_rows; //5 No de registros devueltos
if($n==0){ //6 si no hay registros.....
$msg="El usuario o password son incorrectos ";
}else{
$rs = $resultado->fetch_array(); // recupero el registro
$_SESSION["nombre"]= $rs["nombre"]; // cargo las cookie de sesion para dar bienvenida
$_SESSION["idus"]= $rs["id"]; // cargo la cookie de sesion que habilita las pag. interiores
header ("Location: tec-php-login01-prototipo-target.php");
}
$sentencia->close();
$conn->close(); // cierro conexion
}catch(Exception $e){
$msg="no se pudo encontrar los registros";
}
}else{
$msg = mysqli_error($conn); //no se puede conectar con la DB
}
} // fin logon
?>
*************JAVASCRIPT EN LOGIN EN <head> para manejo de form**************
<link href="../css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="../scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#user").val("Tu usuario"); /*están aqui por si se retrocede en el doc. */
$("#pass").val("Tu clave"); /*y se borren los valores anteriores*/
$("#guion1").css("visibility","hidden"); /*y se borran los epigrafes*/
$("#guion2").css("visibility","hidden");
});
$(document).ready(function(){
/* usuario*/
$("#user").click(function(evento){
if ($("#user").val()== "Tu usuario" ){ /*si esta la leyenda*/
$("#user").val(""); /*la borro*/
$("#guion1").css("visibility","visible"); /*aparece la leyenda chiquita*/
$("#user").css("color","#000"); /*el color de gris a negro*/
}
});
$("#user").focusout(function(evento){
if ($("#user").val().length == 0 ){ /*al perder foco si no hay nada escrito*/
$("#user").val("Tu usuario"); /*repongo la leyenda*/
$("#guion1").css("visibility","hidden"); /*desaparece la leyenda chiquita*/
$("#user").css("color","#AAA"); /*el color vuelve a gris*/
}
});
/* password*/
$("#pass").click(function(evento){
if ($("#pass").val()== "Tu clave" ){ /*si esta la leyenda todo igual que con usuario*/
$("#pass").val("");
$("#guion2").css("visibility","visible");
$("#pass").css("color","#000");
$("#pass").attr("type","password"); /*por defecto el input lo hago password asi*/
} /*queda ofuscado lo que escriba*/
});
$("#pass").focusout(function(evento){ /*al peerder foco todo igual que usuario*/
if ($("#pass").val().length == 0 ){
$("#pass").attr("type","text");
$("#pass").val("Tu clave");
$("#pass").css("color","#AAA");
$("#guion2").css("visibility","hidden");
$("#eye").css("visibility","hidden"); /* si borré el pass y le quito foco apago ojito*/
$("#eye").css("color","black"); /* lo vuelvo a negro*/
$("#eye").attr("class","fa fa-eye-slash"); /* y lo vuelvo a ojo cerrado*/
}
});
/* control del ojito*/
$("#pass").keypress(function(evento){ /* si se tipea dentro de pass aparece el ojito*/
$("#eye").css("visibility","visible");
});
$("#eye").click(function(evento){
if ($("#eye").attr("class")== "fa fa-eye-slash" ){ /*al clicar el ojo cerrado.....*/
$("#eye").css("color","orange");
$("#eye").attr("class","fa fa-eye"); /* lo abro*/
$("#pass").attr("type","text"); /* y hago visible el pass*/
}else{ /* al clicarlo abierto*/
$("#eye").css("color","black"); /* lo vuelvo a negro*/
$("#eye").attr("class","fa fa-eye-slash"); /* lo cierro*/
$("#pass").attr("type","password"); /* y hago ofusco el pass*/
}
});
/*activación desactivacion de submit*/
$("#form1").keypress(function(evento){ /* si se tipea dentro del formulario:*/
a=$("#user").val().length;
b=$("#pass").val().length;
if ((a != 0 )&& (b != 0 )&& ($("#user").val() != "Tu usuario") && ($("#pass").val() != "Tu clave")){
$("#boton").prop( "disabled", false ); /*Enable boton*/
$("#boton").css("cursor","pointer"); /* cursor de prohibido a manito*/
}else{
$("#boton").prop( "disabled", true ); /*Disable boton*/
$("#boton").css("cursor","not-allowed"); /* cursor de manito a prohibido*/
}
});
});
</script>
*************HTML EN LOGIN EN <body>, form DE ENTRADA**************
<div class="formu" >
<form id="form1" name="form1" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<div class="linea" >
<div id="guion1" class="lineachica">Tu usuario</div>
<input type="text" name="usuario" id="user" class="ingresologin" maxlength="50" value="Tu usuario" /></i>
</div>
<div class="linea" >
<div id="guion2" class="lineachica">Tu clave</div>
<input name="password" id="pass" class="ingresologin" type="text" maxlength="50" value="Tu clave" /><i id="eye" class="fa fa-eye-slash" style="visibility:hidden; color:black;"></i>
</div<
<div style=" padding-top:20px; padding-left:20px;"<
<input name="login" type="submit" value="Iniciar sesión" class="botonlogin" id="boton" disabled="true" style="cursor:not-allowed;" /> </i&>
</div>
</form>
<div id="msg" class="mensaje"><?php echo ($msg); ?></div>
</div<
*************PHP EN TARGET ANTES DE <html>**************
<?php
session_start();
if (!isset($_SESSION["idus"])) { //si el usuario no se logueó se lo redirecciona a loguin.php
header("Location: tec-php-login01-prototipo.php");
}
?>
*************PHP EN LOGOUT ANTES DE <html>**************
<?php
session_start(); //inicia la sesión a destruir
session_unset(); //borra todas las variables del array $_SESSION
session_destroy(); //borra toda la info de sesión
session_start(); //reinicia una sesión nueva
session_regenerate_id(true); //genera un nuevo id con lo cual desaparece el anterior en el server
header('location: tec-php-login01-prototipo.php'); //mando al login
?>