یک CAPTCHA ریاضی ساده برای فرم های خود با PHP و جاوا اسکریپت ایجاد کنید

در این آموزش جدید ما یک رویکرد ساده برای کاهش هرزنامه از ارسال فرم ها را مورد بحث قرار خواهیم داد. این تکنیک از PHP و جاوا اسکریپت برای جلوگیری از ارسال فرم استفاده می کند تا زمانی که کاربر پاسخ صحیح را به یک ریاضی ساده ارائه کند. CAPTCHA.

در اینجا یک ویدیوی سریع وجود دارد که عملکرد مورد انتظار را نشان می دهد:

مهم است که توجه داشته باشید که این فقط یک روش ساده و سریع است که یک لایه حفاظتی اضافی اضافه می کند و نباید جایگزین راه حل های ظریف تر مانند دیگر شود. reCAPTCHA هر زمان که قابل اجرا باشند. اگر با وردپرس آشنایی دارید فرم تماس 7 (CF7) افزونه، ممکن است از قبل آن را بدانید quiz برچسبی که عملکرد مشابهی را ارائه می دهد.

CAPTCHA چیست؟

CAPTCHA مخفف تورینگ عمومی کاملاً خودکار تست برای گفتن کامپیوترها و انسان جدا. شما آنها را به شکل تصاویر یا صداهای تحریف شده، آزمون‌هایی برای یافتن اشیاء درون عکس‌ها، یا (در مورد reCaptcha گوگل) یک چک باکس برای اثبات اینکه ربات نیستید، می‌شناسید.

مطمئناً، آنها می توانند آزاردهنده باشند، اما آنها یک شر ضروری در مبارزه با هرزنامه هستند. ما با درخواست از کاربران برای پاسخ به یک مسابقه ریاضی ساده، CAPTCHA خود را ایجاد خواهیم کرد.

فرم را بسازید

برای اهداف این نمایش، به یک فرم نیاز داریم. بیایید یک را ایجاد کنیم فرم بوت استرپ 5 با استفاده از سیستم شبکه و چند کلاس کاربردی. اگر ترجیح می دهید از Bootstrap استفاده نکنید، نگران نباشید. هدف اصلی این آموزش نشان دادن نحوه ایجاد یک فرم نیست، بلکه نشان دادن چگونگی محافظت از آن بدون توجه به نحوه ساخت آن است.

فرم ما اینجاست:

<br />

تا اینجا از نظر بصری خوب به نظر می رسد، اما هیچ روش محافظتی برای ایمیل های اسپم ندارد. یک ربات به راحتی می تواند فیلدهای خود را پر کند و اطلاعات ناخواسته را برای ما ارسال کند.

CAPTCHA ریاضی را اضافه کنید

برای جلوگیری از این امر تا حد امکان، ما یک CAPTCHA ریاضی ساده خواهیم ساخت. برای ساختن CAPTCHA، می‌توانیم از هر نوع زبان سمت سرور یا حتی جاوا اسکریپت سمت کلاینت استفاده کنیم. در مورد ما، ما با PHP پیش خواهیم رفت.

پردازش داده های فرم پس از ارسال خارج از محدوده این آموزش است

در اینجا مراحلی وجود دارد که ما دنبال خواهیم کرد:

1. سند PHP را راه اندازی کنید

در یک سند جدید PHP، به لطف PHP دو عدد تصادفی بین 0 تا 300 تولید می کنیم. rand() عملکرد. در بارگذاری صفحه، این اعداد تقریباً به طور قطع تغییر خواهند کرد.

<?php
$min  = 1;
$max  = 300;
$num1 = rand( $min, $max );
$num2 = rand( $min, $max );
$sum  = $num1 + $num2;
?>

در زیر این می‌توانیم ساختار صفحه و نشانه‌گذاری HTML فرم خود را دقیقاً همانطور که قبلاً ایجاد کرده‌ایم اضافه کنیم.

2. ورودی فرم جدید ایجاد کنید

