• فوتوشوب أون لاين مجانا – Photoshop Online Free
  • إيموجي – Émoji
مدونة عبقور
  • الرئيسية
  • أخبار
  • نصائح وحيل
  • هواتف
    • أندرويد
    • أيفون
  • برمجة
    • Angular
    • CSS
    • PHP
  • ويندوز
  • لينكس
    • أوبونتو
  • الماك
  • حماية
No Result
View All Result
  • الرئيسية
  • أخبار
  • نصائح وحيل
  • هواتف
    • أندرويد
    • أيفون
  • برمجة
    • Angular
    • CSS
    • PHP
  • ويندوز
  • لينكس
    • أوبونتو
  • الماك
  • حماية
No Result
View All Result
مدونة عبقور
No Result
View All Result

إضافة reCaptcha لأي موقع بلغة PHP

زكرياء الزحتي من طرف زكرياء الزحتي
1 ديسمبر، 2021
in PHP
reCaptcha مع php باستعمال curl فقط
1
SHARES
شارك على فيسبوكشارك على تويترشارك على واتساب

عند تصفحنا للمواقع الإلكترونية والتفاعل معها يواجهنا اختبار captcha, خصوصا عند تسجيلنا في ذالك الموقع, وهي تكون على شكل صورة تحتوي على أحرف مشوهة أو تكون ري كابتشا (reCaptcha) الخاصة بجوجل تطلب منا تأكيد من أننا لسنا برنامج روبوت عن طريق اختيار بعض الصور, كما في الصورة التالية:

recaptcha

ما هيreCaptcha ؟

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

مثال:

إذا كانت captcha غير موجودة في موقع ما, وهذا الموقع يتوفر على صفحة تسجيل الأعضاء, هنا يمكننا برمجة روبوت بلغة php أو javascript يقوم بالتسجيل في الموقع ببريد الكتروني عشوائي يقوم بتوليده كل مرة, ولأنه روبوت فسيقوم بإنشاء عدد كبير جدا من الحسابات المزيفة وهذا سيقوم بملأ قاعدة بيانات (Database) ذالك الموقع مما سيسبب في إيقافه.

اضافةري كابتشا للموقع

بعد أن رأينا دور وأهمية reCaptcha الأن سنرى كيف نقوم بإضافتها لموقعنا. الشرح سيكون على صفحتين فقط, صفحة ab9or_recaptcha.html و هي خاصة بعرض نافذة reCaptcha للزائر, وصفحة recaptcha.php وهي خاصة بالتحقق من أن اختبار reCaptcha لقد تم اجتيازه من طرف انسان, وذالك سيكون عبر ارسال الإختبار للموقع reCaptcha وسيتم التحقق منه وإرجاع لنا هل تم اجتيازه أم لا, وذالك عبر أداة cURL الخاصة بلغة php, إذن لنبدأ.

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

أولا وقبل كل شيء لكي نستعمل reCaptcha يجب أن نقوم بالتسجيل في موقع reCaptcha لكي نحصل على المفاتيح التي سنستعملها عند التحقق من اختبار reCaptcha.

ندخل على الموقع https://www.google.com/recaptcha/admin/create

بعد الدخول في موقع reCaptcha, نقوم بملأ معلوماتنا كما موضح في الصورة أسفله:

بعدها ننزل للأسفل ونقوم بالموافقة على الشروط الإستعمال الخاصة ب reCaptcha, كما هو موضح في الصورة أسفله:

الأن بعد أن انتهينا من التسجيل, نحصل على المفاتيح الخاصة بنا التي سنستعملها مع reCaptcha, كما في الصورة أسفله:

الرمز العلني (Public Key):

الرمز العلني نستعمله في إظهار نافذة reCaptcha التي تكون على شكل CheckBox مكتوب بداخلها (أنا لست برنامج روبوت), وتكون افتراضيا بلغة الإنجليزية لكن يمكننا تغيير لأي لغة نريد كما في الصورة التالية.

recaptcha checkbox
الرمز السري (Private Key):

الرمز السري نستعمله للتحقق من reCaptcha, هل تم اجتيازها أم لا, وذالك من خلال إرسال الطلب للموقع reCaptcha عبر cURL.

الخطوة الأخيرة: إضافة ري كابتشا للموقع

الأن بعد أن حصلنا على المفاتيح, سنقوم بإضافة reCaptcha في الموقع.

