كيفية إضافة CAPTCHA لتسجيل الدخول إلى WooCommerce

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

ما هو اختبار CAPTCHA؟

CAPTCHA (اختبار Turing العام المؤتمت بالكامل لإخبار Computers and Humans Apart) هو أسلوب حديث يستخدم لإضافة التحقق من المستخدم إلى أي موقع ويب أو تطبيق جوال. بمعنى آخر ، تُستخدم كابتشا لتمييز البشر الحقيقيين عن الروبوتات لجعل موقعك أكثر أمانًا. ينشئ CAPTCHA تحديات بسيطة ويعرضها في الواجهة الأمامية ، ويجب على المستخدم حلها للوصول إلى الموقع. نظرًا لأن الروبوتات لا يمكنها حل اختبار CAPTCHA ، يمكنك تصفية حركة المرور غير المرغوب فيها ومنع الروبوتات من دخول موقع الويب الخاص بك.

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

قام موفرو CDN مثل Cloudflare بتضمين هذه التقنية أيضًا ويسمحون لك بإضافة طبقة أمان إلى موقع الويب الخاص بك.

أنواع الكابتشا

الآن دعونا نلقي نظرة على الأنواع المختلفة من CAPTCHA وكيفية عملها.

1) نص CAPTCHA

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

2) صورة CAPTCHA

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

3) الصوت CAPTCHA

عند استخدام اختبار CAPTCHA الصوتي ، يتعين على زوار موقعك على الويب الاستماع إلى ملف صوتي معين وإدخال الكلمات / الأرقام التي يسمعونها في مربع الإرسال. يعد هذا أكثر أمانًا من اختبار CAPTCHA الخاص بالصورة أو النص ولكنه ليس شائعًا مثل الأنواع الأخرى.

4) الرياضيات CAPTCHA

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

لماذا تضيف Captcha إلى تسجيل الدخول في WooCommerce؟

إذا كنت ترغب في حماية متجرك من عمليات تسجيل البريد العشوائي والروبوتات ، فيجب عليك إضافة CAPTCHA لتسجيل الدخول إلى WooCommerce. صفحات تسجيل الدخول ونماذج الاتصال هي بعض الصفحات التي يستهدفها المتسللون أكثر من غيرهم. لهذا السبب لا يوصى باستخدام نموذج تسجيل الدخول الافتراضي إلى WordPress.

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

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

بعد إضافة CAPTCHA ، سيبدو نموذج تسجيل الدخول كما يلي:

حتى إذا أدخل المستخدم بيانات اعتماد تسجيل الدخول الصحيحة ، فيجب عليه حل اختبار CAPTCHA قبل تسجيل الدخول إلى لوحة معلومات الحساب.

الآن بعد أن عرفت سبب حاجتك إلى إضافة CAPTCHA إلى تسجيل الدخول إلى WooCommerce ، دعنا نتعلم كيفية القيام بذلك ومنع البريد العشوائي.

كيفية إضافة CAPTCHA لتسجيل الدخول إلى WooCommerce

هناك طريقتان لإضافة CAPTCHA إلى WooCommerce:

1. باستخدام الإضافات
2. برمجيا

دعنا نلقي نظرة على كل طريقة ، حتى تتمكن من اختيار أفضل طريقة تناسبك.

1) إضافة CAPTCHA باستخدام الإضافات

هناك العديد من المكونات الإضافية التي يمكنك استخدامها لإضافة CAPTCHA إلى موقعك. في هذا القسم ، سنركز على أداتين:

• reCaptcha بواسطة BestWebSoft
• المتقدمة noCAPTCHA و reCAPTCHA

1.1) reCaptcha بواسطة BestWebSoft

reCaptcha by BestWebSoft هي واحدة من أشهر ملحقات CAPTCHA المجانية المتوفرة في السوق. دعونا نرى كيفية إعداده.

1.1.1) التثبيت والتفعيل

أولاً ، قم بتسجيل الدخول إلى موقع WordPress الخاص بك وانتقل إلى المكونات الإضافية> إضافة جديد . بعد ذلك ، ابحث عن reCaptcha بواسطة BestWebSoft ، واضغط على Install Now ، وقم بتنشيطه.

1.1.2) التكوين

بمجرد تنشيط المكون الإضافي ، انتقل إلى وحدة تحكم مشرف Google reCAPTCHA وأكمل التسجيل. للتسجيل في موقع ويب جديد ، عليك إدخال:

• ملصق
• نوع reCAPTCHA
• المجالات
• أصحاب

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

في حالتنا ، اخترنا reCAPTCHA v2 ، وهو أبسط أنواع reCAPTCHA المتوفرة في القائمة.

