Develop Reference

reCAPTCHA - Incorrect key type

I want to secure the form on my website with a reCAPTCHA script. After adding the script and this window is displayed and in it an error - "Information for the website owner - we detected an Error: incorrect key type". I will add that the domain is correctly configured and added in the appropriate section of reCAPTCHA. This is a page written on Jekyll and here may be a problem. For the script to work there correctly you need an encrypted private key - and there may be a problem. I tried to generate the key several times but nothing helped - still the same error. I created new V3 keys and checked. But that too didnt work. Any idea on how to solve this problem?
My code:
... form ...
<input type="hidden" name="options[reCaptcha][siteKey]" value="6LfF_7AZAAAAAK796nWHg-K4DkjG_-pnlfEH7Ch0">
<input type="hidden" name="options[reCaptcha][secret]" value="KX02DlLiKdqKkMkyAThrIVhjP9zydIZ/KC0copPjpdkkA1cX+zy5loEpg+c618R5kZMKXlelpN/2GDItQWNy4alUGQCtP8k8GTioTtZVmuNXal5sbP1OPkXFKof+6auTz5cfeFs2XRkrQlduNAw/Bc0TB/7RiZNOjMNGBSmbKWc=">
<fieldset class="security">
<div class="g-recaptcha" data-sitekey="6LfF_7AZAAAAAK796nWHg-K4DkjG_-pnlfEH7Ch0"></div>
</fieldset>
... end form ...
<script type="text/javascript">
var onload = function() {
grecaptcha.render('html_element', {
'sitekey' : '6LfF_7AZAAAAAK796nWHg-K4DkjG_-pnlfEH7Ch0',
'theme' : 'dark'
});
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onload"></script>
(Old keys - i generated new)
Link to the page
Link to the repository
(The form is in every post)

I'm solved the problem - now I using the reCAPTCHA v2 - Checkbox. Change of the version solved the problem. Generating new keys for v2 version solved this problem. Captcha displays and works correctly.

Google reCaptcha v3 returns success as false

I am testing my user login/registration system. I finally finished the form and I have been testing the form for a while now. It was working before I got the form finished and it works perfectly fine on another page however, it won't work on my page for registration. It keeps sending the success as false. My other page is a contact form and it's not that different from my registration page. It has all the same files inside.
My error code keeps showing me that I'm a bot when I'm clearly not a bot and I'm just testing out my own code.
I thought before there was a problem with where the code was stored in the directory at first, so I tried that.
Then, I thought that if I changed the keys, then maybe I would manage to get the system to work again. That didn't work.
Finally, I tried rearranging my html code to get it to work and that didn't work either.
Now, the crazy part, I'm still getting a score of 0.9 (checked on recaptcha site), which is enough for me to pass as a human but, it's still giving me that error within the JSON.
It worked fine before but, as soon as I started to test my input validation for my registration form, it began to call my response a false.
This is the error I keep getting. I wasn't too sure about formatting a JSON. This was returned with the php function var_dump. It was technically just one line.
object(stdClass)#13 (2)
{
["success"]=> bool(false)
["error-codes"]=> array(1)
{
[0]=> string(22) "missing-input-response"
}
}
This is the script I have in a file called recaptcha.php
<script src='https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY; ?>'></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo SITE_KEY; ?>', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
});
});
</script>
EDIT/
Added some additional code.
A php function. The constant SECRET_KEY is defined as a global variable in another file.
function getCaptcha($secretKey) {
$response =
file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . SECRET_KEY . "&response={$secretKey}");
$reCaptcha = json_decode($response);
return $reCaptcha;
}
This is included where I verify the recaptcha.
$reCaptcha = getCaptcha($_REQUEST['g-recaptcha-response']);
var_dump($reCaptcha);
If that helps.
I'm expecting it to turn into ["success"]=> bool(true) but, I don't even have the slightest clue what's wrong. I'm ready to get Google on the phone just to solve this issue. Can anyone help?

This error means that you're not passing in the site 'secret' param to the POST request to:
https://www.google.com/recaptcha/api/siteverify
Check that the 'secret' param (called SECRET KEY in the settings screen of the admin area), is correct and is being sent in the POST request.

Okay, so after looking at a few things, I found out why it kept returning as a "missing-input" error.
I had a page with two forms and only one recaptcha.
<form>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
</form>
<form>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
</form>
Because there were two of them, the API didn't know which to distinguish and instead of assigning the same value to both, it assigned no value to either. So, in-order to fix this I changed my javascript to this:
<script src='https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY; ?>'></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo SITE_KEY; ?>', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
document.getElementById('g-recaptcha-response2').value=token;
});
});
</script>
And my input form looked something like this:
<form>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
</form>
<form>
<input type="hidden" id="g-recaptcha-response2" name="g-recaptcha-response2" />
</form>
The same value but, put into two separate fields. Even if you are using the second field for just one page, it's okay to leave it in there because it won't affect a page with just one recaptcha. As long as the first field is used to store the token and is reference in your html. I also changed this in the php.
$reCaptcha = getCaptcha($_REQUEST['g-recaptcha-response2']);
var_dump($reCaptcha);
I guess for anyone building a page with multiple forms, if you want to use recaptcha, you will need to distinguish two different input fields to receive the token. After spending nearly a day on this, I can't believe it took me that long to figure out something so simple. This will solve the missing-input error as well as the invalid-input error.

