المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

كلنا قد مر علينا أسلوب أو أكثر من أساليب الكابتشا CAPTCHA عند إبحارنا على الشبكة. فعند التسجيل في المواقع أو طرح التعليقات، تأتينا بعض صور الكلمات أو الأحرف المقطعة والملونة. وبعض الأحيان، يتم استخدام أساليب أخرى، كعرض بعض الصور واختيار أنسب صورة للسؤال المطروح. كل هذا يتم للتحقق ما إذا كان المستخدم بشراً وليس آلةً.

رﻱكابتشا أتت بمفهوم جديد، ونقلت الكابتشا نقلة نوعية. فمع حفاظها على السبب الرئيس وهو التفريق بين البشر والآلة، ومن ثم الحماية من السخام. فهي تقوم بعرض كلمات إنجليزية مفهومة، وليس بعض الأحرف والأرقام العشوائية. والسبب وراء ذلك هو محاولة الشركة رقمنة الكتب التي كتبت قبل اختراع الحاسوب. وتحوليها إلى كتب إلكترونية يسهل أرشفتها والبحث فيها، عبر المدخلات التي يكتبها المستخدمون بصورة كابتشا.

سأقوم في هذا المقال بشرح طريقة تطبيق رﻱكابتشا باستخدام 3 طرق مختلفة. أولاً باستخدام PHP، وبعدها بتطبيق شكل مخصص ليتلائم أكثر مع شكل الموقع المراد إدراج الخدمة فيه، وأخيراً باستخدام تقنية أجاكس AJAX.

كيف تساعد رﻱكابتشا على تحويل الكتب القديمة إلى كتب رقمية؟

كلما تم حل رﻱكابتشا من المستخدم، فإنه يساعد على تحويل الكتب القديمة إلى كتب إلكترونية. وطريقة عملها سهلة. فهي تظهر صورة لكلمتين، الكلمة الأولى هي كلمة يكون قد عجز أو تضارب في تحليلها أكثر من برنامج مختلف لتحويل صور النصوص المكتوبة إلى نص رقمي OCR. والكلمة الثانية هي كلمة تكون معروفة لدى النظام تسمى كلمة التحكم أو Control Word.

عندما يتم تقديم الكلمتين على حسب ترتيب عشوائي، يُسأل المستخدم لحلها. فإذا تم مطابقة كلمة التحكم المعروفة بشكل صحيح، يفترض النظام أن الكلمة الأخرى أيضاً صحيحة ويتم تسجيلها في قاعدة البيانات والاستفادة منها مستقبلاً لتحويل المزيد من الكتب على شكل رقمي.

كيفية استخدام رﻱكابتشا

توفر مكتبة رﻱكابتشا العديد من التطبيقات والإضافات الملحقة لمعظم لغات البرمجة وتطبيقات الويب. وفي هذا المقال، سنرى بعض أمثلة استخداماتها.

قبل الشروع في تطبيق الدروس، عليك أولاً القيام بالتسجيل في الخدمة. وبعد التسجيل يجب اختيار ما إذا كنت ترغب في استخدام هذه الخدمة على نطاق واحد، أو عدة نطاقات إذا كنت مديراً لمواقع كثيرة. سيتم تزويدك بمفتاحين، المفتاح العلني Public Key ويمكن إدراجه علناً على الصفحة لطلب ملفات واجهة برمجة التطبيقات API، والمفتاح الخاص، والذي يجب عليك الاحتفاظ به سراً للتواصل مع الخادم بإحدى لغات البرمجة على الويب.

عند الانتهاء، حمّل ملف المكتبة الجاهز على PHP. وفك ضغطه، سترى ملفاً باسم recaptchalib.php وهو ما سيتم استخدامه وإدراجه في الأمثلة اللاحقة. فضلاً تأكد أن يكون في مكان سهل ليتم إدراجه بدون عناء. شخصياً، أحب إدراجه في مجلد خاص بالمكتبات أسميه includes. ولك الحرية في اختيار الأنسب.

استخدام رﻱكابتشا مع PHP

عرض

تحميل

هذا تطبيق لاستخدام رﻱكابتشا على لغة PHP. عملية إنشاءه سهلة جداً. سأبدء من منتصف الملف ومن ثم سألقي الضوء على أهم الأشياء لاحقاً.

الخطوة 1: إدراج المكتبة والمفاتيح

require_once('recaptchalib.php');

//استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey
$publickey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$privatekey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

نقوم بإدراج المكتبة بشكل عادي بواسطة require_once قبل نموذج الإدخال في HTML، ومن ثم نقوم بتسجيل المفاتيح العلنية والخاصة في متغيرات لسهولة طلبها لاحقاً من قبل البرنامج.

