آموزش ساخت کپچا با جاوا اسکریپت
سلام دوستان، امروز در این مقاله، آموزش ساخت کپچا با HTML، CSS و جاوا اسکریپت را خواهید آموخت.
مهم است که توجه داشته باشید که این فقط یک روش ساده و سریع است که یک لایه حفاظتی اضافی اضافه می‌کند و نباید جایگزین راه‌حل‌های ظریف‌تر مانند reCAPTCHA باشد، شود. برای مثال اگر با افزونه فرم تماس ۷ (CF7) وردپرس آشنا هستید، ممکن است از قبل گزینه آن را بشناسید که عملکرد مشابهی را بدون نیاز به کد نویسی پیچیده در سریع ترین زمان ممکن ارائه می دهد.
CAPTCHA چیست؟
CAPTCHA مخفف عبارت Completely Automated Public Test Turing برای تشخیص کامپیوتر و انسان از یکدیگر است. شما آنها را در قالب تصاویر یا صداهای تحریف شده، آزمون هایی برای یافتن اشیاء درون عکس ها، یا مثل reCaptcha گوگل ، یک چک باکس برای اثبات اینکه ربات نیستید، خواهید شناخت.
من متاسفم که باید بگویم ، در دنیایی زندگی می کنیم که باید به ربات ثابت کنیم انسان هستیم ! مطمئناً، این فرم ها می توانند آزاردهنده باشند، اما یک گزینه ضروری در مبارزه با هرزنامه در دنیای تکنولوژی هستند. ما با درخواست از کاربران برای تایپ حروف و سپس دکمه تایید برای صحت درست بودن یا غلط بودن آن ، CAPTCHA خود را ایجاد خواهیم کرد.
یک مولد کپچا معمولاً از ۴ عنصر دکمه تأیید، ایجاد دکمه جدید، یک فیلد ورودی برای وارد کردن کد، کد کپچا در قالب تصویر تشکیل شده است.
پروژه امروز ما خروجی به صورت زیر دارد :
کدهای ساخت کپچا با جاوا اسکریپت
در ابتدا در فایل index.htm خود کدهای زیر را وارد می کنیم :
<!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>Custom Captcha | geek.with.me</title> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <header>Custom Captcha</header> <div class="captcha-area"> <div class="captcha-img"> <img src="r-bg.png" alt="Captch Background"> <span class="captcha"></span> </div> <button class="reload-btn"><i class="fas fa-redo-alt"></i></button> </div> <form action="#" class="input-area"> <input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required> <button class="check-btn">Check</button> </form> <div class="status-msg"></div> </div> <script src="scripts.js"></script> </body> </html>
تصویر مربوط به پروژه بالا با نام “r-bg” را می توانید ، از این لینک دریافت کنید.
حالا نوبت به کدهای CSS فایل Style.css می شود .
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&family=Poppins:wght@400;500;600&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::selection{
color: #fff;
background: brown;
}
body{
font-family: "Poppins", sans-serif;
min-height: 100vh;
background-color: brown;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
width: 500px;
background-color: #fff;
border-radius: 7px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.captcha-area{
padding: 20px 30px;
display: flex;
}
.wrapper header{
text-align: center;
margin-top: 20px;
color: #c03d3d;
font-size: 30px;
font-weight: bold;
}
.captcha-area .captcha-img{
height: 65px;
width: 365px;
border-radius: 7px;
position: relative;
}
.captcha-area .captcha-img img{
height: 100%;
width: 100%;
object-fit: cover;
opacity: .8;
border-radius: 7px;
}
.captcha-area .captcha-img span.captcha{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-size: 30px;
text-align: center;
letter-spacing: 10px;
font-family: 'Noto Serif', serif;
color: rgb(163, 114, 114);
font-style: italic;
opacity: .7;
}
.captcha-area .reload-btn {
width: 65px;
margin-left: 10px;
background: brown;
border: none;
color: #fff;
font-size: 18px;
border-radius: 7px;
outline: none;
cursor: pointer;
}
.captcha-area .reload-btn > *{
transition: .4s all;
}
.captcha-area .reload-btn:hover > *{
transform: rotate(45deg);
}
.wrapper form.input-area{
padding: 0 30px;
position: relative;
}
.wrapper form.input-area input{
width: 100%;
height: 50px;
border-radius: 7px;
outline: none;
border: 1px solid #ddd;
text-indent: 20px;
font-size: 20px;
transition: .4s all;
}
.wrapper form.input-area input:is(:focus, :valid){
border: 1px solid brown;
}
.wrapper form.input-area .check-btn{
position: absolute;
right: 37px;
top: 50%;
background: brown;
border: none;
color: #fff;
border-radius: 7px;
outline: none;
cursor: pointer;
transform: translateY(-50%);
width: 70px;
height: 80%;
font-size: 16px;
font-family: sans-serif;
pointer-events: none;
opacity: 0;
transition: .4s all;
}
.wrapper form.input-area input:valid + .check-btn{
opacity: 1;
pointer-events: auto;
}
.status-msg{
padding: 20px 30px;
text-align: center;
color: brown;
font-family: sans-serif;
font-size: 17px;
}
HTML، CSS در اینجا بسیار ساده هستند. بنابراین بیایید سعی کنیم قسمت جاوا اسکریپت را درک کنیم.
نوبت به کدهای مهم جاوا اسکریپ این پروژه می رسد
در کد زیر در ابتدا ما با متغیرهای Const و let مقداردهی اولیه متغیر را انجام می دهیم. سپس یک شرط برای بررسی صحت صحیح بودن یا غلط بودن متغییرهای داخل کادر ایجاد می کنیم.
const captcha = {
captcha: document.querySelector(".captcha"),
reloadBtn: document.querySelector(".reload-btn"),
inputField: document.querySelector(".input-area input"),
checkBtn: document.querySelector(".check-btn"),
statusMSG: document.querySelector(".status-msg")
}
let allCharacters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd',
'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
't', 'u', 'v', 'w', 'x', 'y', 'z', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getCaptcha() {
for (let i = 0; i < 6; i++) {
let randomCharacter = allCharacters[Math.floor(Math.random() * allCharacters.length)];
captcha.captcha.innerText += ` ${randomCharacter}`;
}
}
getCaptcha();
const removeContent = () => {
captcha.inputField.value = "";
captcha.captcha.innerText = "";
captcha.statusMSG.style.opacity = "0";
}
captcha.reloadBtn.addEventListener("click", () => {
removeContent();
getCaptcha();
});
captcha.checkBtn.addEventListener("click", e => {
e.preventDefault();
captcha.statusMSG.style.opacity = "1";
let inputVal = captcha.inputField.value.split('').join(' ');
if (inputVal == captcha.captcha.innerText) {
captcha.statusMSG.style.color = "green";
captcha.statusMSG.innerText = "Nice! You don't appear to be a robot.";
setTimeout(() => {
removeContent();
getCaptcha();
}, ۲۰۰۰);
} else {
captcha.statusMSG.style.color = "brown";
captcha.statusMSG.innerText = "Captcha not matched. Please try again!";
}
});
امیدوارم این مقاله برای شما مفید قرار گرفته شده باشد. لینک دسترسی به پروژه گیت هاب ساخت کپچا با جاوا اسکریپت از همین لینک در دسترس است.
همچنین می توانید از زبان PHP برای اجرای این تایید کپچا استفاده کنید.
اگر می‌خواهید تأیید کد کپچا را در وبسایت خود پیاده‌سازی کنید، می‌توانید از هر سرویس API بدون اجرای آن از ابتدا استفاده کنید. API بقیه موارد را مدیریت می کند.
دیدگاه ها