javascript - example - Implementar el nuevo ReCaptcha Invisible de Google.
recaptcha v2 (4)
Estoy construyendo un sitio web de PHP donde me gustaría poner un captcha en el formulario de inicio de sesión. Fui con el nuevo ReCaptcha invisible de Google pero tengo problemas para implementarlo (parte HTML, PHP está funcionando).
El código que tengo ahora para el reCaptcha "normal" es el siguiente (según las instrucciones de Google reCaptcha y esto funciona):
<form action=test.php method="POST">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<!-- <Google reCaptcha> -->
<div class="g-recaptcha" data-sitekey="<sitekey>"></div>
<!-- </Google reCaptcha> -->
<input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>
Se registraron algunas instrucciones en el correo electrónico de confirmación cuando me registré (tardé aproximadamente 24 horas en obtener la confirmación). Eso dice lo siguiente:
Integración invisible reCAPTCHA
Si no ha integrado su sitio con reCAPTCHA v2, siga nuestra guía para desarrolladores para conocer los detalles de la implementación.
Asegúrese de que la clave de su sitio que se ha incluido en la lista blanca para Invisible reCAPTCHA.
Para habilitar el reCAPTCHA invisible, en lugar de poner los parámetros en una división, puede agregarlos directamente a un botón html.
3a. devolución de llamada de datos = ””. Esto funciona igual que la casilla de verificación captcha, pero se requiere para invisible.
3b. insignia de datos: esto le permite reposicionar la insignia reCAPTCHA (es decir, el logotipo y el texto ''protegido por reCAPTCHA''). Opciones válidas como ''bottomright'' (el valor predeterminado), ''bottomleft'' o ''inline'' que colocarán la insignia directamente sobre el botón. Si crea la insignia en línea, puede controlar el CSS de la insignia directamente.
La verificación de la respuesta del usuario no tiene cambios.
El problema que tengo es con la implementación de HTML (por lo tanto, necesito ayuda con el paso 3. El 1,2 y el 4 funcionan bien para mí). El resto lo tengo trabajando con reCaptcha normal y de acuerdo con las instrucciones, debería ser lo mismo. No entiendo qué es la devolución de llamada de datos y la insignia de datos y cómo funciona. ¡Un ejemplo de código de cómo implementar reCaptcha invisible con la configuración de mi formulario sería genial!
ReCAPTCHA invisible
Implementar el nuevo ReCAPTCHA invisible de Google es muy similar a cómo agregamos v2 a nuestro sitio. Puede agregarlo como su propio contenedor como normal, o el nuevo método para agregarlo al botón de enviar formulario. Espero que esta guía te ayude en el camino correcto.
Contenedor CAPTCHA independiente
Implementar recaptcha requiere algunas cosas:
- Sitekey
- Class
- Callback
- Bind
Este será tu objetivo final.
<div class="g-recaptcha" data-sitekey="<sitekey>"
data-bind="recaptcha-submit" data-callback="submitForm">
</div>
Cuando use el método independiente, debe tener el enlace de datos establecido en la ID de su botón de envío. Si no tienes este conjunto, tu captcha no será invisible.
También se debe utilizar una devolución de llamada para enviar el formulario. Un captcha invisible cancelará todos los eventos desde el botón de envío, por lo que necesita la devolución de llamada para pasar el envío.
<script>
function submitForm() {
var form = document.getElementById("ContactForm");
if (validate_form(form)) {
form.submit();
} else {
grecaptcha.reset();
}
}
</script>
Observe en el ejemplo de devolución de llamada que también hay validación de formulario personalizado. Es muy importante que reinicie reCAPTCHA cuando la validación falla, de lo contrario no podrá volver a enviar el formulario hasta que expire el CAPTCHA.
Botón invisible de CAPTCHA
Mucho de esto es lo mismo que con el CAPTCHA independiente anterior, pero en lugar de tener un contenedor, todo se coloca en el botón de envío.
Este será tu objetivo.
<button class="g-recaptcha" data-sitekey="<sitekey>"
data-callback="submitForm" data-badge="inline" type="submit">
Submit</button>
Hay algo nuevo aquí, placa de datos. Este es un div que se inserta en el DOM que contiene las entradas necesarias para que funcione reCAPTCHA. Tiene tres valores posibles: bottomleft, bottomright, inline. Inline hará que se muestre directamente sobre el botón de envío, y le permitirá controlar cómo desea que se estilice.
A tu pregunta
<form action="test.php" method="POST" id="theForm">
<script>
function submitForm() {
document.getElementById("theForm").submit();
}
</script>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>
<input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>
O
<form action="test.php" method="POST" id="theForm">
<script>
function submitForm() {
document.getElementById("theForm").submit();
}
</script>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>
Espero que esto te ayude a ti ya los futuros programadores. Lo mantendré actualizado a medida que la tecnología evolucione.
Inicia sesión con tu cuenta de google
Visita el enlace de recaptcha de google.
Luego siga el enlace para la integración del código, siga el código para la validación tanto del cliente como del servidor. https://developers.google.com/recaptcha/docs/invisible
Aumente o disminuya el nivel de seguridad una vez que haya creado la recaptcha, vaya a la configuración avanzada aquí, https://www.google.com/recaptcha/admin#list
Aquí es cómo implementar una funcionalidad reCaptcha invisible del lado del cliente + servidor (php) :
- Lado del cliente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCaptcha</title>
<!--api link-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!--call back function-->
<script>
function onSubmit(token) {
document.getElementById(''reCaptchaForm'').submit();
}
</script>
</head>
<body>
<div class="container">
<form id="reCaptchaForm" action="signup.php" method="POST">
<input type="text" placeholder="type anything">
<!--Invisible reCaptcha configuration-->
<button class="g-recaptcha" data-sitekey="<your site key>" data-callback=''onSubmit''>Submit</button>
<br/>
</form>
</div>
</body>
</html>
- Server Side validation: crea un archivo signup.php
<?php
//only run when form is submitted
if(isset($_POST[''g-recaptcha-response''])) {
$secretKey = ''<your secret key>'';
$response = $_POST[''g-recaptcha-response''];
$remoteIp = $_SERVER[''REMOTE_ADDR''];
$reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
$result = json_decode($reCaptchaValidationUrl, TRUE);
//get response along side with all results
print_r($result);
if($result[''success''] == 1) {
//True - What happens when user is verified
$userMessage = ''<div>Success: you/'ve made it :)</div>'';
} else {
//False - What happens when user is not verified
$userMessage = ''<div>Fail: please try again :(</div>'';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>reCAPTCHA Response</title>
</head>
<body>
<?php
if(!empty($userMessage)) {
echo $userMessage;
}
?>
</body>
</html>
Si está buscando una solución general totalmente personalizable que incluso funcione con múltiples formularios en la misma página, representará explícitamente el widget reCaptcha usando los parámetros render = explicit y onload = aFunctionCallback .
Aquí hay un ejemplo simple:
<!DOCTYPE html>
<html>
<body>
<form action="" method="post">
<input type="text" name="first-name-1"> <br />
<input type="text" name="last-name-1"> <br />
<div class="recaptcha-holder"></div>
<input type="submit" value="Submit">
</form>
<br /><br />
<form action="" method="post">
<input type="text" name="first-name-2"> <br />
<input type="text" name="last-name-2"> <br />
<div class="recaptcha-holder"></div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
var renderGoogleInvisibleRecaptcha = function() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var holder = form.querySelector(''.recaptcha-holder'');
if (null === holder){
continue;
}
(function(frm){
var holderId = grecaptcha.render(holder,{
''sitekey'': ''CHANGE_ME_WITH_YOUR_SITE_KEY'',
''size'': ''invisible'',
''badge'' : ''bottomright'', // possible values: bottomright, bottomleft, inline
''callback'' : function (recaptchaToken) {
HTMLFormElement.prototype.submit.call(frm);
}
});
frm.onsubmit = function (evt){
evt.preventDefault();
grecaptcha.execute(holderId);
};
})(form);
}
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>
</body>
</html>
Como puede ver, estoy agregando un elemento div vacío en un formulario. Para identificar qué formularios deben protegerse con reCaptcha, agregaré un nombre de clase a este elemento. En nuestro ejemplo, estoy usando el nombre de clase ''recaptcha-holder''.
La función de devolución de llamada se repite en todas las formas existentes y, si encuentra nuestro elemento inyectado con el nombre de clase ''recaptcha-holder'', mostrará el widget reCaptcha.
He estado usando esta solución en mi complemento ReCaptcha Invisible para WordPress. Si alguien quiere ver cómo funciona esto, el complemento está disponible para descargar en el directorio de WordPress:
https://wordpress.org/plugins/invisible-recaptcha/
¡Espero que esto ayude!