حماية النموذج من الرسائل غير المرغوب فيها "غير المرئية" في Google reCAPTCHA v3 بدون فقدان نقاط PageSpeed ​​Insight

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



اختبار CAPTCHA القياسي عديم الفائدة ، وتختبره الروبوتات "مرة واحدة" ، وتسبب مشاكل للمستخدمين.



أفضل حل هو استخدام Google reCAPTCHA v2 أو v3. يعد كلا الإصدارين من Google reCAPTCHA خيارات رائعة. هذا هو أفضل ما هو متاح الآن في السوق من حلول واضحة وموثوقة ومجانية.



تكمن المشكلة الرئيسية في كلا الإصدارين في أنه عند الاتصال ، يتم تقليل درجات PageSpeed ​​Insight بشكل كبير بمقدار 20-30.



مثال ReCAPTCHA v2 - يتطلب تخمين الصور



مثال reCAPTCHA v3 - لا يتطلب إجراءات من المستخدم ، ويحلل سلوكه في الخلفية



النقطة المهمة بالنسبة لي هي عدم خلق مشاكل للمستخدمين الحقيقيين ، لأن أنا شخصياً لست من أشد المعجبين بتخمين المركبات في reCAPTCHA v2 ، لذا فإن خياري هو v3.



لذلك هناك مشكلتان من مشكلات Google reCAPTCHA v3 تحتاجان إلى المعالجة:

• شعار معلق في الزاوية اليمنى السفلى ؛
• خسارة 20-30 نقطة على Google PageSpeed ​​Insight.

Hanging logo



تسمح لك Google بإزالة الشعار بإخفائه من خلال CSS في اتفاقية الترخيص الخاصة بها.

.grecaptcha-badge {
	visibility: hidden;
}

بدلاً من ذلك ، في كل نموذج ، اكتب "Anti-spam reCAPTCHA Privacy & Terms of Service" مع روابط إلى صفحات Google ذات الصلة.



فقدان النقاط على Google PageSpeed ​​Insight



عند توصيل ملف جافا سكريبت من reCAPTCHA v3 ، يتم تقليل الدرجات على Google PageSpeed ​​Insight بشكل كبير. كان هذا حرجا بالنسبة لي. أعتقد أن هذا يرجع إلى تحليل سلوك المستخدم (يحدث انخفاض مماثل عند استخدام حاجب الويب في Yandex.Metrica).



على الموارد المحسّنة جيدًا ، يمكنك أن تخسر 20-30 نقطة. لذلك ، يمكنك استخدامه على صفحات منفصلة حيث لا تكون السرعة مهمة (على سبيل المثال ، جهات الاتصال) دون تعديل. للاستخدام على الموقع بالكامل (على سبيل المثال ، لحماية نموذج تسجيل الدخول الشامل أو الاشتراك في النشرة الإخبارية) ، يُنصح بإجراء تعديل.



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



بدأ في استخدام هذه التقنية أولاً في نماذج الويب 1C-Bitrix ، ثم من أجل نماذج الترخيص والاشتراك من طرف إلى طرف على مواقع بدون Bitrix.



في ضوء حقيقة أن 1C-Bitrix هو CMS عام ، سأخبرك بعبارات عامة باستخدام مثاله - حول المنهجية وحالة الاستخدام المحتملة. يمكن إجراء المزيد من الضبط لتناسب احتياجاتك.

استخدام Google reCAPTCHA v3 في نماذج الويب 1C-Bitrix

1. نسمي النموذج باستخدام bitrix القياسي: مكون النموذج ونقوم بإضافتين:

• استبدل نوع الزر = إرسال بنوع الزر المعتاد = الزر
• إضافة اسم الحقل المخفي = g_recaptcha_response

2. أضف تهيئة reCAPTCHA عند النقر فوق حقول النموذج إلى ملف جافا سكريبت الخاص بالموقع أو المكون (في هذا المثال ، أفترض أنك تستخدم jQuery):

$('body').on('click','form input, form textarea', function() {
	if (typeof(grecaptcha) == 'undefined') {
		var grecaptcha_s = document.createElement('script');
		grecaptcha_s.src = 'https://www.google.com/recaptcha/api.js?render=<PUBLIC_KEY>';

		var grecaptcha_h = document.getElementsByTagName('script')[0];
	grecaptcha_h.parentNode.insertBefore(grecaptcha_s,grecaptcha_h);
	}
});

3. إضافة تتبع للنقر على الزر في النموذج. علاوة على ذلك ، نستخدم المثال الموضح في وثائق Google في الداخل. تملأ الحقل g_recaptcha_response ، والذي سنستخدمه في الخطوة الأخيرة للتحقق من صحة المستخدم.

$('body').on('click','form button[name="web_form_submit"]', function() {
	grecaptcha.ready(function() {
		grecaptcha.execute('<PUBLIC_KEY>',{action: 'feedback'}).then(
			function(token) {
				$('form input[name="g_recaptcha_response"]').val(token);

				var form_obj = $('form');
				var event_obj = form_obj.get(0);

				BX.fireEvent(event_obj,'submit');	
				event_obj.submit();
			}
		);
	});
});

4. تتبع الحدث onBeforeResultAdd في init.php



قبل إرسال نتائج النموذج ، قم بتقديم استئناف إلى خادم Google باستخدام <PRIVATE_KEY> والقيمة من الحقل المخفي g_recaptcha_response من النموذج.



رداً على ذلك ، نحصل على نقاط هذا المستخدم:

• 1 هذا بالتأكيد شخص
• 0 بالضبط روبوت
• يمكن اعتبار أكثر من 0.5 إنسان

AddEventHandler("form","onBeforeResultAdd","onBeforeResultAddHandler");

function onBeforeResultAddHandler($WEB_FORM_ID,$arFields,$arrVALUES)
{
	global $APPLICATION;

	$g_recaptcha_response = $arrVALUES["g_recaptcha_response"];
	if (!empty($g_recaptcha_response))
	{
		$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<PRIVATE_KEY>&response=".$g_recaptcha_response."&remoteip=".$_SERVER["REMOTE_ADDR"]),true);
			

		$g_recaptcha_response_check = false;

		if (($response["success"] and $response["score"] >= 0.5 and $response["action"] == 'feedback']))
		{
			$g_recaptcha_response_check = true;
		}

		if (!$g_recaptcha_response_check)
		{
			$APPLICATION->ThrowException('   Google reCAPTCHA v3.</a>');
		}
	}
	else
	{
		$APPLICATION->ThrowException('   Google reCAPTCHA v3.');
	}
}

أخيرا

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



يمكنك فعل الشيء نفسه مع Google reCAPTCHA v2 ، قم بالتهيئة بالنقر فوق النموذج واطلب من المستخدم تحديد المربع "أنا لست روبوتًا" وتخمين الصور ، إذا لزم الأمر. في هذه الحالة ، سيوفر أيضًا نقاط PageSpeed ​​Insight ويمنح المستخدم أداة (حدد الصور) لإثبات أنه ليس روبوتًا. ولكن كما قلت أعلاه ، فإن أهم شيء بالنسبة لي هو عدم خلق عقبات للمستخدم.