كما هو مكتوب في موقع reCaptcha, لإضافة نافذة reCaptcha يجب أن نستدعي الكتبة الخاصة بها عن طريق إضافة هذا الكود في صفحة HTML داخل الوسم <head>:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
مثال:
<!DOCTYPE html>
<html>
<head>
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body></body>
</html>
ملاحظة:

reCaptcha تأتي افتراضيا بلغة الإنجليزية, لكن يمكننا تغييرها لأي لغة نريد وذالك بإضافة ?hl=ar في نهاية الرابط مع تغيير ar لأي لغة نريد, مثلا: كالفرنسية نضيف fr, كما في الكود أسفله:

<script src="https://www.google.com/recaptcha/api.js?hl=ar" async defer></script>

بعد استدعاء مكتبة reCaptcha, الأن سنقوم بإضافة نافذة reCaptcha في المكان الذي نريد على موقعنا وذالك من خلال الكود التالي مع تغيير قيمةdata-sitekey بالرمز العلني (Public Key) الذي حصلنا عليه من موقع reCaptcha:

<div class="g-recaptcha" data-sitekey="6LdP82IdAAAAAF3fjW9oaj1rDGc94QHPTQXu3_F7"></div>
ملاحظة:

لا تنسى تغيير القيمة 6LdP82IdAAAAAF3fjW9oaj1rDGc94QHPTQXu3_F7بالرمز العلني الذي حصلت عليه من موقع reCaptcha.

المصدر: reCAPTCHA v2

للتجربة:

يمكنك نسخ هذا الكود الجاهز للتجربة:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>مدونة عبقور - Recaptcha</title>

	<style type="text/css">
		body {
			direction: rtl;
		}
		input, button {
			display: block;
			width: 303px;
			border: 1px solid #cfcfcf;
			border-radius: 8px;
			margin-bottom: 10px;
			height: 50px;
			box-sizing: border-box;
			font-size: 18px;
			padding: 0 15px;
		}
		button {
			background-color: #009fe8;
			color: #fff;
			cursor: pointer;
			margin-top: 8px;
		}
	</style>

	<!-- الرابط الخاص بمكتبة recaptcha لكي تقوم بإظهار صندوق recaptcha, أيضا أضفنا لها hl=ar وتعني إظهار recaptcha بالعربية, ويمكنك تغييرها لأي لغة تريد كلإنجليزية hl=en -->
	<script src="https://www.google.com/recaptcha/api.js?hl=ar" async defer></script>

</head>
<body>

	<!-- الفورم التي سنرسلها للتحقق من recaptcha, أضفنا لنا النوع POST و الصفحة الخاصة بالتحقق من recaptcha هي recaptcha.php -->
	<form method="post" action="recaptcha.php">
		<input type="text" name="url" value="https://www.ab9or.com" />
		<input type="text" name="email" value="مدونة عبقور" />

		<!-- input الخاصة ب recaptcha لكي يظهر لنا صندوق التحقق البشري مع الرمز العلني الذي حصلنا عليه بعد انشاء حساب في recaptcha -->
		<div class="g-recaptcha" data-sitekey="6LdP82IdAAAAAF3fjW9oaj1rDGc94QHPTQXu3_F7"></div>

		<button>تحقق</button>
	</form>
</body>
</html>

بعد إضافة نافذة reCaptcha في صفحة HTML, لأن سنقوم بإضافة كود للتحقق من reCaptcha هل تم اجتيازها أم لا, وذالك سيكون في صفحة PHP وسيكون الكون كالتالي:

