Using multiple recaptcha v2 on a single page
Jeremy Jarrell
Alain Descoux
Alain Descoux
Kirk Ward
Prathamesh Sawant
Dynamically
Handle Multiple Invisible reCaptcha V2 on Single Page
>
Github Code:
[https://github.com/prathameshsawant7/multiple-invisible-recaptcha]
>
Live Example:
[http://prathameshsawant.com/multiple-invisible-recaptcha/]
Step
1>
Add below 2 Js library on page
<!--
reCaptcha Library -->
<script
type="text/javascript"
src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<!--
Customized Init for invisible reCaptcha -->
<script
src="js/init_recaptcha.js"
async
defer></script>
Step
2>
Add below div's in respective forms.
<div
id="recaptcha-form-1"
style="display:none;"></div>
<!--for
Form 1-->
<div
id="recaptcha-form-2"
style="display:none;"></div>
<!--for
Form 2-->
<div
id="recaptcha-form-3"
style="display:none;"></div>
<!--for
Form 3-->
Step
3>
Create init_recaptcha.js
* Step 1 -
Initialize reCaptcha Site Key and Widget eg: widget_1 for Form 1
*
Step 2 - In init function add code to create form submit callback
action.
* Step 3 - Call renderInvisibleReCaptcha function by
passing reCaptcha ID and createCallbackFn Response.
"use
strict";
var
PS =
PS ||
{};
var
widget_1;var
widget_2;var
widget_3;
var
recaptcha_site_key =
'RECAPTCHA_SITE_KEY';
if(
typeof
PS.RECAPTCHA
===
'undefined'
)
{
(function
(a,
$)
{
var
retryTime =
300;
var
x =
{
init:
function(){
if(typeof
grecaptcha !=
'undefined'){
//For
Form 1 Initialization
if($('#form1
#recaptcha-form-1').length
>
0){
var
callbackFn =
{
action :
function(){
saveData('1');
//Here
Callback Function
}
}
/*---
'recaptcha-form-1' - reCaptcha div ID | 'form1' - Form ID ---*/
widget_1 =
x.renderInvisibleReCaptcha('recaptcha-form-1',x.createCallbackFn(widget_1,'form1',callbackFn));
}
//For
Form 2 Initialization
if($('#form2
#recaptcha-form-2').length
>
0){
var
callbackFn =
{
action :
function(){
saveData('2');
//Here
Callback Function
}
}
/*---
'recaptcha-form-2' - reCaptcha div ID | 'form2' - Form ID ---*/
widget_2 =
x.renderInvisibleReCaptcha('recaptcha-form-2',x.createCallbackFn(widget_2,'form2',callbackFn));
}
//For
Form 3 Initialization
if($('#form3
#recaptcha-form-3').length
>
0){
var
callbackFn =
{
action :
function(){
saveData('3');
//Here
Callback Function
}
}
/*---
'recaptcha-form-3' - reCaptcha div ID | 'form3' - Form ID ---*/
widget_3 =
x.renderInvisibleReCaptcha('recaptcha-form-3',x.createCallbackFn(widget_3,'form3',callbackFn));
}
}else{
setTimeout(function(){
x.init();}
,
retryTime);
}
},
renderInvisibleReCaptcha:
function(recaptchaID,callbackFunction){
return
grecaptcha.render(recaptchaID,
{
'sitekey'
:
recaptcha_site_key,
"theme"
:
"light",
'size'
:
'invisible',
'badge'
:
'inline',
'callback'
:
callbackFunction
});
},
createCallbackFn:
function
(widget,formID,callbackFn)
{
return
function(token)
{
$('#'+formID+'
.g-recaptcha-response').val(token);
if($.trim(token)
==
''){
grecaptcha.reset(widget);
}else{
callbackFn.action();
}
}
}
}
a.RECAPTCHA
=
x;
})(
PS,
$ );
}
$(window).load(function(){
PS.RECAPTCHA.init();
});
Step
4>
Changes in Form Validation JS -
/*
Execute respective Widget on form submit after form Validations */
function
formSubmit(form){
var
text =
$.trim($('#text'+form).val());
if(text
!=
''){
switch(form){
case
'1'
:
grecaptcha.execute(widget_1);
break;
case
'2'
:
grecaptcha.execute(widget_2);
break;
case
'3'
:
grecaptcha.execute(widget_3);
break;
}
}
}
Step
5>
Validate reCaptcha from Server Side -
<?php
define('RECAPTCHA_SECRET_KEY','KEY');
/**
* @Desc: To Validate invisible
recaptcha from server-side
* @Param:
g-recaptcha-response value
* @Return: True/False
**/
if(!function_exists('check_recaptcha')){
function
check_recaptcha($recaptcha_response){
$test =
array ('secret'
=>
RECAPTCHA_SECRET_KEY,'remoteip'
=>
$_SERVER["REMOTE_ADDR"],'response'
=>
$recaptcha_response);
foreach
($test
as
$key =>
$value)
{
$req
.=
$key .
'='
.
urlencode(stripslashes($value))
.
'&';
}
$req=substr($req,
0,
strlen($req)-1);
$path =
'https://www.google.com/recaptcha/api/siteverify?';
$response =
file_get_contents($path
.
$req);
$responseData =
json_decode($response);
if($responseData->success){
return
true;
}else{
return
false;
}
}
}
//
Validate reCaptcha
if
(isset($_SERVER['REQUEST_METHOD'])
&&
$_SERVER['REQUEST_METHOD']
==
"POST"
&&
!empty($_POST))
{
$checkCapcha =
false;
$recaptcha
=
$_POST['g-recaptcha-response'];
$checkCapcha =
check_recaptcha($recaptcha);
if($checkCapcha){
echo $_POST['textmsg'];
exit;
/**
Perform Actions Here (Add,Update,Delete etc)
**/
}
else{
echo “reCaptcha
Error”;
}
}
echo "failed";exit;
?>
Step
6>
Reset Widget after Server Call -
//
saveData will be automatically get called on grecaptacha.execute
function
saveData(form){
$.ajax(
{
type:
'POST',
url:
$("#form"+form).attr(
'action'
),
data:
$("#form"+form).serialize(),
success:
function(
response )
{
switch(form){
case
'1'
:
grecaptcha.reset(widget_1);
break;
case
'2'
:
grecaptcha.reset(widget_2);
break;
case
'3'
:
grecaptcha.reset(widget_3);
break;
}
}
}
);
}
Derek Bartron
Денис Пчёлка
среда, 8 октября 2014 г., 20:44:39 UTC+3 пользователь Jeremy Jarrell написал:
Здравствуйте,Мы обновляем нашу реализацию recaptcha до версии v2. На одной из наших целевых страниц изначально было несколько виджета recaptcha. Каждый recaptcha был частью div, который оставался скрытым до тех пор, пока не отобразился один за другим, подобно аккордеонам.Однако после обновления до recaptcha v2 мы заметили, что recaptcha отображает только первый div, к которому он привязан. Последующие divs на странице не отображают recaptcha и не присутствуют в разметке.Кто-нибудь еще испытал это и обнаружил обходной путь?Заранее спасибо,Джереми