الخطوة 2: تعريب رسائل الخطأ في مصفوفة

$error_ar = array(
	'invalid-site-public-key' => 'المفتاح العلني للموقع غير صحيح.',
	'invalid-site-private-key' => 'المفتاح الخاص للموقع غير صحيح.',
	'invalid-request-cookie' => 'عامل التحدي للتحقق غير صحيح.',
	'incorrect-captcha-sol' => 'حل كابتشا غير صحيح.',
	'verify-params-incorrect' => 'عوامل التحقق كانت غير صحيحة.',
	'invalid-referrer' => 'المحيل غير صحيح.',
	'recaptcha-not-reachable' => 'خطأ من الخادم.'
);

قمت بتعريب بعض رسائل الأخطاء التي تظهر عند عدم التحقق من رﻱكابتشا، ووضعها في مصفوفة لاستدعائها لاحقاً.

الخطوة 3: التحقق من مدخلات رﻱكابتشا ومطابقتها

$resp = null;

if ($_POST["submit"])
{
	if (empty($_POST["name"]) || empty($_POST["recaptcha_response_field"]))
	{
		echo "بعض الحقول تركت فارغة!";
	}
	else
	{
		$resp = recaptcha_check_answer ($privatekey,
						$_SERVER["REMOTE_ADDR"],
						$_POST["recaptcha_challenge_field"],
						$_POST["recaptcha_response_field"]);

		if ($resp->is_valid)
		{
			echo "مبروك يا " . $_POST["name"] . "، لقد أجبت إجابة صحيحة!";
		}
		else
		{
			echo $error_ar[$resp->error];
		}
	}
	echo ' <a href="">إعادة المحاولة</a>.';
}

في البداية نتأكد أولاً إذا كان النموذج قد تم إرساله واستقباله في PHP عبر المتغير $_POST["submit"]. حيث هذا المتغير سيكون مسجلاً إذا تم الإرسال عبر الضغظ على زر “موافق” لأنه يحمل الخاصية name تساوي submit.

إذا تم ترك أحد الحقول فارغة، سواء الاسم عبر متغير $_POST["name"] أو حقل جواب رﻱكابتشا $_POST["recaptcha_response_field"]. سيتم إظهار رسالة توضيحية “بعض الحقول تركت فارغة!”. وإذا كانت الحقول معبئة، سيتم متابعة التحقق.

الآن، سيتم إنشاء كائن باسم $resp عبر استخدام دالة الإنشاء recaptcha_check_answer والتي تم إدراجها عبر ملف recaptchalib.php. تهتم هذه الدالة بالاتصال بخادم رﻱكابتشا والتحقق منها. تقبل عدد من المتغيرات. الأول هو المفتاح الخاص، الثاني هو عنوان IP الخاص بالمستخدم، الثالث هو حقل معرفة نوع التحدي لرﻱكابتشا، والأخير هو الجواب لتحدي رﻱكابتشا من قبل المستخدم.

بعدها نقوم بالتحقق من جواب الخادم، فإذا كان جواباً صحيحاً، سيحمل متغير is_valid في كائن $resp قيمة صحيحة true. أما إذا كان غير ذلك، فسيتم إرجاع خطأ للمستخدم وتعريبه حسب نوعه باستخدام مصفوفة التعريب التي سبق إنشاءها.

أخيراً، نقوم بعرض رابط لإعادة المحاولة، وهو عبارة عن رابط فارغ فقط لإعادة تحميل الصفحة.

الخطوة 4: عرض أو عدم عرض النموذج

<?php if (!isset($_POST["submit"])): ?>

<form action="" method="post">
	<div>
		<label for="name">* ما هو اسمك؟</label>
		<input type="text" id="name" name="name" size="30" />
	</div>

	<div dir="ltr" style="float:right;">
		<label for="recaptcha_response_field" dir="rtl">* هل أنت انسان؟</label>
		<?php echo recaptcha_get_html($publickey, $error); ?>
	</div>

	<div style="clear:right;">* كل الحقول مطلوبة!</div>

	<div><input type="submit" name="submit" class="button" value="موافق" /></div>
</form>

<?php endif; ?>

