Multiple forms with invisible reCaptcha on same page with client side validation
Aldo Alfaro
Carlos Eduardo Casallas Fonseca
Carlos Eduardo Casallas Fonseca
El sábado, 29 de abril de 2017, 3:43:42 (UTC-5), Aldo Alfaro escribió:
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;
}
}
}
);
}