Google reCaptchaを検証する方法


9

お問い合わせフォームにgoogle recaptchaを追加しましたが、値もキャプチャなしで送信しています。私の連絡先ページでキャプチャのコードを使用しました:

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

私が使用したこれらの2つのコード。キャプチャを検証する方法を教えてください。


1
この拡張機能をインストールmagentocommerce.com/magento-connect/recaptcha-1.html
Raghu

これはキャプチャを検証します
ラグー2017

回答:


9

あなたはこのコードを試すべきです:私は私のサイトでこれを使用しています。

<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> 

テーマの組み込みのお問い合わせページで機能しますか?
Manish Gaur 2017

はい..それは..それが機能したかどうか私に知らせてください
NID

2
次に、form-validateをcontactFormに置き換えます
NID

1
Google Analyticsの拡張機能をインストールするだけです。 magentocommerce.com/magento-connect/…。Googleは、これらすべてをすでに追跡している素晴らしい仕事をしています。後でもっと堅牢なものが必要な場合は、より多くのことを行う有料の拡張機能があります。
NID 2017

1
これはあなた
NID

7

このスクリプトは、magentoのデフォルトの検証と同様に、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>

どうもありがとうございました。これは、prototype / validate.jsを使用してmagentoでreCaptchaを検証するための正しい答えです。魅力のように働いています!
Waleed Asender、2018年

これは受け入れられた答えであり、私の目的にうまく適合しています
ajmedway

こっちも一緒。ありがとう
biplabルーティング

これをbilling.phtmlファイルで使用したいのですが、このコードを使用しているがrecaptchaを検証していないことを示唆してください。`<script> window.onload = function(){// var recaptcha = document.forms [" co-billing-form "] [" g-recaptcha-response "]; var recaptcha = jQuery( '。g-recaptcha-response')。val(); recaptcha.required = true; recaptcha.oninvalid = function(e){alert( "キャプチャを入力してください"); falseを返します。}} </ script> `
Abi Sharma

6

お問い合わせフォームで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>

テーマのビルドされたコンタクトフォームにキャプチャコードを実装しました。私のテーマに従って適宜教えてください。私はmagentoの初心者なので、助けてください
Manish Gaur

私はこのコードを組み込みの連絡先フォームに実装します
Jigs Parmar 2017

このコードをフォームに実装し、data-sitekeyのみを変更する必要があります
Jigs Parmar

あなたが答えを得たら、私の答えを受け入れてください
Jigs Parmar '13 / 07/13

ええ.........あなたはこの質問の答え探してくださいます magento.stackexchange.com/questions/183456/...
マニッシュガウル

5

上記の受け入れられたJavaScriptソリューションは、私の意見では間違いなく進むべき道ではありません。JS(ほとんどがJS)を使用していないボットは、検証をバイパスし、ブロックしようとしているスパムをすべて取得します。常にサーバー上で常に検証します。JS検証は、UXの最初のステップにすぎません。

とにかく、複数の解決策がありますが、Magento 1.9で何時間もの調査を行った結果、私にとってはうまくいきました。これはもともと上記のMikeの答えに基づいて構築されていましたが、前の関数は通常、サーバー構成に応じてhttpラッパーエラーを表示するため、cURLのfile_get_contentsを交換します。

/ app / code / local / YourVendorName / ValidateCaptcha /フォルダーを作成して、独自のモジュールを作成します

新しいValidateCaptchaフォルダーに、Customer.phpファイルを含むModelフォルダーを追加します。これは、Magentoによって提供されるコアCustomer.phpファイルをオーバーライドするために使用されます。

このコードをコピーして貼り付けます。

<?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をテーマヘッドに追加する必要があります。app / design / frontend / default / YOURTHEME / template / page / 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 } ?>

app / design / frontend / default / YOURTHEME / template / persistent / customer / form / register.phtmlで、下部にあるボタンセット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>

ほぼ完了しました!次のようにapp / 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

3

キャプチャを検証するには、フォームの値と検証を保存するための保存コントローラを作成します。

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
}
}
}

上記のサンプルコードのサイトキーとシークレットキーを置き換えたことを確認してください。


フォームをこのファイルにリンクするにはどうすればよいですか?フォームはPOSTメソッドでaction = "<?php echo $ this-> getPostActionUrl()?>"に移動します。
ピーナッツ

1

NID、

reCaptchaスクリプトの抜粋は動作するように見えますが、Magentoのソースhead.phtmlに入力されていることを明確にしてください。(またはform.phtml?)はMagentoのデフォルトの外側のすぐ下に配置されます。

特にphpを入力するときの質問は、以下の例のように、Magentoがテンプレートソースページのほとんどの上部に配置するその直後のphpコメントセクションの後に入力するのが通常の習慣ですか?

phpタグ内のMagento免責事項コード。ここにキャプチャをここに挿入snippit script here?

また、以下のこのビデオのこのreCaptcha応答検証コードがMagentoのメソッドの構造に対応できるようになっているのは何ですか。このチュートリアルでは、最初の行で$ reCaptcha = $ _POST行を使用していますか?

最後の質問の選択肢:私が使用している場合はどのようなPHPのコードをPHPでしょう。このreCAPTCHAの応答の検証を行うためのバージョンを、このようなPHPのトップMagentoのデフォルトのテンプレート緑のコメントセクションの後に入力することsnippit

一部のコードでは、ユーザーが各フィールドの下に表示されるすべての情報を入力しない場合、デフォルトのcontactFormがすでに赤いアラートを出しているため、メッセージがフロントエンドに表示されないようにします。このcontactFormでreCaptchaを機能させたいだけです。しかし、将来の使用のためにも私が理解できる方法で。あなたの方法は、開発者またはプログラマーとして自分で作成したものですか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.