هناك 3 خيارات يمكنك تحديدها. نوصي بتحديد خانة الاختيار أنا لست روبوتًا وهي أكثر عمليات التحقق شيوعًا.

بمجرد إرسال النموذج ، ستعرض المنصة مفتاحين على الشاشة: مفتاح الموقع والمفتاح السري.

قم بنسخها ووضعها في مكان يسهل عليك استخدامه حيث ستستخدمها في غضون دقيقة.

عد الآن إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى إعدادات reCAPTCHA .

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

بعد ذلك ، قم بالتمرير إلى أسفل الصفحة وسترى بعض صفحات WordPress الافتراضية. حدد الصفحات التي تريد إضافة CAPTCHA إليها. بالنسبة لهذا العرض التوضيحي ، سنقوم بتحديد صفحة تسجيل الدخول ، ولكن يمكنك أيضًا تحديد المزيد من الصفحات. يمكنك أيضًا إخفاء CAPTCHA لبعض أدوار المستخدم.

بعد ذلك ، احفظ الإعدادات وهذا كل شيء!

1.3) الاختبار

للتحقق من أن كل شيء يعمل بشكل صحيح ، انتقل إلى صفحة تسجيل الدخول الخاصة بك باستخدام نافذة التصفح المتخفي وسترى مربع CAPTCHA أسفل حقل كلمة المرور.

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

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

حاليًا ، لا يأتي الإصدار المجاني من reCAPTCHA مع تكامل WooCommerce. ومع ذلك ، فإن الإصدار المتميز سيفتح عمليات تكامل أكثر قوة ووظائف أكثر تقدمًا مقابل 21 دولارًا أمريكيًا سنويًا.

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

إذا كنت ترغب في إضافة حقل CAPTCHA إلى صفحة تسجيل الدخول إلى WooCommerce دون دفع أي شيء ، فلدينا مكون إضافي آخر لك.

1.2) برنامج noCAPTCHA المتقدم و reCAPTCHA (V2 & V3)

يعد Advanced noCAPTCHA & reCAPTCHA مكونًا إضافيًا مجانيًا ممتازًا لإضافة CAPTCHA إلى موقعك بسهولة. دعونا نرى كيفية تكوينه لحماية موقعك.

1.2.1) التثبيت والتفعيل

كالعادة ، أول شيء عليك القيام به هو تثبيت وتنشيط المكون الإضافي على موقع الويب الخاص بك. انتقل إلى الإضافات> إضافة جديد ، وابحث عن المكون الإضافي ، وقم بتثبيته.

بعد تنشيط الأداة ، سترى إعدادات المكون الإضافي ضمن قسم الإعدادات .

1.2.2) التكوين

تكوين هذه الأداة ضئيل. انتقل إلى وحدة تحكم المشرف في Google reCAPTCHA وأكمل التسجيل. تذكر تحديد نوع CAPTCHA الذي تريده وانسخ مفتاح الموقع ومفتاح السر.

بعد ذلك ، حدد نوع reCAPTCHA والصق مفتاح موقعك ومفتاح السر في الحقول المقابلة.

بعد ذلك ، اختر النماذج التي تريد حمايتها باستخدام reCAPTCHA. في هذه الحالة ، سنختار نموذج تسجيل الدخول والتسجيل الخاص بنا. بعد ذلك ، احفظ التغييرات.

1.2.3) الاختبار

بعد ذلك ، حان الوقت للتحقق من صفحة تسجيل الدخول إلى WooCommerce. افتح صفحة تسجيل الدخول في نافذة التصفح المتخفي وسترى مربع reCAPTCHA هناك.

هذا هو! هذه هي الطريقة التي يمكنك بها بسهولة إضافة حقل CAPTCHA إلى صفحة تسجيل الدخول إلى WooCommerce. ولكن ماذا لو كنت لا تريد استخدام أي أدوات خارجية لهذا الغرض؟ يمكنك أيضًا القيام بذلك باستخدام القليل من التعليمات البرمجية.

2) إضافة CAPTCHA برمجيًا

إذا كانت لديك بعض مهارات الترميز ، فيمكنك إضافة CAPTCHA إلى صفحة تسجيل الدخول إلى WooCommerce باستخدام مقتطفات PHP. في هذا القسم ، سنوضح لك كيف يمكنك تضمين مربع reCAPTCHA من Google في شاشة تسجيل الدخول.

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

في هذا البرنامج التعليمي ، بدلاً من لصق الكود مباشرةً في ملف function.php ، سنستخدم المكوّن الإضافي Code Snippets. إنها أداة خاصة بالموقع يستخدمها الآلاف من المدونين والمطورين لتسهيل عملية تحرير الملفات الأساسية.

التثبيت والتفعيل

أولاً ، قم بتثبيت وتنشيط مقتطفات التعليمات البرمجية على موقعك كما هو موضح أدناه.