<?php

	// دالة للتحقق من recaptcha
	function check_recaptcha() {
		// للتهيئة curl
		$ch = curl_init();

		// الرابط الذي سنرسل له معلومات recaptcha وهو خاص بجوجل
		curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");

		// للنرسل البيانات للجوجل على شكل POST
		curl_setopt($ch, CURLOPT_POST, true);

		// البيانات التي سنرسلها للجوجل لكي تتحقق من recaptcha
		curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array(
		 	'secret' => '6LdP82IdAAAAAHPhnXQ_cS-n9D5PFZko9uByp813', // الرمز السري الخاصة ب recaptcha الذي حصلنا عليه بعد تسجيل في موقع recaptcha
		 	'response' => $_POST['g-recaptcha-response'] // g-recaptcha-response هي الإسم الخاص ب recaptcha, ويحتوي على معلومات recaptcha هل تم التحقق منها من طرف الزائر
		 )));

		// لكي نتلقى الإجابة من موقع جوجل كما هي
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

		// تلقي الإجابة من جوجل
		$response = curl_exec($ch);

		// تحويل الإجابة ($reponse) إلى مصفوفة
		$result = json_decode($response, true);

		// لكي يتم إيقاف cURL بعد تلقي الإجابة
		curl_close($ch);

		// لإرجاع النتيجة صحيحة (true) أو خطأ (false)
		return $result['success'];
	}

	// للتحقق من أن الطلب أتى على شكل POST وليس GET
	if ($_SERVER['REQUEST_METHOD'] == 'POST') {

		// للتحقق من recaptcha عبر الدالة check_recaptcha التي قمنا بإنشائها في الأعلى
		if ( check_recaptcha() ) {
			// الرسالة تظهر في حالة تم تحقق من recaptcha بنجاح
			echo '<div style="color:green;">لفد تم التحقق بنجاح</div>';
		} else {
			// الرسالة تظهر في حالة فشل تحقق recaptcha
			echo '<div style="color:red;">لقد فشل التحقق</div>';
		}
	}

?>

كما ترى في الأول قمنا بإنشاء دالة بإسم check_recaptcha و بداخلها قمنا بتهئية curl من خلال الدالة ()curl_init, لأن التحقق سيكون عن طريق جوجل.

وداخل الدالة check_recaptcha قمنا بإضافة البيانات التي سنرسلها للجوجل, وهي:

curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array(
		 	'secret' => '6LdP82IdAAAAAHPhnXQ_cS-n9D5PFZko9uByp813',
		 	'response' => $_POST['g-recaptcha-response']
		 )));

secret: هنا نقوم بإضافة المفتاح السري الذي حصلنا عليه من موقع reCaptcha.

response: هنا نقوم بإضافة input الخاصة بنافذة reCaptcha, وهيg-recaptcha-response والتي بداخلها تكون المعلومات التي أدخلها الزائر.

المصدر: Verifying the user’s response

قمنا بالتحقق من أن تم استدعاء الصفحة عن طريق POST, بعدها قمنا بالتحقق من reCaptcha عن طريق استدعاء الدالة check_recaptcha(), إذا تم اجتياز reCaptcha ستطبع لنا النص ( لفد تم التحقق بنجاح ) بلون الأخضر وإذا لم يجتاز reCaptcha ستطبع لنا النص ( لقد فشل التحقق ) بلون الأحمر من خلال الكود التالي:

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
		if ( check_recaptcha() ) {
			echo '<div style="color:green;">لفد تم التحقق بنجاح</div>';
		} else {
			echo '<div style="color:red;">لقد فشل التحقق</div>';
		}
	}

مثال حي

يمكنك إضافة reCaptcha في أي موقع مطور بلغة PHP بكل سهولة.

Tags: captchacurlGooglehtmlphprecaptchatutorialsأنا لست برنامج روبوتالتحقق البشريري كابتشاكابتشا
Share1TweetSend
Previous Post

إنشاء مدونة WordPress من الصفر إلى الياء مجانا و بخطوات بسيطة

Next Post

لينكس – شرح الأمر id

زكرياء الزحتي

زكرياء الزحتي

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

Related Posts

php – شرح الدالة array_push
PHP

php – شرح الدالة array_push

30 أغسطس، 2020
أوبونتو – شرح تثبيت composer ومستلزماته
PHP

أوبونتو – شرح تثبيت composer ومستلزماته

18 يونيو، 2020
PHP - Laravel - شرح الدالة __invoke() وكيفية استدعائها
PHP

PHP – Laravel – شرح الدالة __invoke() وكيفية استدعائها

30 أغسطس، 2020
PHP - الاستثناءات و معالجة اﻷخطاء (Exceptions && Error Handling)
PHP

PHP – الاستثناءات و معالجة اﻷخطاء (Exceptions && Error Handling)

27 أبريل، 2020