اکنون یک ورودی متن جدید ایجاد می کنیم که کاربر باید مجموع این دو عدد را پر کند.

<label for="quiz" class="col-sm-3 col-form-label">
    <?php echo $num1 . '+' . $num2; ?>?
</label>
<div class="col-sm-9">
    <input type="text" class="form-control quiz-control" id="quiz">
</div>

3. دکمه ارسال را به روز کنید

به طور پیش فرض، دکمه ارسال با استفاده از غیرفعال می شود disabled صفت.

ما همچنین از نتیجه مورد انتظار عبور خواهیم کرد $num1 + $num2 به data-res ویژگی دکمه ارسال برای امنیت بهتر، می‌توانیم شماره هدف را نیز در یک الگو قرار دهیم تا حدس زدن آن برای ربات دشوار شود.

<div class="col-md-6">
    <button data-res="<?php echo $sum; ?>" type="submit" class="btn btn-dark w-100 fw-bold" disabled>Send</button>
</div>

4. پاسخ با استفاده از جاوا اسکریپت را بررسی کنید

هر بار که کاربر مقدار فیلد آزمون را تعیین می کند، ما از جاوا اسکریپت برای ارزیابی پاسخ او در مقایسه با پاسخ مورد انتظار استفاده می کنیم. اگر هر دو مطابقت داشته باشند، آن را حذف می کنیم disabled ویژگی از دکمه ارسال، در غیر این صورت دکمه غیر فعال می ماند.

const submitButton = document.querySelector('[type="submit"]');
const quizInput = document.querySelector(".quiz-control");
quizInput.addEventListener("input", function(e) {
	const res = submitButton.getAttribute("data-res");
	if ( this.value == res ) {
		submitButton.removeAttribute("disabled");
	} else {
		submitButton.setAttribute("disabled", "");
	}
});

5. فرم تمام شده

در اینجا نحوه عملکرد فرم ما پس از این تغییرات آمده است:

کد کامل را می توانید از این قسمت دانلود کنید مخزن GitHub. فقط یک فایل PHP وجود دارد. برای باز کردن پروژه، از یک سرور محلی مانند استفاده کنید XAMPP یا لاراگون.

PHP

نحوه اجرای یک فایل PHP

سجل سونی

نتیجه

امیدوارم از این تمرین کوچک لذت برده باشید، جایی که ما یک رویکرد سریع برای کم کردن هرزنامه‌های فرم‌هایمان را طی کردیم.

مجدداً، به طور کلی، برای نتایج بهتر، توصیه می شود از رویکردهای مؤثرتری مانند reCAPTCHA استفاده کنید. با این حال، در مواردی که به هر دلیلی امکان پذیر نیست، می توانید راه حلی را که در اینجا بحث کردیم را امتحان کنید. حتی می‌توانید با استفاده از انواع دیگر CAPTCHA و آزمون‌ها آن را زیباتر کنید. به عنوان مثال، می توانید مجموعه ای از 10 سوال به همراه پاسخ های مورد انتظار آنها داشته باشید. سپس، یکی از آن سوالات را به صورت تصادفی در قسمت جلویی ارائه دهید و پاسخ کاربر را به همان روشی که در مسابقه ریاضی انجام دادیم رسیدگی کنید.

شایان ذکر است که اگر عاشق بوت استرپ هستید و می خواهید به جای مرورگر پیش فرض اعتبار فرم سفارشی را به کاربران ارائه دهید، خوش شانس هستید! بوت استرپ چنین ارائه می دهد پیاده سازی. در صورت تمایل این مثال را گسترش دهید!

در آخر، اگر می‌خواهید بدانید چگونه پیام‌های اسپم ارسال شده از طریق لینک‌های ایمیل را کاهش دهید، نگاهی به آموزش دیگری بیندازید که در آن دو تکنیک مؤثر را مورد بحث قرار می‌دهیم.

مثل همیشه، خیلی ممنون که خواندید!