بعد تنشيط المكون الإضافي ، سترى إعداداته على الجانب الأيسر.

ترتيب

انقر فوق إضافة جديد ، وقم بتسمية المقتطف ، والصق الرمز التالي:

 add_action ('wp_head'، function () {echo '<script src = "https://www.google.com/recaptcha/api.js" async defer> </script>'؛}) ؛
 add_action ('woocommerce_login_form'، 'add_recaptcha_to_login_form') ؛
 الوظيفة add_recaptcha_to_login_form () {
 صدى '<div class = "g-recaptcha" data-sitekey = "YOUR_PUBLIC_KEY"> </div>'؛
 } {؟>
 <div class = "g-recaptcha" data-sitekey = "YOUR_PUBLIC_KEY"> </div> <p> ACA el captcha </p>
 <؟ php
 }
 add_action ("login_form"، "display_login_captcha") ؛
 وظيفة check_login_captcha ($ المستخدم ، $ كلمة المرور) {
 إذا (isset ($ _ POST ['g-recaptcha-response'])) {
 recaptcha_secret = 'YOUR_SECRET_KEY' ،
 $ response = wp_remote_get ("https://www.google.com/recaptcha/api/siteverify؟secret=". $ recaptcha_secret. "& response =". $ _POST ['g-recaptcha-response']) ؛
 الاستجابة $ = json_decode ($ response ["body"] ، true) ؛
 إذا (صحيح == $ response ["نجاح"]) {
 عودة المستخدم $؛
 } آخر {
 إرجاع WP_Error الجديد ("Captcha Invalid"، __ ("<strong> ERROR </strong>: أنت روبوت")) ؛
 }
 } آخر {
 إرجاع WP_Error الجديد ("Captcha Invalid"، __ ("<strong> ERROR </strong>: أنت روبوت. إذا لم يكن كذلك ، فقم بتمكين JavaScript")) ؛
 }
 }
 add_filter ("wp_authenticate_user"، "check_login_captcha"، 10، 2)؛ 

تأكد من لصق مفتاح موقعك والمفتاح السري في المقتطف حيث يقول YOUR_PUBLIC_KEY و YOUR_SECRET_KEY على التوالي. بمجرد القيام بذلك ، احفظ التغييرات وقم بتنشيط المقتطف.

اختبارات

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

هذا هو! هذه هي الطريقة التي يمكنك بها إضافة CAPTCHA إلى صفحة تسجيل الدخول إلى WooCommerce باستخدام القليل من التعليمات البرمجية.

المكافأة: كيفية تخصيص صفحة تسجيل الدخول

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

هناك العديد من المكونات الإضافية لتخصيص صفحة تسجيل الدخول. في هذا البرنامج التعليمي ، سنستخدم Custom Login Page Customizer ، وهي أداة مجانية يمكنك تنزيلها من مستودع ملحقات WordPress.

أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي على موقع الويب الخاص بك. انتقل إلى الإضافات> إضافة جديد ، وابحث عن مخصص صفحة تسجيل الدخول ، وقم بتثبيته.

بعد التنشيط ، سترى خيار Customizer على الجانب الأيسر تحت Login Customizer .

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

باستخدام هذا المكون الإضافي ، ستتمكن من تخصيص الخلفية والشعار والنموذج والحقول والأزرار الخاصة بموقعك. بالإضافة إلى ذلك ، يمكنك أيضًا تضمين نصوص برمجية مخصصة من قسم Custom CSS & JavaScript .

بمجرد أن تصبح سعيدًا بالتخصيص الخاص بك ، تذكر حفظ التغييرات. هذا هو! الآن سيرى زوار موقعك على الويب صفحة تسجيل الدخول المصممة حديثًا في الواجهة الأمامية.

لمزيد من المعلومات حول هذا الأمر ، راجع دليلنا حول كيفية تخصيص صفحة تسجيل الدخول في WordPress. بالإضافة إلى ذلك ، نوصيك أيضًا بإلقاء نظرة على برنامجنا التعليمي لتغيير عنوان URL لتسجيل الدخول.

استنتاج

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

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

إذا كنت تبحث عن المزيد من دروس WooCommerce المخصصة ، فقم بإلقاء نظرة على هذه المقالات:

• كيفية تغيير عنوان URL لصفحة تسجيل الدخول إلى WordPress
• WordPress تسجيل الدخول لا يعمل؟ كيف تصلحها
• كيفية تخصيص صفحة تسجيل الدخول في WordPress

هل وجدت هذه المقالة مفيدة؟ إذا قمت بذلك ، شارك هذه المقالة مع أصدقائك على وسائل التواصل الاجتماعي لمساعدتهم على حماية مواقعهم.