[COMO] Crear un falso CAPTCHA
#1
Vie, 07/01/2022 - 14:31
[COMO] Crear un falso CAPTCHA
Formulario HTML:
<form action="./proceso.php" method="POST">
<p>CAPTCHA: <input type="text" value="<?php include 'gcaptcha.php' ?>" name="captcha" id="captcha" readonly> <a id='reload' onclick="newCaptcha()" title="Actualizar CAPTCHA">⟳</a></p>
<p>Escribe el CAPTCHA:<br>
<input type="text" name="verificar" id="verificar" value="" maxlength="6" placeholder="CAPTCHA" onkeyup="funcVerificar()" autofocus>
<span id="test"> </span></p>
<script>
const chars = '<?php $chrs = implode("", $chars); echo $chrs ?>';
function captcha() {
document.getElementById('verificar').value = '';
}
</script>
<button>Enviar</button>
</form>
Archivo de procesamiento (proceso.php):
<?php
$captcha = $_POST['captcha'];
$verificar = $_POST['verificar'];
$test = $captcha == $verificar ? 'correcto' : 'incorrecto';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>CAPTCHA: <?php echo $captcha; ?></p>
<p>Ingreso del usuario: <?php echo $verificar; ?></p>
<p>CAPTCHA <?php echo $test; ?></p>
</body>
</html>
Archivo de generación del CAPTCHA (gcaptcha.php):
<?php
$chars = [];
for ($i=48; $i <= 57; $i++) {
array_push($chars, chr($i));
}
for ($i=65; $i <= 90; $i++) {
array_push($chars, chr($i));
}
for ($i=97; $i <= 122; $i++) {
array_push($chars, chr($i));
}
$ultimo = count($chars) - 1;
$captcha = '';
for ($i=0; $i < 6; $i++) {
$captcha .= $chars[rand(i == 0 ? 11 : 0, $ultimo)];
}
echo $captcha;
?>
Script de JavaScript para actualizar el CAPTCHA:
function funcVerificar() {
const captcha = document.getElementById('captcha').value;
const verificar = document.getElementById('verificar').value;
if (isNaN(verificar)) {
document.getElementById('test').style.visibility = 'visible';
if (captcha == verificar) {
document.getElementById('test').style.borderColor = 'green';
document.getElementById('test').style.color = 'green';
document.getElementById('test').innerHTML = '\u2713';
} else {
document.getElementById('test').style.borderColor = 'red';
document.getElementById('test').style.color = 'red';
document.getElementById('test').innerHTML = '\u2717';
}
} else {
document.getElementById('test').style.borderColor = '';
document.getElementById('test').style.visibility = 'hidden';
document.getElementById('test').innerHTML = 'nada';
}
if (document.getElementById('verificar').value.length < 6) {
document.getElementsByTagName('button')[0].disabled = true;
} else {
document.getElementsByTagName('button')[0].disabled = false;
}
}
function inicio() {
document.getElementById('verificar').value = '';
document.getElementById('test').style.visibility = 'hidden';
document.getElementsByTagName('button')[0].disabled = true;
document.getElementById('test').innerHTML = 'nada';
}
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function newCaptcha() {
var newcaptcha = '';
const ultimo = chars.length - 1;
for (let i = 0; i < 6; i++) {
newcaptcha += chars[rand(i === 0 ? 11 : 0, ultimo)];
}
document.getElementById('captcha').value = newcaptcha;
document.getElementById('test').style.borderColor = '';
inicio();
}
El CSS:
body {
background: white;
color: #000;
}
button, #reload {
background: darkorange;
color: white;
transition: linear background .3s;
transition: linear opacity .3s;
}
button {
padding: 5px 10px;
border: none;
font-weight: bold;
}
button:disabled {
opacity: .5;
}
button:not(button:disabled):active, #reload:active {
background-color: orange;
}
#captcha, #reload {
user-select: none;
}
#captcha {
background: none;
margin-right: 5px;
border: none;
width: 70px;
text-align: center;
}
#reload {
display: inline-block;
color: white;
border-radius: 50%;
width: 1.3em;
height: 1.3em;
text-align: center;
font-weight: bold;
cursor: pointer;
transition: background .2s;
}
#verificar {
width: 100px;
}
#test {
display: inline-block;
position: relative;
border: solid 3px rgb(0, 0, 0, 0);
border-radius: 50%;
width: 1.3em;
height: 1.3em;
text-align: center;
font-weight: bold;
}