reCAPTCHA widget

JavaScript
1

To make the reCAPTCHA widget display a different theme I like to set
RecaptchaOptions.
Why should be there curl_timeout and which setting is the best to be used?

<script type="text/javascript">
var RecaptchaOptions = {"curl_timeout":1,"lang":"en"};
</script>
2

According to the documentation for for RecaptchaOptions, curl_timeout is not a suitable option to use.

Was there some other source from where you obtained that sample code?

3

I have seen many samples. Some of them are using this option. I have just checked why is actually suitable.

4

I like to know what is the best to use when implementing gCaptcha and API:

<script src='https://www.google.com/recaptcha/api.js?render=onload&amp;hl=en'></script>

or

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

render=explicit and async defer or without?

5

That is the best one to use.

The other one should only be used if you have scripting that interferes with the recaptcha, which is normally not done.

6

I have put together from samples and demos. How to do in the correct using Callback function? I have to detect positive gCaptcha value that form is submitted. What needs to be modified in this script?

As you see I have used double getElementById. How to modify this script in the correct way to make it flexible (gCaptcha) regarding themes, languages, design, content.

<!DOCTYPE HTML>

<html>

<head>
  <title>gCaptcha</title>
</head>

<body>
<form id="mycontactform1" method="post">

<script type="text/javascript">
var RecaptchaOptions = {"curl_timeout": 1, "lang": "en"};
function captchaSubmit(data) {
  document.getElementById("mycontactform1").submit();
}
</script>

<script>
var Callback = function () {

  var reCaptchaFields = jQuery('.myid-recaptcha');

  reCaptchaFields.each(function (key)
    {
      var $this = jQuery(this);
      var siteKey = $this.data('sitekey');
      $this.html('');
      grecaptcha.render(document.getElementById($this.attr('id')),
        {
        'sitekey': siteKey
        }
      );
    }
  );
};

</script>
<script src="https://www.google.com/recaptcha/api.js?hl=en&onload=Callback&render=explicit" async defer></script>
<div class="g-recaptcha myid-recaptcha" data-sitekey="" ></div>

<input type="submit" name="formsubmit1" data-callback="captchaSubmit" value="Send" class="" />

</form>
</body>

</html>
7

[quote=“toplisek, post:6, topic:284278, full:true”]
I have to detect positive gCaptcha value that form is submitted.[/quote]

Do you mean that you have to detect if the captcha is successful, before the form is allowed to be submitted?

8

I have to make it flexible in terms of theme, language, design. Form should not be submitted if gCaptcha is not validated as a positive human signature. Which variable detects TRUE which should be captured inside PHP script?

9

It sounds like you just need to follow the standard ordinary instructions for using captcha then.

Set the form submit event to prevent the submit if the response is bad:

var form = ...
form.addEventListener("submit", function (evt) {
  if (!grecaptcha.getResponse()){
    // no submit for you
    evt.preventDefault();
  }
});
10

Can you pot please the whole code that I test?
I have set input as hidden:

<input type="hidden" name="stopbot" id="stopbot" class="" value="Stop bot!" />
11

When it comes to PHP matters in regard to captcha, I recommend that you contact someone in the PHP forum

12

Regarding Javascript, can you post the whole script to test working elements?

13

There’s a full guide on how to use it at https://developers.google.com/recaptcha/docs/display

14

Thank you for your link. I need to submit the response, along with my site key and secret key, to Google’s servers from this code in order to determine if the Captcha was successfully answered.

If we use function to validate gCaptcha, is this correct?

var RecaptchaOptions = {"curl_timeout": 1, "lang": "en"};
function captchaSubmit(data) {
  document.getElementById("mycontactform1").submit();
}

function IsRecapchaValid()
{
  var res = grecaptcha.getResponse(XXX);
  if (res == "" || res == undefined || res.length == 0)
  {
    return false;
  }
  return true;
}
15

I don’t see how the captchaSubmit() and IsRecapchaValid() functions are used?

16

I have put the whole code as separate elements are not integrated.
Can you check?

<!DOCTYPE HTML>

<html>

<head>
  <title>gCaptcha</title>
</head>

<body>
<form id="mycontactform1" method="post">

<script type="text/javascript">
var RecaptchaOptions = {"curl_timeout":1,"lang":"en"};
    function captchaSubmit(data) {
        document.getElementById("mycontactform1").submit();
    }

function IsRecapchaValid()
{
  var res = grecaptcha.getResponse(form);
  if (res == "" || res == undefined || res.length == 0)
  {
    return false;
  }
  return true;
}
</script>

<script>
var form = "mycontactform1";
var Callback = function () {

  var reCaptchaFields = jQuery('.myid-recaptcha');

  reCaptchaFields.each(function (key)
    {
      var $this = jQuery(this);
      var siteKey = $this.data('sitekey');
      $this.html('');
      grecaptcha.render(document.getElementById($this.attr('id')),
        {
        'sitekey': siteKey
        }
      );
    }
  );
};

</script>
<script src="https://www.google.com/recaptcha/api.js?hl=en&onload=Callback&render=explicit" async defer></script>
<div class="g-recaptcha myid-recaptcha" data-sitekey="" ></div>

<input type="submit" name="formsubmit1" data-callback="captchaSubmit" value="Send" class="" />

</form>
</body>

</html>
17

Can you validate this code as it is integrated with the whole options?

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.