Append input field value to url on button click

I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!

First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!

Adding attribute in script from Input Javascript

In one of my webpage i need to add PayPal payment button, in which value has to be entered by input.
i got this script to add PayPal button:
<script
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=email#adress.com"
data-button="paynow"
data-amount="5"
data-currency="USD">
</script>
Now i have to change the value of "data-amount" every time by Input from User.
I tried to use onkeyup, setAttribute but both don't seem to work. Please suggest what should i do or where i'm making mistake.
<!DOCTYPE html>
<html>
<script>
function showMe(e) {
var x=e.value;
document.getElementsById("paypal").setAttribute("data-amount", "x");
}
</script>
<body>
Amount: <input type="number" name="amount" id="amount" onkeyup="showMe(this)" required>
<script id="paypal"
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=payPalmerchantId"
data-button="paynow"
data-currency="USD">
</script>
<br><br><br>
<p>You will be redirected to Payment Gateway..</p>
</body>
</html>

try this..
function showMe(e) {
var x=e.value;
$("#paypal").attr("data-amount", x);
}
or doing everything in jquery
$("#amount").on('input', function() {
$("#paypal").attr("data-amount", $("#amount").val());
});

I'm not familiar with PayPal scripts, but as I know, such types of embedding set attributes and any other features at step of initializing...
So you have to reload your script.
You could also search for the ability to change attributes with the help of API provided by PayPal
Update:
I've just tried to insert your code into my local page...
Your script searches for element with id "paypal", but if you look at your code after tha page loads, you won't see even "script" tag which refers to the paypal js file. You'll see a form instead. Try to search for "script" word here and you won't find that tag. At least this reason is why your script doesn't work.

Recaptcha invalid-request-cookie

I'm trying to do Recaptcha in my page. I'm checking a demo with the localhost. But, I'm keep getting error as invalid-request-cookie always when checking. I'm following Displaying recaptcha without plugin and Verifying recaptcha without plugin.
Here is my code
<html>
<body>
<form method="post" action="http://www.google.com/recaptcha/api/verify">
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=my_public_key">
<!-- I used my public key -->
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=my_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<input type="hidden" name="privatekey" value="my_private_key">
<!-- I used my private key -->
<input type="submit" value="Ok"/>
</form>
</body>
</html>
In google, I saw that, invalid-request-cookie means The challenge parameter of the verify script was incorrect. But It seems to be correct. Is it right or is there any other mistakes? Someone help please

After reading this, I realized that the author of one of our forms was using a public key for a different domain we also have. So make sure you're using the correct public key.

I am using Google recaptcha in an ASP.Net environment. Here is my code snippet:
in head tag:
<script src='https://www.google.com/recaptcha/api.js'></script>
HTML:
<div class="g-recaptcha" data-sitekey="My***PUBLIC***SiteKeyBlahBlah"></div>
That's it! Google handles the rest of the magic. You can check the length of the grecaptcha.getResponse() function's return variable to see if the user clicked it. For example:
if (grecaptcha.getResponse().length == 0)
//They didn't do it
else
//They either did it or spoofed your page with some bogus HTML to make it look like they did - they can do this by editing the source of the page and inserting text in a certain spot. View your page source after loading in a browser to see what I mean.
To verify that they didn't just enter random text - and that the value of grecaptcha.getResponse() is a valid response from Google, just call their web service with your site key - and the response, itself. I'm doing it from the code-behind with C# like so:
WebRequest CheckCaptcha;
CheckCaptcha = WebRequest.Create(String.Format([Google's Web Service URL],
[Your ***Private*** Site Key],
[The value of grecaptcha.getResponse()],
[IP address]));
Stream strm = CheckCaptcha.GetResponse().GetResponseStream();
StreamReader sr = new StreamReader(strm);
string everything = sr.ReadToEnd();
JavaScriptSerializer JS = new JavaScriptSerializer();
CaptchaResponse GoogleResponse = JS.Deserialize<CaptchaResponse>(everything);
Next, to evaluate Google's response:
if (GoogleResponse.success.ToUpper() != "TRUE")
//Invalid - they are up to no good!
else
//Valid - you're good to go!
Calling their web service is probably slightly different if you're doing it from the client side, but it's the same principle. I hope this helps.