1ページに2つのフォームがあります。フォームの1つには、常に表示されるrecaptchaがあります。もう1つは、ログイン試行の最大化などの特定のイベントの後にのみreCAPTCHAを表示する必要があります。そのため、同じページに2つのreCAPTCHAを表示する必要がある場合があります。これは可能ですか？おそらく両方に1つを使用できることはわかっていますが、レイアウトの方法では、2つを使用したいと思います。ありがとうございます。
更新：まあ、それは不可能かもしれないと思います。誰かがreCaptchaと並べて使用する別のキャプチャライブラリを推奨できますか？同じページに2つのキャプチャを表示できるようにしたいと思っています。
更新2：各フォームをiframeに配置するとどうなりますか？これは許容できる解決策でしょうか？
Recaptchaの現在のバージョン（reCAPTCHA APIバージョン2.0）では、1ページに複数のRecaptchaを含めることができます。
reCAPTCHAのクローンを作成したり、問題を回避したりする必要はありません。レキャプチャ用に複数のdiv要素を配置し、それらの中にレキャプチャを明示的にレンダリングする必要があります。
これは、google recaptcha apiを使用すると簡単です：
https ：//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（）を呼び出すことができます。
シンプルでわかりやすい：
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）これを呼び出して、フィールドを反復処理し、recaptchaを作成します。
<script type="text/javascript">
var CaptchaCallback = function() {
jQuery('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {
'sitekey' : jQuery(el).attr('data-sitekey')
,'theme' : jQuery(el).attr('data-theme')
,'size' : jQuery(el).attr('data-size')
,'tabindex' : jQuery(el).attr('data-tabindex')
,'callback' : jQuery(el).attr('data-callback')
,'expired-callback' : jQuery(el).attr('data-expired-callback')
,'error-callback' : jQuery(el).attr('data-error-callback')
});
});
};
</script>
ASPページ（リンク）でこれを行うことについて同様の質問があり、そこでのコンセンサスは、recaptchaではできないというものでした。別のキャプチャを使用する場合を除いて、1つのページの複数のフォームでキャプチャを共有する必要があるようです。reCAPTCHAにロックされていない場合は、Zend Frameworks Zend_Captchaコンポーネント（リンク）を参照してください。いくつか含まれています
この回答は、@raphadkoの回答の拡張です。
（ajaxリクエストのように）キャプチャコードを手動で抽出する必要がある場合は、次のコマンドを呼び出す必要があります。
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を作成する必要があります。私の最初のフォームのrecaptchadiv：
<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));
});
おそらく、のtrue値を持つ2番目のパラメーターは必要ありませんがclone()、それを持っていても問題はありません...このメソッドの唯一の問題は、ajaxを介してフォームを送信する場合、問題は次の2つの要素があることです。同じ名前で、正しい要素の値をキャプチャする方法をもう少し賢くする必要があります（reCaptcha要素の2つのIDは#recaptcha_response_field、誰かが必要とする場合に備えて#recaptcha_challenge_fieldです）
私はこの質問が古いことを知っていますが、誰かが将来それを探す場合に備えて。1ページに2つのキャプチャを含めることができます。ドキュメントへのピンクはここにあります：https ：//developers.google.com/recaptcha/docs/display 以下の例は単なるコピーフォームドキュメントであり、異なるレイアウトを指定する必要はありません。
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
このgrecaptcha.getResponse()メソッドはオプションの「widget_id」パラメーターを受け入れ、指定されていない場合はデフォルトで最初に作成されたウィジェットになります。widget_idは、grecaptcha.render()作成された各ウィジェットのメソッドから返されます。これは、reCAPTCHAコンテナの属性とは関係ありません。id
各reCAPTCHAには、独自の応答データがあります。getResponsereCAPTCHA divにIDを指定して、メソッドに渡す必要があります。
例えば
<div id="reCaptchaLogin"
class="g-recaptcha required-entry"
data-sitekey="<?php echo $this->helper('recaptcha')->getKey(); ?>"
data-theme="<?php echo($this->helper('recaptcha')->getTheme()); ?>"
style="transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>
<script type="text/javascript">
var CaptchaCallback = function() {
jQuery('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {
'sitekey' : jQuery(el).attr('data-sitekey')
,'theme' : jQuery(el).attr('data-theme')
,'size' : jQuery(el).attr('data-size')
,'tabindex' : jQuery(el).attr('data-tabindex')
,'callback' : jQuery(el).attr('data-callback')
,'expired-callback' : jQuery(el).attr('data-expired-callback')
,'error-callback' : jQuery(el).attr('data-error-callback')
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
アクセス応答：
var reCaptchaResponse = grecaptcha.getResponse(0);
また
var reCaptchaResponse = grecaptcha.getResponse(1);
フッターに連絡フォームがあり、常に表示されます。また、アカウントの作成などの一部のページにもキャプチャを含めることができるため、動的に実行され、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>
これは、 raphadkoと名詞によって提供される回答のJQueryフリーバージョンです。
1）通常、次の方法でrecaptchaフィールドを作成します。
<div class="g-recaptcha"></div>
2）次のスクリプトをロードします。
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3）これを呼び出して、フィールドを反復処理し、recaptchaを作成します。
var CaptchaCallback = function() {
var captchas = document.getElementsByClassName("g-recaptcha");
for(var i = 0; i < captchas.length; i++) {
grecaptcha.render(captchas[i], {'sitekey' : 'YOUR_KEY_HERE'});
}
};
ページのソースコードを見て、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タブ機能を使用しています。したがって、そのコードは含まれていません。
ユーザーが「情報のリクエスト」をクリックすると(#product_tabs_what)、JSは値があるかどうかを確認recapExistしfalseます。値がある場合、これは、Recaptcha.destroy();ロードされた古いreCaptchaを破棄するために呼び出し、このタブ用に再作成します。それ以外の場合、これはreCaptchaを作成し、#more_info_recaptcha_boxdivに配置します。#product_tabs_wha「オファーする」タブと同じです。
raphadkoの答えに少し追加すると、 （1ページに）複数のキャプチャがあるため、（ユニバーサル） g-recaptcha-responsePOSTパラメーターを使用できません（キャプチャの応答が1つしかないため）。代わりに、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) + "\"}"
});
});
};
動的に変更されたすべての要素にイベント委任（要素の追加後のDOMの更新を参照）を適用していることに注意してください。これにより、個々のキャプチャの応答がフォームsubmitイベントにバインドされます。
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入力を生成することです（私は2つでそれを行いましたが、おそらく3つ以上のフォームを行うことができます）。私はjQuery、jQuery検証、およびjQueryフォームプラグインを使用して、RecaptchaAJAXAPIとともにAJAXを介してフォームを投稿しています-
https://developers.google.com/recaptcha/docs/display#recaptcha_methods
ユーザーがフォームの1つを送信すると、次のようになります。
次に、レキャプチャに記入してフォームを再送信できます。代わりに別のフォームを送信することにした場合は、コードが既存のrecaptchaをチェックするため、ページに一度に1つのrecaptchaしかありません。
これは、優れた答えの多くを構築するソリューションです。このオプションはjQueryを使用せず、動的であり、IDで要素を具体的にターゲットにする必要はありません。
1）通常どおりにreCAPTCHAマークアップを追加します。
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
2）以下をドキュメントに追加します。querySelectorAllAPIをサポートするすべてのブラウザで動作します
<script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptchas&render=explicit" async defer></script>
<script>
window.renderRecaptchas = function() {
var recaptchas = document.querySelectorAll('.g-recaptcha');
for (var i = 0; i < recaptchas.length; i++) {
grecaptcha.render(recaptchas[i], {
sitekey: recaptchas[i].getAttribute('data-sitekey')
});
}
}
</script>
RecaptchaAjaxコールバックを上書きするだけで可能です。動作中のjsfiddle：http: //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");
これを正確に行うための優れたガイドは次のとおりです。
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を使用します。次に、ボタンで「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は、管理が簡単で簡単だと思います。