1. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

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

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

    بعض إيجابيات وسلبيات استخدام " reCAPTCHA "على موقعك:
    الايجابيات
    - تحمي " reCAPTCHA " بشكل فعال سلامة موقعك عن طريق منع البريد العشوائي وإساءة الاستخدام وسرقة البيانات من الروبوتات.
    بعض أهم مميزات استخدام " reCAPTCHA " :
    - يمكن للجميع استخدام هذه الخدمة مجانًا.
    - يحمي الاختبار مواقع الويب من البريد العشوائي والاحتيال وإساءة الاستخدام. هذا الاختبار عبارة عن طبقة أمان إضافية فعالة جدًا لمواقع الويب التي تحتوي على نماذج تسجيل وأقسام تعليق.
    - تتوفر أنواع مختلفة من الاختبارات وخيار لاستخدام الاختبارات المختلفة لأنواع مختلفة من النماذج.
    هذه العبارة أشهر من نار على علم في مجال تطوير و برمجة المواقع.

    بينما يوفر reCAPTCHA خيارات وطرقًا مختلفة لحماية الموقع من البريد العشوائي وإساءة الاستخدام ، فإن الاختبار لا يخلو من عيوبه.

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

    يـــتـــبـــع
     
  2. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إنشاء reCaptcha الخاص بك على Google

    سنحتاج في هذه المرحلة إلى مفتاحين. مفتاح الموقع والمفتاح السري ( site key and secret key ).
    سيتم استخدام هذه المفاتيح في تكوين Captcha الخاص بك. الأول سيتم التعامل معه كما يوحى إسمه على الموقع. أما الثاني، فسنستعمله مع السرفر لتلقى الإجابة.

    أول شيء يجب فعله هو تسجيل الدخول إلى حساب Google الخاص بك على الرابط التالي:
    كود:
    https://www.google.com/recaptcha/admin/create
    1) أضف تسمية ( Wording )
    - هذه التسمية هي بمثابة عنوان أو تعريف للحساب.

    2) حدد reCAPTCHA v2 لأننا سنستخدمه في هذا العرض التوضيحي.

    3) حدد التحقق من صحة الاستعلامات باستخدام مربع الاختيار (مربع الاختيار)

    4) أضف المجالات ( domains ) التي تريدها. لا ننسى المضيف المحلي ( localhost ) للسماح بإجراء اختباراتنا.

    هام: reCAPTCHA لن تعمل خارج نطاق المجالات المذكورة

    5) اقبل شروط خدمة reCAPTCHA عن طريق تحديد مربع الاختيار ذي الصلة.

    6) انقر فوق حفظ أو إرسال لإتمام التسجيل.

    [​IMG]

    [​IMG]

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

    يـــتـــبـــع
     
  3. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إعدادت الآدات أو الإختبار ( هيكل ومنهج العملية )

    في مرحلة أولى، سنقوم بإنشاء ملف "HTML" أين سنقوم بإدراج حاوية "An html DIV tag" لآداتنا " reCAPTCHA "، و علامة "<p>" أين ستظهر النتيجة.
    سيتضمن هذا الملف أيظا كود " JavaScript " و به بعض الإعدادات للأداة.
    - مفتاح الموقع ( ضروري )
    - الدالة المسؤلة عن إرسال البيانات، و استلام الرد ( هي طريقة من الكثير من الطرق المستعملة )
    - مظهر اللون "theme " ( إختياري )


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

    يـــتـــبـــع
     
  4. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إعدادت الآدات أو الإختبار ( التطبيق )

    ذكرنا في هذه المشاركة بأنه ستتم عملية إعادة توجيهك.
    هذا ما ستجده على صفحة التوحيه:
    [​IMG]

    المفتاح الأول هو مفتاح الموقع، و الثاني هو المفتاح السري.
    قم بنسخها و لصقها كما هو مبين أسفله.
    ملف الـ "HTML"​
    كود HTML:
    <!DOCTYPE html>
    <html dir="rtl">
        <head>
            <meta charset="UTF-8">
            <title>reCAPTCHA مثال</title>
            <!-- JQuery -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <!-- reCAPTCHA v2 API استدعاء -->
           <script src="https://www.google.com/recaptcha/api.js?hl=ar&onload=onloadCallback&render=explicit" async defer></script>
        
            <script>
                var verifyCallback = function(response) {
                    // التي تتلقى استجابة التحليل <p> العلامة
                    var res = document.getElementById('result'); //alert(response);
                     // إرسال البيانات إلى الصفحة المعنية
                    $.post("form.php",{token: response}, function(result) {
                        res.innerHTML = result.redirect + ' => إعادة التوجيه <br>' + result.msg + ' => الرسالة'
                    });
                };
                //( parameter ) وظيفتنا التي تم تمريرها كمعامل في الأعلى
                var onloadCallback = function() {
                    grecaptcha.render('g-response', {
                        'sitekey' : '__ مفتاخ الموقع __',
                        'callback' : verifyCallback,
                        'theme' : 'dark'
                    });
                };
            </script>
        </head>
        <body>
            <center>
                <h1> مثال مبسط عن كيفية استعمال Google reCAPTCHA</h1>
                <p id="result"></p>
                <div id="g-response"></div>
            </center>
        </body>
    </html>

    ملف الـ "PHP" الذي كما لحظتم، أسميناه "form.php" في ملف الـ "HTML"​
    كود PHP:
    <?php
    function CheckCaptcha(?string $userResponse ''): ?array {
     
        
    $res '';
     
        if(
    $userResponse)
        {
       
            
    $url 'https://www.google.com/recaptcha/api/siteverify';
            
    $fields_string '';
            
    $fields = [
                
    'header'   => "Content-type: application/x-www-form-urlencoded\r\n",
                
    'method'   => 'POST',
                
    'secret'   => '__ المفتاح السري __',
                
    'response' => $userResponse
            
    ];
            foreach(
    $fields as $key => $value$fields_string .= $key '=' $value '&';
            
    $fields_string rtrim($fields_string'&');
         
            
    // We check if curl is installed
            
    if(function_exists('curl_version'))
            {
                
    $ch curl_init();
                
    curl_setopt($chCURLOPT_URL$url);
                
    curl_setopt($chCURLOPT_POSTcount($fields));
                
    curl_setopt($chCURLOPT_POSTFIELDS$fields_string);
                
    curl_setopt($chCURLOPT_RETURNTRANSFERTrue);

                
    $res curl_exec($ch);
                
    curl_close($ch);
             
            }else{
                
    // If not, we will use file_get_contents
                
    $res file_get_contents($url);
            }
        }
     
        return 
    json_decode($restrue);
    }

    header('Content-type: application/json');


    $captcha filter_input(INPUT_POST'token'FILTER_SANITIZE_STRING);
     
    if(!
    $captcha){
        echo 
    json_encode(
            [
                
    'success'  => 'false',
                
    'msg'      => '(reCaptcha) يرجى التحقق من النموذج',
                
    'redirect' => '404'
            
    ]
        );
        exit;
    }

    // Call the function CheckCaptcha
    $result CheckCaptcha($captcha);

    if(
    $result){
        if (
    $result['success']) {
            
    //If the user has checked the Captcha box
            
    echo json_encode(
                [
                    
    'success'  => 'true',
                    
    'msg'      => 'تم التحقق من reCaptcha بنجاح',
                    
    'redirect' => 'home'
                
    ]
            );
        }else {
            
    // If the CAPTCHA box wasn't checked
            
    echo json_encode(
                [
                    
    'success'  => 'false',
                    
    'msg'      => 'reCaptcha فشل التحقق من',
                    
    'redirect' => '404'
                
    ]
            );
        }
    }else {
        
    // If the CAPTCHA box wasn't checked
        
    echo json_encode(
            [
                
    'success' => 'false',
                
    'msg' => '(reCaptcha) يرجى التحقق من النموذج'
            
    ]
        );
    }



    بهذه الطريقة، نكون قد أتممنا المطلوب و كل شئ على ما يرام.

    [​IMG]
    [​IMG]

    متابعة طيبة
     
جاري تحميل الصفحة...