استفاده از ای‌جکس در ساخت یک «کپچا»ی ساده

28 فروردین 1399

با Captcha یا همان کد امنیتی که در فرم‌ها به کار می‌رود آشنا هستیم. می‌خواهیم - به ساده‌ترین شکل - به زبان php «کد امنیتی» بسازیم و توسط جی‌کوئری و ajax آن را برای کاربر نمایش داده یا رفرش کنیم. در قسمت «دمو»ی این مقاله خروجی کار را می‌توانید مشاهده نمایید.

مراحل کار

الف) صفحه تولید کد امنیتی
ب) صفحه نمایش فرم و کد امنیتی
ج) صفحه اعتبارسنجی فرم

الف) صفحه تولید کد امنیتی

captcha.php

<?php
session_start();
header("content-type: text/html; charset=utf-8");
$captcha_code 	= rand(1000,9999);
$_SESSION['code']	= $captcha_code;

$font_size		= 15;
$image_width		= 70;
$image_height	= 30;

$image = imagecreate($image_width,$image_height);
imagecolorallocate($image,220,220,220);
$text_color=  imagecolorallocate($image,0,0,0);
imagettftext($image, $font_size,0,10,22, $text_color,'font.ttf', $captcha_code);
imagejpeg($image,"file.jpg",40);
echo "file.jpg?t=".time();
?>

در مثال فوق، دستورات فایل captcha.php به ما امکان می‌دهند یک عدد تصادفی ایجاد کرده و آن را به تصویر تبدیل کنیم. به این صورت که:
یک Session ایجاد کرده و رقم کپچا را در آن ذخیره می‌کنیم.
توسط تابع imagecreate تصویری با طول و عرض مشخص می‌سازیم.
به کمک imagecolorallocate رنگ پس‌زمینه و فونت را تعیین می‌کنیم.
کار تابع imagettftext این است که متن را به عکس تبدیل می‌کند.
و در نهایت imagejpeg تصویر را ذخیره می‌کند.

ب) صفحه نمایش فرم و کد امنیتی

کاری که الان باید انجام دهیم، این است که تصویر ساخته شده در بالا را توسط ای‌جکس فراخوانی کرده و در تگ img قرار دهیم.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>کد امنیتی captcha</title>
	<script src="jquery.min.js"></script>
	<style>
	.fake-input { position: relative; }
	.fake-input input { height: 35px; text-align:right }
	.fake-input img { position: absolute; top: 5px; left: 5px; float:left;cursor:pointer }
	</style>
</head>
<body>

	<div class="fake-input">
		<input id="input_captcha" type="text" placeholder="کد امنیتی" maxlength="4" />
		<img class="image_captch" alt="CAPTCHA code" onClick="captcha()" style="" /> 
	</div>			  
	<button onClick="submit()"> ارسال </button>

	<script>
	$(document).ready(function(){
		captcha();
	});

	function submit () {

		var captch 	= $("#input_captcha").val();

		$.ajax({
			type: "POST",
			data: {
				captcha:captch
			},
			dataType: "json",
			url: "submit.php",
			success: function(res) {
				alert(res.message);
				captcha();
			}
		});
	}

	function captcha() {

		$.ajax({
			type: "POST",
			url: "captcha.php",
			success: function(res) {
				$(".image_captch").prop('src',res);
			}
		});
	}	
	</script>
    
</body>
</html>

در خطوط فوق، المان‌های img ، input و button را برای نمایش و ورود کد امنیتی در نظر گرفته‌ایم. همچنین تابع جاوااسکریپت captcha کد امنیتی ساخته شده در فایل captcha.php را برای ما نمایش می‌دهد. در پایان نیز توسط تابع submit و فایل submit.php کپچا را اعتبارسنجی می‌کنیم.

ج) صفحه اعتبارسنجی فرم

submit.php

<?php
session_start();

$captcha 	= $_POST['captcha'];
$code 		= $_SESSION['code'];

if($code == $captcha) 
	$message = "کد امنیتی درست است";
else $message = "کد امنیتی اشتباه است";

$json = array();
$json['message'] = $message;
echo json_encode($json);
?>

در این مرحله مقدار Session را که در فایل captcha.php تولید کرده بودیم و نیز کدی را که از کاربر دریافت کرده‌ایم، با هم مقایسه کرده و نتیجه را نمایش می‌دهیم.

استفاده از ای‌جکس در ساخت یک «کپچا»ی ساده

مراحل کار

دیدگاه ها