دمج Google reCAPTCHA في تطبيق React

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

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

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

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

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

يأتي Google reCAPTCHA في نسختين:

• reCAPTCHA V3: يعمل هذا الإصدار في الخلفية ويحدد النتيجة الإجمالية بناءً على سلوك المستخدم.
• reCAPTCHA V2: يضع هذا الإصدار خانة الاختيار "أنا لست روبوتًا" في نموذج المصادقة.

سوف يستكشف هذا الدليل Google reCAPTCHA V2. تابع القراءة لمعرفة كيفية دمجه في تطبيق React.

قم بتسجيل تطبيق React على وحدة تحكم مشرف reCAPTCHA

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

أدخل اسم التصنيف ، حدد reCAPTCHA V2، وفي المربع المنسدل ، حدد طلبات التحقق باستخدام خيار مربع الاختيار "أنا لست برنامج روبوت". أخيرًا ، أدخل اسم مجال التطبيق الخاص بك. للتنمية المحلية اكتب مضيف محلي كاسم المجال.

بمجرد تسجيل تطبيقك ، سيعيد الموقع توجيهك إلى صفحة جديدة تحتوي على مفاتيح السر والموقع التي تم إنشاؤها.

قم بإنشاء عميل React

هذا المشروع ذو شقين: ستنشئ عميل React يعرض نموذج تسجيل دخول بسيطًا باستخدام Google reCAPTCHA و Express backend الذي يجعل طلبات POST إلى واجهة برمجة تطبيقات reCAPTCHA للتحقق من الرمز المميز الذي تم إنشاؤه بعد أن يكمل المستخدم reCAPTCHA تحدي.

قم بإنشاء مجلد مشروع محليًا لإيواء ملفات مشروعك. التالي، إنشاء تطبيق React وتغيير الدليل الحالي إلى دليل العميل. في الدليل الجذر لمجلد العميل ، قم بإنشاء ملف .env لتخزين مفتاح الموقع ومفتاح API السري.

REACT_APP_reCAPTCHA_SITE_KEY = 'مفتاح الموقع'
REACT_APP_reCAPTCHA_SECRET_KEY = "مفتاح سري"

يمكنك العثور على رمز هذا المشروع في ملف مستودع جيثب.

قم بتثبيت الحزم المطلوبة

قم بتثبيت Axios ، ستستخدم هذه المكتبة لعمل طلبات HTTP من المتصفح و React-Google-reCAPTCHA. توفر هذه الحزمة تنفيذًا خاصًا بـ React لـ reCAPTCHA API.

npm قم بتثبيت رد فعل-ريكابتشا-جوجل أكسيوس - حفظ

دمج Google reCAPTCHA في تطبيق React

افتح ال ملف src / App.js، احذف كود boilerplate React ، وأضف الكود أدناه:

سيعرض هذا المكون نموذج تسجيل دخول بسيطًا يتضمن أداة Google reCAPTCHA.

أولاً ، قم باستيراد حزم React و Axios و reaction-google-recaptcha:

يستورد رد فعل ، {useState ، useRef} من'تتفاعل';
يستورد أكسيوس من"أكسيوس";
يستورد ريكابتشا من"رد فعل جوجل ريكابتشا";

ثم حدد ثلاثة متغيرات حالة: SuccessMsg و errorMsg و validToken. ستقوم التعليمات البرمجية الخاصة بك بتحديث هذه الحالات عند تقديم النموذج بنجاح والتحقق من صحة reCAPTCHA. بالإضافة إلى ذلك ، احصل على الموقع والمفاتيح السرية من ملف ENV.

