[COMO] Crear un falso CAPTCHA exDebian
  1. Inicio
  2. Foros
  3. General
  4. Otros temas (off topic)
  5. [COMO] Crear un falso CAPTCHA

[COMO] Crear un falso CAPTCHA

1 envío / 0 nuevos
Inicie sesión o regístrese para comentar
#1 Vie, 07/01/2022 - 14:31
PabliNet
Imagen de PabliNet
Desconectado/a
se unió: 28/10/16

[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">&#x27F3;</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">&nbsp;</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;
}