javascript - ¿Cómo proteger el botón jquery con ReCaptcha invisible?

php

Question

Quiero proteger mi botón jquery de los bots sin molestar a los usuarios, así que pensé en agregarle la recaptcha invisible de google. Sin embargo, la implementación no es tan fácil como yo, y parece que no puedo hacerlo. Si alguien me puede mostrar cómo se hace, sería genial. PS: Estoy haciendo esto en un tema de wordpress.

Esta es la documentación:

https://developers.google.com/recaptcha/docs/invisible

Crear recaptcha invisible:

https://www.google.com/recaptcha/admin#beta

Y esto es lo que tengo:

HTML:

<button class="acf-get-content-button">Show Link</button>
<div class="fa" id="acf-content-wrapper" data-id="<?php echo $post_id; ?>"></div>

JS:

<script>
(function($) {
$(''.acf-get-content-button'').click(function(e) {
e.preventDefault();
$(''.fa'').addClass(''fa-cog fa-spin fa-4x'');
var $contentWrapper = $(''#acf-content-wrapper'');
var postId = $contentWrapper.data(''id'');
$.ajax({
url: "/public/ajax.php",
type: "POST",
data: {
''post_id'': postId
},
})
.done(function(data) {
$(''.fa'').removeClass(''fa-cog fa-spin fa-4x'');
$contentWrapper.append(data);
$(''.acf-get-content-button'').removeClass().addClass(''.acf-get-content-button'')
});
});
$(''.acf-get-content-button'').mouseup(function() {
if (event.which == 1) {
$(".acf-get-content-button").hide();
}
});
})(jQuery);
</script>

ajax.php

<?php
define(''WP_USE_THEMES'', false);
require_once( $_SERVER[''DOCUMENT_ROOT''] . ''/wp-load.php'' );
global $post;
$post_id = $_REQUEST["post_id"];
$content = get_field( ''ebook_link_pdf'', $post_id );
echo ($content);

Answer 1

Puedes usar Invisible reCaptcha para el complemento de WordPress para hacerlo fácilmente si crees que la codificación desde cero es complicada para ti. También puede profundizar en el código fuente del complemento para tener una idea de la implementación.

Este complemento tiene acciones y filtros para uso personalizado y están documentados en la página de inicio de complementos.

Answer 2

Seguí adelante para experimentar con reCaptcha.

Resulta que de acuerdo con la https://developers.google.com/recaptcha/docs/invisible , puede utilizar el método grecaptcha.getResponse para enviar a su llamada AJAX. (Pero tenga en cuenta que esta API reCaptcha todavía está en versión beta y podría cambiar ...) Aquí hay un breve ejemplo:

HTML:

<div id="test-captcha" class="g-recaptcha" data-sitekey=[Your site key]></div>
<button id="load" onclick="go();">Load something</button>

Javascript:

function go()
{
$.ajax({
url: "/captchatest.php",
type: "POST",
data: {
''g-recaptcha-response'': grecaptcha.getResponse()
}
}).done(function(data) {
alert(data);
});
}

captchatest.php

<?php
//Used http://.com/a/6609181/7344257
function do_post_request($url, $data)
{
// use key ''http'' even if you send the request to https://...
$options = array(
''http'' => array(
''header'' => "Content-type: application/x-www-form-urlencoded/r/n",
''method'' => ''POST'',
''content'' => http_build_query($data)
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) { /* Handle error */ }
return $result;
}
$error = "";
if ($_SERVER["REQUEST_METHOD"] === "POST")
{
if (!isset($_POST[''g-recaptcha-response'']))
{
echo "Please do reCaptcha";
exit(0);
}
$data = array("secret" => "6LeUGhYUAAAAABNS5OtOc9vonTlyrtgcQ5VdI7cV",
"response" => $_POST[''g-recaptcha-response''],
"remoteip" => $_SERVER["REMOTE_ADDR"] //This is optional.
);
$resp = json_decode(do_post_request("https://www.google.com/recaptcha/api/siteverify", $data));
if (!$resp->success)
{
//use $resp->error-codes to debug error.
echo "Invalid reCaptcha";
exit(0);
}
echo "Received secret code.";
exit(0);
}
?>

No estaba seguro de si podrías usar CURL. Así que decidí seguir con el código PHP básico. También tendrías que formatear los errores, pero creo que deberías entender el punto.