php - 自動化 - 複数ページ キャプチャ




1つのページに複数の再キャプチャを表示するにはどうすればよいですか? (11)

私は1つのページに2つのフォームを持っています。 フォームの1つには、いつも再表示されています。 もう1つは、ログインの試行回数を最大限にするなどの特定のイベントの後にのみ再チャプターを表示する必要があります。 ですから、同じページに2つの再キャプチャが必要な時があります。 これは可能ですか? 私はおそらく両方のために単一のものを使うことができると知っていますが、私はレイアウトを持っているように、私は2を持つことを好むでしょう。ありがとう。

更新:まあ、それは可能ではないかもしれないと思います。 他のキャプチャライブラリをreCaptchaと並べて使用することをお勧めしますか? 私は本当に同じページに2つのcaptchaを持つことができるようにしたい。

アップデート2:各フォームをiframeに入れたらどうなりますか? これは容認できる解決策でしょうか?


Recaptcha Ajaxコールバックを上書きするだけでも可能です。 作業中です: http://jsfiddle.net/Vanit/Qu6kn/ ://jsfiddle.net/Vanit/Qu6kn/

上書きするとDOMコードが実行されないので、プロキシdivも必要ありません。 コールバックを再度トリガーしたいときは常にRecaptcha.reload()を呼び出します。

function doSomething(challenge){
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}

//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
    doSomething(challenge);
}

//Called on page load
Recaptcha.challenge_callback = function(){
    doSomething(RecaptchaState.challenge)
}

Recaptcha.create("YOUR_PUBLIC_KEY");

raphadkoの答えにビットを追加するには、(1ページに)複数のcaptchaがあるので、(普遍的な) g-recaptcha-response POSTパラメータを使うことはできません(captchaの応答が1つしかないためです)。 代わりに、各captchaに対してgrecaptcha.getResponse(opt_widget_id)コールを使用する必要があります。 私のコードは以下の通りです(各キャプチャがそのフォームの中にある場合)。

HTML:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

そして

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

JavaScript:

var CaptchaCallback = function(){
    var widgetId;

    $('[id^=RecaptchaField]').each(function(index, el) {

         widgetId = grecaptcha.render(el.id, {'sitekey' : 'your_site_key'});

         $(el).closest("form").submit(function( event ) {

            this.grecaptcha.value = "{\"" + index + "\" => \"" + grecaptcha.getResponse(widgetId) + "\"}"

         });
    });
};

動的に変更されたすべての要素にイベントデリゲーション( append要素の後にDOMリフレッシュするを参照)を適用することに注意してください。 これは、フォームsubmitイベントに対するすべての個々のcapthaの応答に結びつきます。


この答えは@raphadkoの答えの拡張です。

ajaxリクエストのようにcaptchaコードを手動で抽出する必要がある場合は、次の呼び出しを行う必要があります。

grecaptcha.getResponse(widget_id)

しかし、どのようにウィジェットIDパラメータを取得できますか?

CaptchaCallbackのこの定義を使用して、各g-recaptchaボックスのウィジェットIDをHTMLデータ属性として格納します。

var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        var widgetId = grecaptcha.render(el, {'sitekey' : 'your code'});
        jQuery(this).attr('data-widget-id', widgetId);
    });
};

それから私は電話することができます:

grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));

コードを抽出する。


これはjQueryのclone()関数で簡単に実現できます。

だから、あなたはrecaptchaのために2つのラッパーdivを作成する必要があります。 私の最初のフォームのrecaptcha div:

<div id="myrecap">
    <?php
        require_once('recaptchalib.php');
        $publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
        echo recaptcha_get_html($publickey);
    ?>
</div>

2番目のフォームのdivは空です(別のID)。 だから私のことはちょうどです:

<div id="myraterecap"></div>

その後、JavaScriptは非常にシンプルです:

$(document).ready(function() {
    // Duplicate our reCapcha 
    $('#myraterecap').html($('#myrecap').clone(true,true));
});

おそらく、 clone()内にtrue値を持つ2番目のパラメータは必要ありませんが、それを持つことは痛いことではありません...このメソッドの唯一の問題は、フォームをajax経由で送信している場合です。同じ名前の2つの要素があり、正しい要素の値を取得する方法でもうちょっと賢明にしなければなりません(reCaptcha要素の2つのIDは、誰かが必要な場合に備えて#recaptcha_response_fieldと#recaptcha_challenge_fieldです)


シンプルでわかりやすい:

1)あなたのrecaptchaフィールドを通常これで作成します:

<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>

2)このスクリプトをロードします:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

3)これを呼び出してフィールドを反復し、recaptchasを作成します。

<script type="text/javascript">
  var CaptchaCallback = function() {
    $('.g-recaptcha').each(function(index, el) {
      grecaptcha.render(el, {'sitekey' : 'your_key'});
    });
  };
</script>

ページのソースコードを見ると、私はreCaptchaの部分を取り、コードを少し変更しました。 コードは次のとおりです:

HTML:

<div class="tabs">
    <ul class="product-tabs">
        <li id="product_tabs_new" class="active"><a href="#">Detailed Description</a></li>
        <li id="product_tabs_what"><a href="#">Request Information</a></li>
        <li id="product_tabs_wha"><a href="#">Make Offer</a></li>
    </ul>
</div>

<div class="tab_content">
    <li class="wide">
        <div id="product_tabs_new_contents">
            <?php $_description = $this->getProduct()->getDescription(); ?>
            <?php if ($_description): ?>
                <div class="std">
                    <h2><?php echo $this->__('Details') ?></h2>
                    <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
                </div>
            <?php endif; ?>
        </div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="more_info_recaptcha_box" class="input-box more_info_recaptcha_box"></div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="make_offer_recaptcha_box" class="input-box make_offer_recaptcha_box"></div>
    </li>
</div>

jQuery:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var recapExist = false;
      // Create our reCaptcha as needed
        jQuery('#product_tabs_what').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            } else if(recapExist == 'more_info_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            }
        });
        jQuery('#product_tabs_wha').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            } else if(recapExist == 'make_offer_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :)
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            }
        });
    });
</script>

ここでは単純なjavascriptタブの機能を使用しています。 したがって、そのコードは含まれませんでした。

ユーザーが "Request Information" (#product_tabs_what)をクリックすると、JSはrecapExistfalseか何らかの値を持っているかどうかをチェックします。 値がある場合、これはRecaptcha.destroy();を呼び出しRecaptcha.destroy(); 古いロード済みのreCaptchaを破壊し、このタブ用に再作成します。 それ以外の場合は、reCaptchaが作成され、 #more_info_recaptcha_box divに配置されます。 「オファーを作成」 #product_tabs_whaタブと同じです。


正確にそれをするための素晴らしいガイドはここにあります:

http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html

基本的には、いくつかのパラメータをapi呼び出しに追加し、手動で各recaptchaをレンダリングします:

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
<script>
        var recaptcha1;
        var recaptcha2;
        var myCallBack = function() {
            //Render the recaptcha1 on the element with ID "recaptcha1"
            recaptcha1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'light'
            });

            //Render the recaptcha2 on the element with ID "recaptcha2"
            recaptcha2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'dark'
            });
        };
</script>

PS: "grecaptcha.render"メソッドはIDを受け取ります


現在のバージョンのRecaptcha( reCAPTCHA APIバージョン2.0 )では、1ページに複数の再キャプチャを作成できます。

recaptchaを複製する必要も、問題を回避しようとする必要もありません。 あなたはrecaptchasのために複数のdiv要素を配置し、recaptchasをその内部に明示的にレンダリングする必要があります。

これはGoogleのrecaptcha APIで簡単です:
developers.google.com/recaptcha/docs/display#explicit_render

ここにhtmlコードの例を示します:

<form>
    <h1>Form 1</h1>
    <div><input type="text" name="field1" placeholder="field1"></div>
    <div><input type="text" name="field2" placeholder="field2"></div>
    <div id="RecaptchaField1"></div>
    <div><input type="submit"></div>
</form>

<form>
    <h1>Form 2</h1>
    <div><input type="text" name="field3" placeholder="field3"></div>
    <div><input type="text" name="field4" placeholder="field4"></div>
    <div id="RecaptchaField2"></div>
    <div><input type="submit"></div>
</form>

あなたのjavascriptコードでは、recaptchaのコールバック関数を定義する必要があります:

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

その後、あなたのrecaptchaスクリプトのURLは次のようになります:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

または、あなたのrecaptchaフィールドにIDを与える代わりに、クラス名を与えてクラスセレクタでこれらの要素をループし、.render()を呼び出すことができます


私はフッタの中に常に表示される連絡フォームを持っており、アカウントの作成のようないくつかのページもcaptchaを持つことができるので、動的であり、次の方法でjQueryを使っています:

html:

<div class="g-recaptcha" id="g-recaptcha"></div>

<div class="g-recaptcha" id="g-recaptcha-footer"></div>

javascript

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
  var CaptchaCallback = function(){        
      $('.g-recaptcha').each(function(){
        grecaptcha.render(this,{'sitekey' : 'your_site_key'});
      })
  };
</script>

私は目に見えないrecaptchaを使用します。 あなたのボタンで "formname = 'yourformname'"のようなタグを使用して、どのフォームを送信するかを指定し、送信フォーム入力を非表示にします。

これの利点は、html5フォームの検証をそのまま維持できることです.1つの再呼び出し、複数のボタンインタフェースがあります。 recaptchaによって生成されたトークンキーの "captcha"入力値をキャプチャするだけです。

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
var formanme = ''
$('button').on('click', function () { formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>

私は、このFARがより簡単で簡単に管理できることを発見しました。


var ReCaptchaCallback = function() {
    	 $('.g-recaptcha').each(function(){
    		var el = $(this);
    		grecaptcha.render(el.get(0), {'sitekey' : el.data("sitekey")});
    	 });  
        };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallback&render=explicit" async defer></script>


ReCaptcha 1
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 2
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 3
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>







recaptcha