ستلاحظ في البداية السؤال عن متغير $_POST["submit"] عن ما إذا كان يحمل قيمة. فإذا لم يكن يحمل أي قيمة، فمعناه أن المستخدم يعرض النموذج لأول مرة ولم يتم إرساله من قبل. وإذا كان لا يحمل قيمة، فمعناه أن النموذج تم إرساله، لذلك سيتم إخفاءه. ما يساعدنا على معرفة ذلك هو خاصية action في عنصر النموذج form الفارغة. وهي حيلة بسيطة لإعادة تحميل نفس الصفحة عند إرسال النموذج، وبعدها يتم تسجيل المتغيرات المطلوبة والتي تم شرحها في الخطوات السابقة.

يتم إدراج رﻱكابتشا بطريقة ديناميكية عبر دالة المساعدة recaptcha_get_html والتي تعرض الشيفرة المطلوبة لعرض رﻱكابتشا وكافة ملحقاتها.

الخطوة 5: تعريب رﻱكابتشا

var RecaptchaOptions = {
	lang: 'ar',
	custom_translations : {
				visual_challenge : "احصل على تحدي مرئي",
				audio_challenge : "احصل على تحدي مسموع",
				refresh_btn : "احصل على تحدي جديد",
				instructions_visual : "اكتب الكلمتين:",
				instructions_audio : "اكتب ما تسمعه:",
				help_btn : "مساعدة",
				play_again : "إعادة تشغيل الصوت مرة أخرى",
				cant_hear_this : "تحميل الصوت بصيغة MP3",
				incorrect_try_again : "خطأ. أعد المحاولة."
				}
};

سنضيف بعض الشيفرات الخاصة بتعريب محتوى رﻱكابتشا عن طريق الجافاسكربت في أعلى الصفحة.

.recaptchatable label.recaptcha_input_area_text
{
	text-align:right !important;
	direction:rtl !important;
}

ومن ثم نضيف الشيفرات المتعلقة بالمظهر الجمالي بواسطة CSS أيضاً في الأعلى.

استخدام رﻱكابتشا بشكل مخصص

عرض

تحميل

سنرى الآن كيف يمكننا تخصيص شكل رﻱكابتشا بشكل يتلائم أكثر مع الموقع المراد إدراجه فيه. ولأنها نفس طريقة الاستخدام مع PHP، فلن يتم إعادة شرح عمل الإرسال والتحقق.

الخطوة 1: تعديل خيارات رﻱكابتشا

var RecaptchaOptions = {
	theme: 'custom',
	lang: 'ar',
	custom_theme_widget: 'recaptcha_widget',
	custom_translations : {
				visual_challenge : "احصل على تحدي مرئي",
				audio_challenge : "احصل على تحدي مسموع",
				refresh_btn : "احصل على تحدي جديد",
				instructions_visual : "اكتب الكلمتين:",
				instructions_audio : "اكتب ما تسمعه:",
				help_btn : "مساعدة",
				play_again : "إعادة تشغيل الصوت مرة أخرى",
				cant_hear_this : "تحميل الصوت بصيغة MP3",
				incorrect_try_again : "خطأ. أعد المحاولة."
				}
};

لا شيء جديد هنا، سوى خيارين، الخيار الأول theme يجب أن يحتوي على custom ومعناها التخصيص. والخيار الآخر custom_theme_widget يجب أن يحتوي على اسم المعرّف للتقسيمة التي ستحتوي على رﻱكابتشا.

الخطوة 2: عناصر التخصيص لكل جزئية

<form action="" method="post">
	<div>
		<label for="name">* ما هو اسمك؟</label>
		<input type="text" id="name" name="name" size="30" />
	</div>
	<div>
		<label for="recaptcha_response_field" dir="rtl">* هل أنت انسان؟</label>
		<div id="recaptcha_widget" style="display:none">
			<div id="recaptcha_image" style="float:right;"></div>
			<div style="clear:right;">
				<div class="recaptcha_only_if_incorrect_sol" style="color:red">خطأ الرجاء المحاولة مرة أخرى</div>
				<label for="recaptcha_response_field" class="recaptcha_only_if_image">أدخل الكلمات الموجودة في المربع:</label>
				<label for="recaptcha_response_field" class="recaptcha_only_if_audio">أدخل الأرقام التي تسمعها:</label>
				<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" dir="ltr" />
				<div><a href="javascript:Recaptcha.reload()">احصل على كابتشا آخر</a></div>
				<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">احصل على كابتشا مسموعة</a></div>
				<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">احصل على كابتشا مرئية</a></div>
				<div><a href="javascript:Recaptcha.showhelp()">مساعدة</a></div>
			</div>
			<!-- استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey -->
			<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
		</div>
		<noscript>
			<!-- استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey -->
			<iframe src="http://api.recaptcha.net/noscript?k=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" height="300" width="500" frameborder="0"></iframe><br />
			<textarea name="recaptcha_challenge_field" rows="3" cols="40" dir="ltr"></textarea>
			<input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
		</noscript>
	<div style="clear:right;">* كل الحقول مطلوبة!</div>
	<div><input type="submit" name="submit" class="button" value="موافق" /></div>
