عند تصفحنا للمواقع الإلكترونية والتفاعل معها يواجهنا اختبار captcha, خصوصا عند تسجيلنا في ذالك الموقع, وهي تكون على شكل صورة تحتوي على أحرف مشوهة أو تكون ري كابتشا (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 مكتوب بداخلها (أنا لست برنامج روبوت), وتكون افتراضيا بلغة الإنجليزية لكن يمكننا تغيير لأي لغة نريد كما في الصورة التالية.
الرمز السري (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 بكل سهولة.
