Este proyecto tiene un sistema de creación de código Captcha básico con validación, muy útil para que el usuario tenga que ingresar y verificar el código Captcha para iniciar sesión o registrar una nueva cuenta en la base de datos.
Si ingresas mal el código CAPTCHA te saldrá un mensaje de error y se limpiará el formulario para que vuelvas a intentar.
Para iniciar sesión es necesario que el usuario se encuentre en la base de datos, ingrese bien su contraseña y el código de la imagen.
Para registrar un nuevo usuario es necesario ingresar bien los datos y el código CAPTCHA.
Si el usuario no esta registrado en la base de datos e ingresaste bien el código CAPTCHA entonces el usuario se podrá registrar.
El CAPTCHA se autogenera por si solo de acuerdo a una cadena de caracteres fijadas en el código del proyecto.
Al principio pensé hacer el proyecto con el reCAPTCHA v3, pero mejor hay que empezar desde lo más básico.
Este proyecto es un poquito pesado.
Creamos nuestra carpeta principal de archivos VaidrollTeamLoginHTML5.
Dentro de la carpeta creamos la carpeta img y js
La carpeta img tendrá 2 imágenes (un logo y el fondo para el código CAPTCHA).
La carpeta js tendrá 3 archivos (BotonCambiaFormularios.js, reCAPTCHALogin.js y reCAPTCHARegistrar.js)
En la carpeta principal creamos los siguientes archivos conexion.php, index.html, login.css, login.php y registrar.php.
Creamos nuestra base de datos loginvaidroll5.
create database loginvaidroll5; use loginvaidroll5; create table login ( usu varchar(50), pass varchar(50) );
Continuamos con el código de cada archivo.
conexión.php
<?php $conn = new mysqli("localhost","root","","loginvaidroll5"); if($conn->connect_errno) { echo "No hay conexión: (" . $conn->connect_errno . ") " . $conn->connect_error; } ?>
index.html
El diseño es similar al proyecto de login con opción de recuperar password por lo que puede que tenga uno que otro código innecesario.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin5</title> <link rel="stylesheet" href="login.css"> <script src="js/reCAPTCHALogin.js"></script> <script src="js/reCAPTCHARegistrar.js"></script> </head> <body> <div class="cajafuera"> <div class="formulariocaja"> <div class="botondeintercambiar"> <div id="btnvai"></div> <button type="button" class="botoncambiarcaja" onclick="loginvai()" id="vaibtnlogin">Login</button> <button type="button" class="botoncambiarcaja" onclick="registrarvai()" id="vaibtnregistrar">Registrar</button> </div> <!--Formulario para el login --> <form id="frmlogin" class="grupo-entradas" method="POST" action="login.php"> <div class="logovai"><img src="img/logo.png"></div> <b>👤 Usuario</b> <input type="text" class="cajaentradatexto" name="txtusuario" id="txtusuario" required> <b>🔒 Password</b> <input type="password" class="cajaentradatexto" name="txtpassword" required> <div><b>❯ Verificación</b></div> <input type="text" class="cajaentradarecaptcha" id="txtrecaptcha" required> <div id="vericodigovai" onclick="crearrecaptcha()" class="fondorecaptcha"> </div> <!--Visita VaidrollTeam.blogspot.com para más códigos --> <button type="submit" class="botonenviar" name="btnloginx">Iniciar sesión</button> </form> <!--Formulario para el login --> <!--Formulario para registrar --> <form id="frmregistrar" class="grupo-entradas" method="POST" action="registrar.php"> <div class="logovai"><img src="img/logo.png"></div> <b>👤 Usuario</b> <input type="text" class="cajaentradatexto" name="txtusuario2" id="txtusuario2" required> <b>🔒 Password</b> <input type="password" class="cajaentradatexto" required name="txtpassword"> <div><b>❯ Verificación</b></div> <input type="text" class="cajaentradarecaptcha" id="txtrecaptcha2" required> <div id="vericodigovai2" onclick="crearrecaptcha2()" class="fondorecaptcha"> </div> <button type="submit" class="botonenviar" name="btnregistrarx" id="btnregistrarx">Registrar</button> </form> <!--Formulario para registrar --> </div> </div> <script src="js/BotonCambiaFormularios.js"></script> </body> </html>
login.css
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
opacity: 1;
}
body
{
margin:0;
padding:0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.pagprincipal
{
width: 100%;
height: 100%;
position: relative;
margin: 10% auto;
padding: 2px;
overflow: hidden;
text-align:center;
}
h1
{
font-size:40px;
}
.cajafuera
{
background-image: linear-gradient(145deg, #ffe267 0, #ffd155 16.67%, #f7bc3e 33.33%, #eaa320 50%, #dd8a00 66.67%, #d47400 83.33%, #ce6100 100%);
width: 100vw;
height: 100vh;
display: grid;
}
.formulariocaja
{
width: 400px;
height: 550px;
position: relative;
margin: auto;
background: #f2f2f2;
padding: 2px;
overflow: hidden;
border: 2px solid black;
border-radius: 2px;
}
.botondeintercambiar{
width: 240px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 6px 0.5px black;
border-radius: 30px;
}
.botoncambiarcaja{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
font-weight: bold;
font-size:16px;
}
#btnvai{
top: 0;
left: 0;
position: absolute;
width: 130px;
height: 100%;
background-color: #1C62C1;
border-radius: 30px;
transition: .5s;
}
.logovai
{
text-align: center;
}
.logovai img
{
width: 120px;
}
.grupo-entradas{
position: absolute;
width: 280px;
transition: .5s;
}
.cajaentradatexto{
width: 100%;
padding: 8px 10px;
margin: 10px 0 10px 0;
font-size:16px;
border-radius:5px;
border:1px solid black;
}
.botonenviar{
width: 100%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin-top: 10px;
border: 0;
outline: none;
border-radius: 10px;
border:1px solid black;
font-size:16px;
color:white;
background-color: #1C62C1;
}
.checkboxvai{
margin: 5px 10px 24px 0;
text-align:right;
font-size:12px;
}
#frmlogin{
left: 50px;
}
#frmregistrar{
left: 450px;
}
a
{
text-decoration-line: underline;
cursor:pointer;
}
table
{
text-align:center;
width: 98%;
border-collapse: collapse;
border: 3px solid black;
margin:50px auto;
background: white;
}
th
{
background: steelblue;
height: 40px;
font-weight: lighter;
text-shadow: 0 1px 0 #38678f;
color: white;
border: 1px solid #38678f;
box-shadow: inset 0px 1px 2px #568ebd;
transition: all 0.2s;
font-size: 18px;
}
tr
{
border-bottom: 1px solid #cccccc;
width:100%;
}
td
{
border: 1px solid #cccccc;
padding: 10px;
transition: all 0.2s;
font-size: 14px;
}
.txtrecuperar
{
font-size: 14px;
text-align:center;
width: 100px;
display: inline-block;
background-color: #1C62C1;
padding: 6px 10px;
border-radius:5px;
color:white;
border:1px solid black;
cursor:pointer;
}
.cajaentradarecaptcha
{
width: 70%;
padding: 8px 10px;
margin: 10px 0 10px 0;
font-size:16px;
border-radius:5px;
border:1px solid black;
}
.fondorecaptcha
{
border: 2px solid black;
padding: 10px;
font-size:100%;
background: url(img/fondo.jpg) top left;
background-size: 100%;
display: inline;
cursor: pointer;
}
login.php
<?php include('conexion.php'); $usu = $_POST["txtusuario"]; $pass = $_POST["txtpassword"]; //Para iniciar sesión $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usu ='$usu' and pass = '$pass'"); $nr = mysqli_num_rows($queryusuario); if ($nr == 1) { echo "<script> alert('Usuario logueado.');window.location= 'index.html' </script>"; } else { echo "<script> alert('Usuario o contraseña incorrecto.');window.location= 'index.html' </script>"; } /*VaidrollTeam*/ ?>
registrar.php
<?php //Para registrar include('conexion.php'); $usu = $_POST["txtusuario2"]; $pass = $_POST["txtpassword"]; $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usu = '$usu'"); $nr = mysqli_num_rows($queryusuario); if ($nr == 0) { $queryregistrar = "INSERT INTO login(usu,pass) values ('$usu','$pass')"; if(mysqli_query($conn,$queryregistrar)) { echo "<script> alert('Usuario registrado: $usu');window.location= 'index.html' </script>"; } else { echo "Error: " .$queryregistrar."<br>".mysql_error($conn); } } else { echo "<script> alert('No puedes registrar este usuario: $usu');window.location= 'index.html' </script>"; } /*VaidrollTeam*/ ?>
BotonCambiaFormularios.js
Esto es para que funcione el botón de cambiar formularios entre el login y el registro de usuarios al ser presionado.
var x = document.getElementById("frmlogin"); var y = document.getElementById("frmregistrar"); var z = document.getElementById("btnvai"); var textcolor1=document.getElementById("vaibtnlogin"); var textcolor2=document.getElementById("vaibtnregistrar"); textcolor1.style.color="white"; textcolor2.style.color="black"; function registrarvai() { x.style.left = "-400px"; y.style.left = "50px"; z.style.left = "110px"; textcolor1.style.color="black"; textcolor2.style.color="white"; } function loginvai() { x.style.left = "50px"; y.style.left = "450px"; z.style.left = "0"; textcolor1.style.color="white"; textcolor2.style.color="black"; } window.onload=function() { crearrecaptcha(); crearrecaptcha2(); };
El siguiente código es para crear y verificar el código CAPTCHA antes de enviar los datos a la hoja PHP, puedes modificar la cantidad de texto que quieres que se muestre, los números, las letras, y el mensaje que aparecerá cuando el usuario falle con el código.
//Antes de enviar los datos del formulario debemos de validar el CAPTCHA document.addEventListener("DOMContentLoaded", function() { document.getElementById("frmlogin").addEventListener('submit', revisarform); }); function revisarform(evento) { evento.preventDefault(); //Si el CAPTCHA es el mismo de la imagen entonces enviará los datos al login.php if(validarrecaptcha()===true) { this.submit(); } else //Caso contrario limpiará el formulario { document.getElementById("frmlogin").reset(); } } //Creación del CAPTCHA var codvai1=''; function crearrecaptcha() { codvai1=''; var cantidadtexto=4; var vericodigovai=document.getElementById("vericodigovai"); vericodigovai.value=''; var letrasynumeros=new Array(0,1,2,3,4,5,6,7,8,9,'A','B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); for(var i=0;i<cantidadtexto;i++) { var x=Math.floor(Math.random()*34); codvai1+=letrasynumeros[x]; } if(codvai1.length!=cantidadtexto) { crearrecaptcha(); } vericodigovai.innerHTML=codvai1; } //Validación del CAPTCHA function validarrecaptcha() { var codingresado=document.getElementById("txtrecaptcha").value.toUpperCase(); if(codingresado!=codvai1) { alert("reCAPTCHA Incorrecto, intenta de nuevo"); crearrecaptcha(); document.getElementById("txtusuario").focus(); return false; }else { return true; } }
reCAPTCHARegistrar.js
//Antes de enviar los datos del formulario debemos de validar el CAPTCHA document.addEventListener("DOMContentLoaded", function() { document.getElementById("frmregistrar").addEventListener('submit', revisarform2); }); function revisarform2(evento) { evento.preventDefault(); //Si el CAPTCHA es el mismo de la imagen entonces enviará los datos a registrar.php if(validarrecaptcha2()===true) { this.submit(); } else //Caso contrario limpiará el formulario { document.getElementById("frmregistrar").reset(); } } //Creación del CAPTCHA var codvai2=''; function crearrecaptcha2() { codvai2=''; var cantidadtexto=4; var vericodigovai=document.getElementById("vericodigovai2"); vericodigovai.value=''; var letrasynumeros=new Array(0,1,2,3,4,5,6,7,8,9,'A','B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); for(var i=0;i<cantidadtexto;i++) { var x=Math.floor(Math.random()*34); codvai2+=letrasynumeros[x]; } if(codvai2.length!=cantidadtexto) { crearrecaptcha2(); } vericodigovai.innerHTML=codvai2; } //Validación del CAPTCHA function validarrecaptcha2() { var codingresado=document.getElementById("txtrecaptcha2").value.toUpperCase(); if(codingresado!=codvai2) { alert("reCAPTCHA Incorrecto, intenta de nuevo"); crearrecaptcha2(); document.getElementById("txtusuario2").focus(); return false; }else { return true; } }
Listo.