</form>

ستلاحظ إدراج العديد من التقاسيم والعناصر، وذلك لتخصيص الشكل تماماً بما يناسب الموقع الذي تريد إدراج رﻱكابتشا فيه.

التقسيمة التي ستحتوي على رﻱكابتشا والتي لها معرّف id باسم recaptcha_widget ستكون مخفية مبدأياً. وسيتم إظهارها باستخدام الجافاسكربت.

لن أتطرق إلى الشرح التفصيلي لكل عنصر منها، ولكن مجملاً، بعض هذه العناصر تظهر وتختفي بحسب طريقة رﻱكابتشا المستخدمة. فمثلاً عند التحويل إلى رﻱكابتشا مسموعة، فستختفي كلمة “احصل على كابتشا مسموعة” ويتم استبدالها بكلمة “احصل على كابتشا مرئية”.

عنصرا noscript وiframe يمكنانا من الرجوع بأمان إلى رﻱكابتشا بطريقة iframe عند عدم تفعيل الجافاسكربت لدى المستخدم.

استخدام رﻱكابتشا مع الأجاكس AJAX

عرض

تحميل

الخطوة 1: إنشاء ملف الوكيل لطلب معلومات رﻱكابتشا من الخادم

<?php
require_once('recaptchalib.php');
//استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey
$privatekey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

//ُError Codes translated to arabic
$error_ar = array(
	'invalid-site-public-key' => 'المفتاح العلني للموقع غير صحيح.',
	'invalid-site-private-key' => 'المفتاح الخاص للموقع غير صحيح.',
	'invalid-request-cookie' => 'عامل التحدي للتحقق غير صحيح.',
	'incorrect-captcha-sol' => 'حل كابتشا غير صحيح.',
	'verify-params-incorrect' => 'عوامل التحقق كانت غير صحيحة.',
	'invalid-referrer' => 'المحيل غير صحيح.',
	'recaptcha-not-reachable' => 'خطأ من الخادم.'
);

# the response from reCAPTCHA
$resp = null;

# was there a reCAPTCHA response?
if (empty($_POST["recaptcha_response_field"]))
{
	echo "حقل الكابتشا مطلوب!";
}
else
{
	$resp = recaptcha_check_answer ($privatekey,
					$_SERVER["REMOTE_ADDR"],
					$_POST["recaptcha_challenge_field"],
					$_POST["recaptcha_response_field"]);

	if ($resp->is_valid)
	{
		echo "مبروك، لقد أجبت إجابة صحيحة!";
	}
	else
	{
		echo $error_ar[$resp->error];
	}
}
echo ' <a onclick="showRecaptcha(\'dynamic_recaptcha\', \'submit\', \'red\');" href="javascript:return false;">إعادة المحاولة</a>.';
?>

سيتم إنشاء ملف مساعد للأجاكس نسميه ajax.recaptcha.php يهتم بطلب المعلومة من خادم رﻱكابتشا وتقديم المعلومة. والسبب في إنشاء ملف كهذا يعمل بمثابة الوكيل Proxy بين الأجاكس في موقعنا وخوادم رﻱكابتشا، هو أنه لأسباب أمنية في المتصفحات، يتم منع طلب المعلومات مباشرة بطريقة الأجاكس بين نطاقات مختلفة Cross domain.

ستلاحظ أنه لا اختلاف جذري بين هذا الملف، وملف رﻱكابتشا باستخدام PHP. سوى أنه تم الاستغناء عن عناصر HTML، وذلك لأننا نريد فقط أن نأخذ معلومة بسيطة.

الخطوة 2: إنشاء دوال المساعدة في طلب واستقبال الأجاكس