وظيفةبرنامج() {
مقدار ثابت [SuccessMsg، setSuccessMsg] = useState ("")
مقدار ثابت [ErrorMsg، setErrorMsg] = useState ("")
مقدار ثابت [valid_token، setValidToken] = useState ([]) ؛
مقدار ثابت SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY ،
مقدار ثابت SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY ،

حدد خطاف useRef الذي يشير إلى مكون reCAPTCHA ، لالتقاط الرمز المميز الذي تم إنشاؤه بعد إكمال المستخدم لتحديات reCAPTCHA.

مقدار ثابت captchaRef = useRef (باطل);

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

بالإضافة إلى ذلك ، فإنه يتحقق مما إذا كان الرمز المميز موجودًا ، ويستدعي وظيفة التحقق من التحقق من الرمز المميز. بمجرد التحقق من الرمز المميز ، سيتم تحديث الحالة validToken ببيانات استجابة API.

مقدار ثابت مقبض غير متزامن (هـ) => {
 e.preventDefault () ؛
يترك الرمز المميز = captchaRef.current.getValue () ،
 captchaRef.current.reset () ،
لو (رمز) {
يترك valid_token = انتظر VerifyToken (الرمز المميز) ؛
 setValidToken (valid_token) ؛
لو (valid_token [0].نجاح حقيقي) {
وحدة التحكم.سجل("تم التحقق");
 setSuccessMsg ("يا هلا!! لقد قدمت النموذج ")
 } آخر {
وحدة التحكم.سجل("لم يتم التحقق");
 setErrorMsg (" آسف!! تحقق من أنك لست روبوتًا ")
 }
 }
 }

أخيرًا ، حدد وظيفة التحقق من الكلام التي سترسل طلب POST إلى نقطة نهاية خادم Express باستخدام Axios ، وتمرير رمز reCAPTCHA والمفتاح السري في نص الطلب. إذا كان الطلب ناجحًا ، فإنه يدفع بيانات الاستجابة إلى صفيف APIResponse ويعيد المصفوفة كنتيجة لذلك.

مقدار ثابت VerifyToken = غير متزامن (رمز) => {
يترك APIResponse = [] ،
يحاول {
يترك استجابة = انتظر Axios.post (` http://localhost: 8000 / تحقق من الرمز المميز, {
 reCAPTCHA_TOKEN: رمز مميز ،
 Secret_Key: SECRET_KEY ،
 });
 APIResponse.push (استجابة ['بيانات']);
يعود استجابة APIR
 } يمسك (خطأ) {
وحدة التحكم.log (خطأ) ؛
 }
 };

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

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

يعود (
"برنامج">
"عنوان التطبيق"> 
"نموذج تسجيل الدخول">


 {valid_token.length> 0 && valid_token [0].نجاح حقيقي
? <h3اسم الطبقة="textSuccess">{SuccessMsg}h3>
: <h3اسم الطبقة="textError">{ErrorMsg} h3>}

اسم المستخدم </p>
"نص" نائب ="اسم المستخدم..." />

كلمة المرور </p>
"كلمة المرور" نائب = "كلمة المرور..." />
 className ="recaptcha"
 مفتاح الموقع = {SITE_KEY}
 المرجع = {captchaRef}
 />
"يُقدِّم"> إرسال </button>
 </form>
 </div>
 </header>
 </div>
 );
}


يصدّرتقصير برنامج

أخيرًا ، قم بتشغيل خادم التطوير وتوجه إلى متصفحك http://localhost: 3000 لعرض النتائج.

قم بإنشاء Express Backend

للبدء ، في الدليل الجذر لمجلد المشروع بأكمله ، إنشاء خادم ويب سريع, وتثبيت هذه الحزم:

npm تثبيت cors الصريحة axios body-parser

قم بإعداد الخادم السريع

بعد ذلك ، افتح ملف index.js في مجلد مشروع الخادم ، وأضف هذا الرمز:

مقدار ثابت صريح = يتطلب('يعبر')
مقدار ثابت المحاور = يتطلب("أكسيوس");
مقدار ثابت كور = يتطلب("كورس");
مقدار ثابت التطبيق = صريح () ؛
مقدار ثابت bodyParser = يتطلب("محلل الجسم");
مقدار ثابت jsonParser = bodyParser.json () ،
مقدار ثابت المنفذ = process.env. بورت || 8000;
app.use (jsonParser) ؛
app.use (cors ()) ؛
app.post ("/ check-token", غير متزامن (مطلوب ، الدقة) => {
مقدار ثابت {reCAPTCHA_TOKEN، Secret_Key} = req.body؛
يحاول {
يترك استجابة = انتظر axios.post (` https://www.google.com/recaptcha/api/siteverify? سر =$ {مفتاح_السر}والاستجابة =$ {reCAPTCHA_TOKEN}`);
وحدة التحكم.log (response.data) ؛
يعود res.status (200) .json ({
 نجاح:حقيقي,
 رسالة: "تم التحقق من الرمز المميز بنجاح",
 Verify_info: response.data
 });
 } يمسك(خطأ) {
وحدة التحكم.log (خطأ) ؛
يعود res.status (500) .json ({
 نجاح:خطأ شنيع,
 رسالة: "خطأ في التحقق من الرمز المميز"
 })
 }
});
app.listen (PORT ، () => وحدة التحكم.سجل(بدأ التطبيق على المنفذ {PORT} دولار`));

يقوم هذا الرمز بما يلي:

• يحدد الخادم مسار النشر الذي يجعل طلب HTTP POST غير متزامن إلى واجهة برمجة تطبيقات reCAPTCHA من Google من أجل تحقق من رمز reCAPTCHA باستخدام Axios ، مروراً بالمفتاح السري للمصادقة في عنوان URL للطلب.
• إذا تم التحقق من رمز reCAPTCHA بنجاح ، يستجيب الخادم بكائن JSON يحتوي على خاصية "نجاح" تم تعيينها على "true" ، وهي خاصية "message" يشير إلى أنه تم التحقق من الرمز المميز بنجاح ، وأن خاصية "معلومات التحقق" تحتوي على معلومات حول استجابة التحقق من Google API.
• في حالة حدوث خطأ أثناء عملية التحقق ، يستجيب الخادم بكائن JSON يحتوي على ملف تم تعيين خاصية "Success" على false وخاصية "message" تشير إلى حدوث خطأ أثناء التحقق من رمز.

أخيرًا ، قم بتشغيل خادم العقدة واختبر وظيفة ميزة reCAPTCHA.

index.js العقدة

هل يمكن أن تضمن reCAPTCHAs الأمان ضد روبوتات السبام؟

وفقًا لـ Google ، تتمتع خدمة reCAPTCHA الخاصة بها بمعدل نجاح يزيد عن 99٪ ، مما يعني أن نسبة صغيرة فقط من البريد العشوائي يمكنها تجاوز ميزة أمان reCAPTCHA.

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