A captcha is a way of identifying a user whether the user is human or not. A captcha is made up with the help of combining letters and digits. it ensures that the user who is trying to access the platform is a human. So without wasting the time let’s get started.
Prerequisites
Application of Captcha
- Form Authentication: For login and sign up it can be used to ensure that an end user is human.
- Preventing Fake Registrations: With the captcha, we can prevent bots from creating an account on a system.
- Preventing Fake comments: This way bot would not be able to Comment on a system,
- NetBanking and financial institutes: To ensure that Authentication is only done by humans and this way manipulation of transactions can be prevented.
Note: Captcha can protect From some Automated attacks as well.
Example: First, create a section for Captcha with HTML. The below code will generate a design for a captcha and from the CSS file we will add style and on the image(refresh) click, we will generate a new captcha by calling generate() method from JavaScript.
let captcha; function generate() {
// Clear old input
document.getElementById( "submit" ).value = "" ;
// Access the element to store
// the generated captcha
captcha = document.getElementById( "image" );
let 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) {
let s = document.getElementById( "key" )
.innerHTML = "Matched" ;
generate();
}
else {
let s = document.getElementById( "key" )
.innerHTML = "not Matched" ;
generate();
}
} |
<!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 =
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 >
|
#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;
} |
Output: