Un captcha es una forma de identificar a un usuario, ya sea humano o no. Un captcha se crea con la ayuda de combinar letras y dígitos. asegura que el usuario que intenta acceder a la plataforma es un humano. Entonces, sin perder el tiempo, comencemos.
Aplicación de Captcha:
- Autenticación de formulario: para iniciar sesión y registrarse, se puede usar para garantizar que un usuario final sea humano.
- Prevención de registros falsos: con el captcha podemos evitar que los bots creen una cuenta en un sistema.
- Prevención de comentarios falsos: de esta manera, el bot no podría hacer comentarios en un sistema,
- NetBanking e institutos financieros: para garantizar que la autenticación solo la realicen humanos y de esta manera se pueda evitar la manipulación de transacciones.
Nota: Captcha también puede proteger de algunos ataques automatizados.
Ejemplo: Primero, crea una sección para Captcha con HTML. El siguiente código generará un diseño para un captcha y, desde el archivo CSS, agregaremos estilo y, al hacer clic en la imagen (actualizar), generaremos un nuevo captcha llamando al método generar() desde JavaScript.
- índice.html
HTML
<!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"> <link rel="stylesheet" href="captcha.css"> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity= "sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <script src="captcha.js"></script> </head> <body onload="generate()"> <div id="user-input" class="inline"> <input type="text" id="submit" placeholder="Captcha code" /> </div> <div class="inline" onclick="generate()"> <i class="fas fa-sync"></i> </div> <div id="image" class="inline" selectable="False"> </div> <input type="submit" id="btn" onclick="printmsg()" /> <p id="key"></p> </body> </html>
captcha.css: Para diseñar nuestro cuadro de captcha y botón de envío.
CSS
#image{
margin-top: 10px;
box-shadow: 5px 5px 5px 5px gray;
width: 60px;;
padding: 20px;
font-weight: 400;
padding-bottom: 0px;
height: 40px;
user-select: none;
text-decoration:line-through;
font-style: italic;
font-size: x-large;
border: red 2px solid;
margin-left: 10px;
}
#user-input{
box-shadow: 5px 5px 5px 5px gray;
width:auto;
margin-right: 10px;
padding: 10px;
padding-bottom: 0px;
height: 40px;
border: red 0px solid;
}
input{
border:1px black solid;
}
.inline{
display:inline-block;
}
#btn{
box-shadow: 5px 5px 5px grey;
color: aqua;
margin: 10px;
background-color: brown;
}
captcha.js: este archivo verificará el captcha ingresado con el captcha generado cuando el usuario haga clic en el botón Enviar. Y cuando se hace clic en el ícono de actualización, se volverá a generar el Captcha.
Javascript
var captcha;
function generate() {
// Clear old input
document.getElementById("submit").value = "";
// Access the element to store
// the generated captcha
captcha = document.getElementById("image");
var uniquechar = "";
const randomchar =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// Generate captcha for length of
// 5 with random character
for (let i = 1; i < 5; i++) {
uniquechar += randomchar.charAt(
Math.random() * randomchar.length)
}
// Store generated input
captcha.innerHTML = uniquechar;
}
function printmsg() {
const usr_input = document
.getElementById("submit").value;
// Check whether the input is equal
// to generated captcha or not
if (usr_input == captcha.innerHTML) {
var s = document.getElementById("key")
.innerHTML = "Matched";
generate();
}
else {
var s = document.getElementById("key")
.innerHTML = "not Matched";
generate();
}
}
Producción:
Generador de Captcha con HTML SIMPLE, CSS y JS
Publicación traducida automáticamente
Artículo escrito por jeetpurohit989 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA