Saltar al contenido

Implementar el nuevo reCaptcha invisible de Google

Te damos la bienvenida a nuestra página, en este sitio encontrarás la resolución que necesitas.

Solución:

ReCAPTCHA invisible

La implementación del nuevo reCAPTCHA invisible de Google es muy similar a cómo agregamos v2 a nuestro sitio. Puede agregarlo como su propio contenedor como de costumbre, o el nuevo método para agregarlo al botón de envío del formulario. Espero que esta guía te ayude en el camino correcto.

Contenedor CAPTCHA independiente

La implementación de recaptcha requiere algunas cosas:

- Sitekey
- Class
- Callback
- Bind

Este será tu objetivo final.

Cuando utilice el método independiente, debe tener el enlace de datos establecido en el ID de su botón de envío. Si no tiene este conjunto, su captcha no será invisible.

También se debe usar 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.


Observe en la devolución de llamada de ejemplo que también hay una validación de formulario personalizada. Es muy importante que restablezca el reCAPTCHA cuando falle la validación; de lo contrario, no podrá volver a enviar el formulario hasta que caduque el CAPTCHA.

Botón CAPTCHA invisible

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.


Hay algo nuevo aquí, placa de datos. Este es un div que se inserta en el DOM que contiene las entradas necesarias para que reCAPTCHA funcione. Tiene tres valores posibles: abajo a la izquierda, abajo a la derecha, en línea. Inline hará que se muestre directamente sobre el botón de envío y le permitirá controlar cómo le gustaría que se diseñe.

A tu pregunta

O

Espero que esto te ayude a ti y a los futuros programadores. Mantendré esto actualizado a medida que evolucione la tecnología.

Si está buscando una solución general totalmente personalizable que incluso funcione con varios formularios en la misma página, renderizaré explícitamente el widget reCaptcha usando el render = explícito y onload = aFunctionCallback parámetros.

A continuación, se muestra un ejemplo sencillo:











Como puede ver, estoy agregando un elemento div vacío en un formulario. Para identificar qué formularios deben protegerse usando 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 itera a través de todos los formularios existentes y si encuentra nuestro elemento inyectado con el nombre de clase 'recaptcha-holder', renderizará el widget reCaptcha.

He estado usando esta solución en mi complemento Invisible reCaptcha para WordPress. Si alguien quiere ver cómo funciona esto, el complemento está disponible para descargar en el directorio de WordPress:

Invisible reCaptcha for WordPress

¡Espero que esto ayude!

Aquí se explica cómo implementar un cliente + servidor (php) Funcionalidad reCaptcha invisible:

  • Lado del cliente



    
    reCaptcha

    
    
    
    



  • Validación del lado del servidor: cree un signup.php expediente
';
    $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 = '
Success: you've made it :)
'; else //False - What happens when user is not verified $userMessage = '
Fail: please try again :(
'; ?> reCAPTCHA Response

Puntuaciones y comentarios

Si tienes alguna perplejidad o capacidad de medrar nuestro crónica eres capaz de realizar una anotación y con mucho placer lo leeremos.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 3)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *