วิธีการตรวจสอบ reCaptcha ของ Google

ฉันเพิ่ม google recaptcha ในแบบฟอร์มติดต่อเราแล้ว แต่ค่าก็ยังส่งโดยไม่ต้องแจ้งลบความคิดเห็น ฉันได้ใช้ในหน้าติดต่อของฉันรหัสต่อไปนี้สำหรับ captcha:

 <div class="g-recaptcha" data-sitekey="XXXXXXXXXX"></div> 
 <script src='https://www.google.com/recaptcha/api.js'></script>

รหัสสองตัวนี้ฉันใช้ไปแล้ว โปรดบอกฉันว่าฉันจะตรวจสอบ captcha ได้อย่างไร

คุณควรลองใช้รหัสนี้: ฉันใช้สิ่งนี้ในเว็บไซต์ของฉัน

<script>
window.onload = function() {
  var recaptcha = document.forms["contactForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {

    alert("Please complete the captcha");
   }
}
</script> 

สคริปต์นี้ใช้สำหรับการตรวจสอบความถูกต้องของ google reCaptcha เช่นการตรวจสอบเริ่มต้นของวีโอไอพี โปรดใช้มัน

<form name="freeeventForm" id="freeeventForm">
    <div id="RecaptchaField"></div>
    <input type="hidden" class="validate-reCAPTCHA">
</form>
        <script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
    <script type="text/javascript">
        //< ![CDATA[
            var CaptchaCallback = function() {  
            grecaptcha.render('RecaptchaField', {'sitekey' : '6LeuiDwUAAAAALByt-xxxxxxxxxxx-xUsZHFkeEP'});
        };
        var customForm = new VarienForm('freeeventForm');
        Validation.add('validate-reCAPTCHA','reCAPTCHA is mandatory',function(){
            var response = grecaptcha.getResponse();
            if (response.length === 0) {
                    return false;
            }
            return true;
    });
        //]]>
    </script>

โซลูชัน JavaScript ที่ได้รับการยอมรับด้านบนไม่ใช่วิธีการในความคิดของฉัน บอทใด ๆ ที่ไม่ได้ใช้ JS (ซึ่งส่วนใหญ่เป็นพวกมัน) จะผ่านการตรวจสอบความถูกต้องของคุณและคุณจะได้รับสแปมทั้งหมดที่คุณพยายามบล็อก ตรวจสอบเสมอบนเซิร์ฟเวอร์เสมอ การตรวจสอบ JS เป็นเพียงขั้นตอนแรก UX

อย่างไรก็ตามมีวิธีแก้ปัญหาหลายอย่าง แต่นี่คือสิ่งที่ฉันใช้ใน Magento 1.9 หลังจากการวิจัยหลายชั่วโมง สิ่งนี้สร้างขึ้นตามคำตอบของไมค์ด้านบน แต่เปลี่ยน file_get_contents สำหรับ cURL เนื่องจากฟังก์ชั่นก่อนหน้านี้มักจะให้ข้อผิดพลาด http wrapper ของคุณขึ้นอยู่กับการกำหนดค่าเซิร์ฟเวอร์ของคุณ

สร้างโมดูลของคุณเองโดยสร้างโฟลเดอร์ / แอพ / รหัส / local / YourVendorName / ValidateCaptcha /

ในโฟลเดอร์ ValidateCaptcha ใหม่ของคุณเพิ่มโฟลเดอร์รุ่นด้วยไฟล์ Customer.php สิ่งนี้จะถูกใช้เพื่อแทนที่ไฟล์ core Customer.php ที่จัดทำโดย Magento

คัดลอกและวางรหัสนี้:

<?php
class YourVendorName_ValidateCaptcha_Model_Customer extends Mage_Customer_Model_Customer {

    /**
     * Validate customer attribute values.
     *
     * @return bool
     */
    public function validate()
    {
        // This section is from the core file
        $errors = array();
        if (!Zend_Validate::is( trim($this->getFirstname()) , 'NotEmpty')) {
            $errors[] = Mage::helper('customer')->__('The first name cannot be empty.');
        }

        if (!Zend_Validate::is( trim($this->getLastname()) , 'NotEmpty')) {
            $errors[] = Mage::helper('customer')->__('The last name cannot be empty.');
        }

        if (!Zend_Validate::is($this->getEmail(), 'EmailAddress')) {
            $errors[] = Mage::helper('customer')->__('Invalid email address "%s".', $this->getEmail());
        }

        $password = $this->getPassword();
        if (!$this->getId() && !Zend_Validate::is($password , 'NotEmpty')) {
            $errors[] = Mage::helper('customer')->__('The password cannot be empty.');
        }
        if (strlen($password) && !Zend_Validate::is($password, 'StringLength', array(6))) {
            $errors[] = Mage::helper('customer')->__('The minimum password length is %s', 6);
        }
        $confirmation = $this->getPasswordConfirmation();
        if ($password != $confirmation) {
            $errors[] = Mage::helper('customer')->__('Please make sure your passwords match.');
        }

        $entityType = Mage::getSingleton('eav/config')->getEntityType('customer');
        $attribute = Mage::getModel('customer/attribute')->loadByCode($entityType, 'dob');
        if ($attribute->getIsRequired() && '' == trim($this->getDob())) {
            $errors[] = Mage::helper('customer')->__('The Date of Birth is required.');
        }
        $attribute = Mage::getModel('customer/attribute')->loadByCode($entityType, 'taxvat');
        if ($attribute->getIsRequired() && '' == trim($this->getTaxvat())) {
            $errors[] = Mage::helper('customer')->__('The TAX/VAT number is required.');
        }
        $attribute = Mage::getModel('customer/attribute')->loadByCode($entityType, 'gender');
        if ($attribute->getIsRequired() && '' == trim($this->getGender())) {
            $errors[] = Mage::helper('customer')->__('Gender is required.');
        }

        // additional reCAPTCHA validation
        // this should actually be in it's own function, but I've added 
        // it here for simplicity

        // Magento uses this method for a few different requests, so make
        // sure it's limited only to the 'createpost' action
        $action = Mage::app()->getRequest()->getActionName();
        if ( $action == 'createpost' ) { // restrict to the registration page only
            $captcha = Mage::app()->getRequest()->getPost('g-recaptcha-response', 1);
            if ( $captcha == '' ) {
                // if the field is empty, add an error which will be
                // displayed at the top of the page
                $errors[] = Mage::helper('customer')->__('Please check the reCAPTCHA field to continue.');
            } else {
                $secret = 'your-secret-key-goes-here';
                $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $captcha . '&remoteip=' . $_SERVER["REMOTE_ADDR"];

                $ch = curl_init();
                // if you're testing this locally, you'll likely need to 
                // add your own CURLOPT_CAINFO parameter or you'll get
                // SSL errors
                curl_setopt( $ch, CURLOPT_URL, $url );
                curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
                $response = curl_exec( $ch );

                $result = json_decode( $response, true );
                if ( trim( $result['success'] ) != true ) {
                    // Add reCAPTCHA error
                    // This will be shown at the top of the registration page
                    $errors[] = Mage::helper('customer')->__('reCAPTCHA unable to verify.');
                }
            }
        }

        // now return the errors with your reCAPTCHA validation as well
        if (empty($errors)) {
            return true;
        }
        return $errors;
    }


}

ตอนนี้เพิ่มโฟลเดอร์ etc เข้ากับโมดูลของคุณและสร้าง config.xml ด้วยรายการต่อไปนี้:

<?xml version="1.0"?>
<config>
    <modules>
        <YourVendorName_ValidateCaptcha>
            <version>1.0</version>
        </YourVendorName_ValidateCaptcha>
    </modules>

    <global>
       <models>
          <customer>
              <rewrite>
                  <customer>YourVendorName_ValidateCaptcha_Model_Customer</customer>
              </rewrite>
          </customer>
       </models>
    </global>
</config>

ต่อไปคุณจะต้องเพิ่ม JS ลงในส่วนหัวของธีมของคุณ ภายใต้แอป / ออกแบบ / ส่วนหน้า / ค่าเริ่มต้น / YOURTHEME / แม่แบบ / หน้า / html / head.phtml เพิ่มสิทธิ์นี้ในตอนท้าย หากคุณไม่มีไฟล์นี้ให้คัดลอกไฟล์จากไฟล์ฐาน อย่าเขียนทับไฟล์ฐานแม้ว่า ทำด้วยตัวเองเสมอ!

<?php
/* reCAPTCHA */
if ( strpos( Mage::helper('core/url')->getCurrentUrl(), 'account/create') != false ) { ?>   
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php } ?>

ตอนนี้อยู่ในแอพ / ออกแบบ / ส่วนหน้า / ค่าเริ่มต้น / YOURTHEME / แม่แบบ / แบบถาวร / ลูกค้า / แบบฟอร์ม / register.phtml เพิ่มสิทธิ์นี้ก่อน div div ชุดปุ่มใกล้ด้านล่าง:

    <div class="g-recaptcha" data-sitekey="your-site-key-goes-here"></div>
    <span id="captcha-required" style='display:none; color:#ff0000'><?php echo $this->__('Please Fill Recaptcha To Continue'); ?></span>

เกือบเสร็จแล้ว! ตอนนี้เพียงลงทะเบียนโมดูลใหม่ของคุณโดยการสร้างแอพ / etc / modules / YourVendorName / ValidateCaptcha.xml ด้วยสิ่งต่อไปนี้:

<?xml version="1.0"?>
<config>
    <modules>
        <YourVendorName_ValidateCaptcha>
            <active>true</active>
            <codePool>local</codePool>
        </YourVendorName_ValidateCaptcha>
    </modules>
</config>

แทนที่ YourVendorName ด้วยสิ่งที่คุณต้องการ โครงสร้างสุดท้ายของคุณควรมีลักษณะดังนี้:

- app
  - code
    - local
      - YourVendorName
        - ValidateCaptcha
          - etc
            config.xml
          - Model
            Customer.php
- design
  - frontend
    - default
      - YOURTHEME
        - template
          - customer
            - form
              register.phtml
          - page
            - html
              head.phtml
          - persistent
            - customer
              - form
                register.phtml
- etc
  - modules
    YourVendorName_ValidateCaptcha.xml

ฉันใช้ recaptcha ในแบบฟอร์มการติดต่อ ..

<form action="<?php echo Mage::getUrl('mcrecaptcha/index/save'); ?>" id="contactForm" method="post" onSubmit="return checkcaptcha() ;">
    <ul class="form-list">
            <li class="fields">
                <div class="field">
                    <div class="input-box">
                        <input placeholder="Name" name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
                    </div>
                </div>
                <div class="field">
                    <div class="input-box">
                        <input placeholder="Email" name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email contact_us_margin_top" type="text" />
                    </div>
                </div>
            </li>
            <li>
                <div class="input-box">
                    <input placeholder="Telephone" name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text contact_us_margin_top" type="text" />
                </div>
            </li>
            <li class="wide">
                <div class="input-box">
                    <textarea placeholder="Comment" name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text contact_us_margin_top" cols="5" rows="3" style="width:100%;"></textarea>
                </div>
            </li>
               <li id="rcode">  
                        <div class="captcha">
                                <div class="g-recaptcha contact_us_margin_top" data-sitekey="6Ldi8xsUAAAAAHsK15YxKsdhIn6lGk-RUIk222-f"> </div>
                        </div>
                        <div class="buttons-set contact_us_margin_top">
                            <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
                            <button type="submit" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button" onClick="_gaq.push(['_trackEvent', 'Submit', 'contacts click','Contact Us'])"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button>
                        </div>
                        <span class='captcha-error'><?php echo Mage::helper('contacts')->__('Please check the the captcha form.') ?></span>
                </li>      
        </ul>
</form>

<script>
function checkcaptcha()
{
    if((jQuery('#g-recaptcha-response').val())=='')
    {
        jQuery('.captcha-error').css('display','block');
        return false;
    }
    else
    {
        jQuery('.captcha-error').css('display','none');
    }

}
</script>

ในการตรวจสอบความถูกต้องของ captcha ให้สร้างตัวควบคุมการบันทึกสำหรับการบันทึกค่าแบบฟอร์มของคุณและการตรวจสอบความถูกต้อง

namespace Mike\SampleModule\Controller;

class Save extends \Magento\Framework\App\Action\Action
{
/**
* @var Google reCaptcha Options
*/
private static $_siteVerifyUrl = "https://www.google.com/recaptcha/api/siteverify?";
private $_secret;
private static $_version = "php_1.0";
/**
* Save Form Data
*
* @return array
*/
public function execute()
{
$captcha = $this->getRequest()->getParam('g-recaptcha-response');
$secret = "<--your secret key-->"; //Replace with your secret key
$response = null;
$path = self::$_siteVerifyUrl;
$dataC = array (
'secret' => $secret,
'remoteip' => $_SERVER["REMOTE_ADDR"],
'v' => self::$_version,
'response' => $captcha
);
$req = "";
foreach ($dataC as $key => $value) {
     $req .= $key . '=' . urlencode(stripslashes($value)) . '&';
}
// Cut the last '&'
$req = substr($req, 0, strlen($req)-1);
$response = file_get_contents($path . $req);
$answers = json_decode($response, true);
if(trim($answers ['success']) == true) {
    // Captcha Validated
    // Save Form Data
}else{
    // Display Captcha Error
}
}
}

ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนรหัสไซต์และรหัสลับในรหัสตัวอย่างด้านบน

NID,

Snippit สคริปต์ reCaptcha ของคุณดูเหมือนว่าจะใช้งานได้ แต่จะมีการอธิบายให้ชัดเจนหรือไม่ (หรือ form.phtml?) ที่จะวางไว้ด้านล่างขวานอก Magento เริ่มต้นก่อน PHP ในประเภทสีเขียวเพราะมัน

คำถามเมื่อเข้าสู่ php โดยเฉพาะอย่างยิ่งมันเป็นเรื่องปกติไหมที่จะใส่มันหลังจากส่วนความเห็น php ทันทีที่ Magento วางอยู่ด้านบนสุดสำหรับหน้าเทมเพลตส่วนใหญ่ของพวกเขาเช่นตัวอย่างด้านล่างนี้?

รหัสการปฏิเสธวีโอไอพีที่นี่ในแท็ก php วาง RECAPTCHA HERE ที่นี่สคริปต์ snippit ที่นี่?

นอกจากนี้สิ่งที่ทำให้รหัสยืนยันการตอบสนอง reCaptcha นี้ในวิดีโอด้านล่างรองรับเพิ่มเติมสำหรับโครงสร้างของวิธีการของวีโอไอพี: บทช่วยสอนนี้ใช้ในบรรทัดแรกบรรทัด $ reCaptcha = $ _POST ?

คำถามสุดท้ายทางเลือก: จะทำอย่างไรถ้าฉันใช้php version เพื่อทำการตรวจสอบการตอบกลับ reCaptcha นี้ php code snippit จะถูกป้อนหลังจากส่วนแม่แบบเริ่มต้นของ magento สีเขียวส่วนข้อคิดเห็นคอมเม้นท์ของ php เช่นนี้

โค้ดบางตัวที่ฉันไม่ต้องการให้ข้อความปรากฏที่ส่วนหน้าเนื่องจาก contactForm เริ่มต้นให้การแจ้งเตือนสีแดงแล้วหากผู้ใช้ไม่ป้อนข้อมูลทั้งหมดที่จะพูดด้านล่างแต่ละฟิลด์ฉันแค่ต้องการ reCaptcha ให้ทำงานกับ contactForm นี้ แต่ในแบบที่ฉันจะเข้าใจเพื่อใช้ในอนาคตด้วย วิธีการของคุณถูกสร้างขึ้นด้วยตัวเองในฐานะนักพัฒนาหรือโปรแกรมเมอร์?