function createRequestObject()
{
	var req;
	if(window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else
	{
		alert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');
	}
	return req;
}

var http = createRequestObject();

function sendRequestPost(recaptcha_challenge_field, recaptcha_response_field)
{
	http.open('post', 'ajax.recaptcha.php');
	http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	http.onreadystatechange = handleResponse;
	http.send('recaptcha_challenge_field='+recaptcha_challenge_field+'&recaptcha_response_field='+recaptcha_response_field);
}

function handleResponse()
{
	document.getElementById("ajaxResp").style.display = 'block';
	document.getElementById("dynamic_recaptcha").style.display = 'none';
	document.getElementById("submitDiv").style.display = 'none';
	var ajaxTest = document.getElementById("ajaxResp");
	ajaxTest.innerHTML = 'جاري التحقق...';
	if(http.readyState == 4 && http.status == 200)
	{
		var response = http.responseText;
		if(response)
		{
			ajaxTest.innerHTML = response;
		}
	}
}

function getAnswer()
{
	sendRequestPost(Recaptcha.get_challenge(), Recaptcha.get_response());
}

لن أتطرق إلى تفاصيل الطلب والاستقبال بالأجاكس كثيراً، فقد تم تغطيته في مقال سابق. وهنا سنقوم فقط بطلب معلومة ما إذا كان تم التحقق من صحة رﻱكابتشا باستخدام ملف ajax.recaptcha.php، عبر تقديم عدد من المتغيرات، وهي قيمة حقل معرفة نوع التحدي لرﻱكابتشا. وحقل الجواب لتحدي رﻱكابتشا من قبل المستخدم.

الخطوة 3: إعادة إنشاء رﻱكابتشا بتقنية الأجاكس

function showRecaptcha(element)
{
	//استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey
	Recaptcha.create("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", element, {
		theme: 'blackglass',
		lang: 'ar',
		custom_translations : {
					visual_challenge : "احصل على تحدي مرئي",
					audio_challenge : "احصل على تحدي مسموع",
					refresh_btn : "احصل على تحدي جديد",
					instructions_visual : "اكتب الكلمتين:",
					instructions_audio : "اكتب ما تسمعه:",
					help_btn : "مساعدة",
					play_again : "إعادة تشغيل الصوت مرة أخرى",
					cant_hear_this : "تحميل الصوت بصيغة MP3",
					incorrect_try_again : "خطأ. أعد المحاولة."
					},
		callback: Recaptcha.focus_response_field
	});
	document.getElementById("dynamic_recaptcha").style.display = 'block';
	document.getElementById("ajaxResp").style.display = 'none';
	document.getElementById("submitDiv").style.display = 'block';
}

يتم إنشاء رﻱكابتشا بالأجاكس عبر استدعاء كائن Recaptcha.create. حيث يستقبل الكائن عدد من المتغيرات، أولاً المفتاح العلني، ثانياً اسم المعرّف Id للعنصر المراد إدراج رﻱكابتشا فيه، وأخيراً الخيارات.

الخيارات تكون مشابهة تماماً للخيارات التي سبق شرحها باستخدام PHP. ولكن هناك خيار جديد وهو callback. ويتيح هذا الخيار استدعاء دالة بعد الإنتهاء من تحميل رﻱكابتشا.

في نهاية الدالة نقوم بإخفاء بعض العناصر وإظهار البعض الآخر لتحسين قابلية الاستخدام.

الخطوة 4: عرض النموذج في HTML

<form action="" method="post" onsubmit="getAnswer();return false;">
	<p><a onclick="showRecaptcha('dynamic_recaptcha');" href="javascript:return false;">أظهر الكابتشا!</a></p>
	<div dir="ltr" style="float:right;" id="dynamic_recaptcha"></div>
	<div style="clear:right;" id="ajaxResp"></div>
	<div style="clear:right;" id="submitDiv"><input type="submit" name="submit" id="submit" class="button" value="موافق" /></div>
</form>

في عنصر النموذج form، تم استخدام حدث عند الإرسال onsubmit نستدعي دالة getAnswer() والتي تهتم بطلب المعلومة من الخادم وعرضها. من المهم إلحاق استدعاء الدالة بإرجاع خطأ return false، والسبب هو أننا لا نريد أن يتم إرسال النموذج بطريقة HTML، إنما بطريقة الأجاكس. وإرجاع الخطأ يوقف الإرسال عن طريق HTML.

في عنصر الرابط، سنرى إدراج الحدث عند النقر onclick، نستدعي الدالة showRecaptcha وذلك لإظهار رﻱكابتشا في تقسيمة div التي لها معرّف dynamic_recaptcha.

الخلاصة

رأينا كيف باستخدامنا لرﻱكابتشا نضمن حماية المواقع من السخام، وفي نفس الوقت مساعدة تحويل الكتب القديمة إلى كتب إلكترونية. ورأينا أيضاً كيف يمكننا تطبيق رﻱكابتشا باستخدام 3 طرق مختلفة، باستخدام PHP فقط، من ثم بتخصيص شكل رﻱكابتشا، وبعدها باستخدام تقنية الأجاكس.

إذا طبقتم الدرس في مواقع تديرونها، الرجاء منكم مشاركتنا إياها في التعليقات.