En este HowTo veremos el funcionamiento y la configuración de Google reCaptcha en su versión 3.0 para poder realizar validaciones de formularios en nuestras páginas web.
Ventajas y funcionamiento
Una de las ventajas que ofrece Google reCaptcha en su versión 3.0 es que ya no requiere la interacción del usuario para validar formularios.
Google reCaptcha inicialmente establece una puntuación para tu página y retorna una puntuación final score por cada solicitud que se realice desde ella.
Esta puntuación se basa en el numero de interacciones realizadas en tu sitio web por lo que cuando lo activemos inicialmente podrían darse puntuaciones algo bajas.
Google reCaptcha nunca interrumpirá al usuario y es muy importante saber que cuantas más interacciones se realicen desde tu sitio, este trabajará mucho mejor.
Otra de sus ventajas es que podemos ejecutarlo tantas veces como deseemos dentro de una misma página.
Registro y alta del sitio
Aunque parece obvio, lo primero que necesitamos para poder utilizar Google reCaptcha es registrarnos en su sitio web. Una vez registrados iniciamos sesión en la Consola de Administración y procedemos con el alta del sitio web que queremos proteger.
Una vez hecho esto obtendremos una Clave Secreta y otra Pública para poder utilizarlas en las páginas con formularios que queremos proteger.
Integración en Fron-tend
El primer paso es incluir la API de Google reCaptcha y la clave pública del sitio web que hemos dado de alta con anterioridad desde la consola.
|
1 |
<script src="https://www.google.com/recaptcha/api.js?render=TU_CLAVE_PUBLICA"></script> |
A continuación debemos incluir una llamada a grecaptcha.execute que no hace más que generar un Token y que será incluido al INPUT del formulario que incluiremos más adelante para así poder asignar la puntuación de nuestra página. Este Token se envía desde un campo oculto del formulario para luego ser tratado por la API de Google reCaptcha.
|
1 2 3 4 5 6 7 8 9 10 |
<script> grecaptcha.ready(function() { grecaptcha.execute('TU_CLAVE_PUBLICA', { action: 'formulario' }).then(function(token) { let g_recaptcha = document.getElementById('g_recaptcha'); g_recaptcha.value = token; }); }); </script> |
Google reCaptcha nos ofrece una serie de acciones por defecto y que podemos utilizar según sea el caso. Cada una de estas acciones tiene un comportamiento que afecta a la puntuación, por lo que si las desconoces es mejor crear a una acción personalizada.
- homepage
- login
- social
- ecommerce).
Si te fijas en nuestro caso hemos una nueva llamada «formulario» y nos servirá para poder realizar filtrados desde la consola en caso de tener múltiples Captchas en nuestra web.
Para más información podéis acceder a la documentación oficial de Google reCpatcha v3
Preparando el Formulario HTML
En este paso vamos a incluir un nuevo elemento INPUT a nuestro formulario, para poder asignar el valor con el Token generado por la API de Google reCaptcha. Por lo que dentro del elemento FORM incluiremos el siguiente elemento:
|
1 |
<input type="hidden" id="g_recaptcha" name="g_recaptcha" /> |
Proceso de validación con PHP
Por último ya solo nos queda tratar los datos recibido del formulario desde el lado del servidor. En este paso vamos a tener en cuenta los siguientes procesos:
- Necesitamos recuperar el contenido que nos devuelve la API de verificación de Google reCaptcha, por lo que necesitamos enviarle nuestra Clave Secreta, el Token generado anteriormente y nuestra dirección IP.
- Este nos devolverá un objeto en formato JSON que necesitamos decodificar para poder tratarlo como un array asociativo.
- En el ejemplo procesaremos el formulario siempre que el Score o puntuación devuelta sea mayor de 0.5.
Veamos el código que necesitamos incluir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$secretKey = TU_CLAVE_SECRETA; $token = filter_input(INPUT_POST, 'g_recaptcha'); $ip = filter_input(INPUT_SERVER, 'REMOTE_ADDR'); // get json response from api $response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$token."&remoteip=".$ip ); // decode json response $response = json_decode( $response, true ); // associative array // si success es true y el score entre 0.5 y 1 validamos ( $response['success'] == true && $response['score'] >= 0.5) ? $validate = 1 : $validate = 0; if ( $validate != 1 ) { // process form here } |
Una vez decodificada la respuesta, podemos tratar los siguientes datos:
- success (true|false) es un valor Booleano que indica si la petición ha sido realizada correctamente.
- challenge_ts es la fecha de la petición en formato ISO.
- hostname el host desde el cual se realiza la petición.
- score la puntuación que nos ha generado y que será entre 0 y 1
- action es la acción con la que hemos marcado dicha solicitud para así poder diferenciarlas de otras solicitudes.
- error-codes son códigos de error en caso de producirse.
Icono de Google reCaptcha
El icono de Google reCaptcha con la privacidad y sus condiciones de uso se puede ocultar usando CSS.
|
1 |
.grecaptcha-badge { display: none !important; } |