[vc_row][vc_column][vc_row_inner][vc_column_inner][vc_wp_tagcloud title="" taxonomy="post_tag"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width="stretch_row_content_no_spaces" rtl_reverse="yes" vc_row_background=""][vc_column][vc_raw_html]JTNDZGl2JTIwc3R5bGUlM0QlMjJtYXJnaW4tdG9wJTNBMjBweCUyMiUyMGNsYXNzJTNEJTIyZm9vdGVyLWhvbGRlciUyMiUyMGlkJTNEJTIyZm9vdGVyJTIyJTIwZGF0YS1pZCUzRCUyMmZvb3RlciUyMiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyamVnX2Zvb3RlciUyMGplZ19mb290ZXJfNiUyMGRhcmslMjIlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMmplZ19mb290ZXJfY29udGFpbmVyJTIwamVnX2NvbnRhaW5lciUyMiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyamVnX2Zvb3Rlcl9jb250ZW50JTIyJTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJjb250YWluZXIlMjIlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMmplZ19mb290ZXJfcHJpbWFyeSUyMGNsZWFyZml4JTIyJTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJmb290ZXJfd2lkZ2V0JTIwd2lkZ2V0X2puZXdzX2Fib3V0JTIyJTIwaWQlM0QlMjJqbmV3c19hYm91dC0xJTIyJTNFJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJqZWdfYWJvdXQlMjIlM0UlMEElM0NhJTIwY2xhc3MlM0QlMjJmb290ZXJfbG9nbyUyMiUyMGhyZWYlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy5hYjlvci5jb20lMkYlMjIlM0UlMEElM0NpbWclMjBjbGFzcyUzRCUyMmxhenlsb2FkZWQlMjIlMjBzdHlsZSUzRCUyMmhlaWdodCUzQTIwMHB4JTIyJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuYWI5b3IuY29tJTJGd3AtY29udGVudCUyRnVwbG9hZHMlMkYyMDIxJTJGMDMlMkZwbmdlZ2cucG5nJTIyJTNFJTBBJTNDJTJGYSUzRSUwQSUzQ3AlM0UlRDklODUlRDglQUYlRDklODglRDklODYlRDglQTklMjAlRDglQjklRDglQTglRDklODIlRDklODglRDglQjElMjAlRDglQUElRDglQUElRDklODglRDklODElRDglQjElMjAlRDglQjklRDklODQlRDklODklMjAlRDklODUlRDklODIlRDglQTclRDklODQlRDglQTclRDglQUElMjAlRDklODElRDklOEElMjAlRDklODUlRDglQUUlRDglQUElRDklODQlRDklODElMjAlRDglQTclRDklODQlRDklODUlRDglQUMlRDglQTclRDklODQlRDglQTclRDglQUElMjAlRDglQTclRDklODQlRDglQUElRDklOEElMjAlRDglQUElRDglQUElRDglQjklRDklODQlRDklODIlMjAlRDglQTglRDglQTclRDklODQlRDglQUElRDklODMlRDklODYlRDklODglRDklODQlRDklODglRDglQUMlRDklOEElRDglQTclMjAlRDglQTclRDklODQlRDglQUQlRDglQUYlRDklOEElRDglQUIlRDglQTklMkMlMjAlRDklODglRDglQTMlRDklOEElRDglQjYlRDglQTclMjAlRDglQUElRDglQUElRDklODYlRDglQTclRDglQjMlRDglQTglMjAlRDklODUlRDglQjklMjAlRDglQUMlRDklODUlRDklOEElRDglQjklMjAlRDglQTclRUYlQkIlQjclRDglQUMlRDklODclRDglQjIlRDglQTkuJTNDJTJGcCUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUyMCUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyamVnX2Zvb3Rlcl9pbnN0YWdyYW1fd3JhcHBlciUyMGplZ19jb250YWluZXIlMjIlM0UlMEElM0MlMkZkaXYlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMmplZ19mb290ZXJfdGlrdG9rX3dyYXBwZXIlMjBqZWdfY29udGFpbmVyJTIyJTNFJTBBJTIwJTNDJTJGZGl2JTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJqZWdfZm9vdGVyX2JvdHRvbSUyMiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyY29udGFpbmVyJTIyJTNFJTBBJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJmb290ZXJfcmlnaHQlMjIlM0UlMEElM0N1bCUyMGNsYXNzJTNEJTIyamVnX21lbnVfZm9vdGVyJTIyJTNFJTNDbGklMjBpZCUzRCUyMm1lbnUtaXRlbS0xMDE0JTIyJTIwY2xhc3MlM0QlMjJtZW51LWl0ZW0lMjBtZW51LWl0ZW0tdHlwZS1jdXN0b20lMjBtZW51LWl0ZW0tb2JqZWN0LWN1c3RvbSUyMGN1cnJlbnQtbWVudS1pdGVtJTIwY3VycmVudF9wYWdlX2l0ZW0lMjBtZW51LWl0ZW0taG9tZSUyMG1lbnUtaXRlbS0xMDE0JTIyJTNFJTNDYSUyMGhyZWYlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy5hYjlvci5jb20lMkYlMjIlMjBhcmlhLWN1cnJlbnQlM0QlMjJwYWdlJTIyJTNFJUQ4JUE3JUQ5JTg0JUQ4JUIxJUQ4JUE2JUQ5JThBJUQ4JUIzJUQ5JThBJUQ4JUE5JTNDJTJGYSUzRSUzQyUyRmxpJTNFJTBBJTNDbGklMjBpZCUzRCUyMm1lbnUtaXRlbS0xMjY1JTIyJTIwY2xhc3MlM0QlMjJtZW51LWl0ZW0lMjBtZW51LWl0ZW0tdHlwZS1wb3N0X3R5cGUlMjBtZW51LWl0ZW0tb2JqZWN0LXBhZ2UlMjBtZW51LWl0ZW0tcHJpdmFjeS1wb2xpY3klMjBtZW51LWl0ZW0tMTI2NSUyMiUzRSUzQ2ElMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuYWI5b3IuY29tJTJGcHJpdmFjeS1wb2xpY3klMkYlMjIlM0UlRDglQjMlRDklOEElRDglQTclRDglQjMlRDglQTklMjAlRDglQTclRDklODQlRDglQUUlRDglQjUlRDklODglRDglQjUlRDklOEElRDglQTklMjAlRTIlODAlOTMlMjBQcml2YWN5JTIwUG9saWN5JTNDJTJGYSUzRSUzQyUyRmxpJTNFJTBBJTNDbGklMjBpZCUzRCUyMm1lbnUtaXRlbS0xMzU5JTIyJTIwY2xhc3MlM0QlMjJtZW51LWl0ZW0lMjBtZW51LWl0ZW0tdHlwZS1wb3N0X3R5cGUlMjBtZW51LWl0ZW0tb2JqZWN0LXBhZ2UlMjBtZW51LWl0ZW0tMTM1OSUyMiUzRSUzQ2ElMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuYWI5b3IuY29tJTJGY29udGFjdC11cyUyRiUyMiUzRSVEOCVBNyVEOCVBQSVEOCVCNSVEOSU4NCUyMCVEOCVBOCVEOSU4NiVEOCVBNyUyMCVFMiU4MCU5MyUyMENvbnRhY3QlMjBVUyUzQyUyRmElM0UlM0MlMkZsaSUzRSUwQSUzQyUyRnVsJTNFJTBBJTNDJTJGZGl2JTNFJTBBJTBBJTNDcCUyMGNsYXNzJTNEJTIyY29weXJpZ2h0JTIyJTNFJTIwJTNDYSUyMGhyZWYlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy5hYjlvci5jb20lMjIlMjB0aXRsZSUzRCUyMiVEOSU4NSVEOCVBRiVEOSU4OCVEOSU4NiVEOCVBOSUyMCVEOCVCOSVEOCVBOCVEOSU4MiVEOSU4OCVEOCVCMSUyMiUzRSVEOSU4NSVEOCVBRiVEOSU4OCVEOSU4NiVEOCVBOSUyMCVEOCVCOSVEOCVBOCVEOSU4MiVEOSU4OCVEOCVCMSUzQyUyRmElM0UlMjAlQzIlQTklMjAyMDIxJTIwJTNDJTJGcCUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUyMCUzQyUyRmRpdiUzRQ==[/vc_raw_html][/vc_column][/vc_row]

No Result
View All Result
  • الرئيسية
  • أخبار
  • نصائح وحيل
  • هواتف
    • أندرويد
    • أيفون
  • برمجة
    • Angular
    • CSS
    • PHP
  • ويندوز
  • لينكس
    • أوبونتو
  • الماك
  • حماية

مدونة عبقور © 2021

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.

  • الرئيسية
  • سياسة الخصوصية – Privacy Policy
  • اتصل بنا – Contact US

مدونة عبقور © 2021