[SOLUCIONADO] Como agregar campo reCaptcha V2

Hola, estuve utilizando el campo ef_editable_captcha sin problemas pero resulta muy lento ya que está aplicado a un aplicativo de reservas de comida y tarda en cargar la página, me sugieren utilizar el recaptcha v2, y he visto que guarani ya lo utiliza. Podrían indicarme como lo incorpora ??
O será con alguna funcion en java ?
Muchas gracias.

Desde el formulario extendi el formulario y cargue lo siguiente

function generar_layout()
{
            {
               $this->generar_html_ef('usuario');
              echo "<script src='https://www.google.com/recaptcha/api.js'></script>";
            echo '<div class="g-recaptcha" data-sitekey="6LdbOrUUAAAAAKsb-Lctl0vNZRp41hN0Jz0X_9Rc" method="POST" onClick="carga_captcha()"></div>

';
}
}

Hasta aca genial, me muestra el campo para cargar el usuario y me muestra el captcha
El problema es que no consigo que obligue a validar el captcha, no logro que realice la accion con el resultado del captcha
O sea, si se carga el codigo de usuario y no se clikea sobre el captcha pasa igual al formulario.
Gracias

Hola Olga,

Si vemos la documentación de reCAPTCHA v2, vas a observar que existe una opción llamada “data-callback” (Optional. The name of your callback function, executed when the user submits a successful response. The g-recaptcha-response token is passed to your callback.), seria:


 echo '<div class="g-recaptcha" data-sitekey="6LdbOrUUAAAAAKsb-Lctl0vNZRp41hN0Jz0X_9Rc" method="POST" onClick="carga_captcha()" data-callback="recaptcha_ok"></div>
echo '<script type="text/javascript">
              function recaptcha_ok () {
                  alert("Recaptcha OK!!!");
              }
              </script>';

Lo que podes hacer es deshabilitar el botón que realiza la acción, y habilitarlo vía JavaScript cuando se invoca este callback (seria dentro de la función recaptcha_ok que ahora simplemente muestra una alerta).

También podes usar los callbacks data-expired-callback y data-error-callback, si el usuario valida el recaptcha pero luego pasa mucho tiempo hasta que hace click en el botón que realiza la acción, es recomendable volver a deshabilitar el botón con el callback data-expired-callback.

Igualmente esto no quita de que hagas la evaluación del recaptcha del lado del servidor.

saludos.

Hola. El codigo e quedo asi

    function generar_layout()
    {
            $this->generar_html_ef('usuario');
            echo "<script src='https://www.google.com/recaptcha/api.js'></script>";
            echo '<div class="g-recaptcha" data-sitekey="6LdbOrUUAAAAAKsb-Lctl0vNZRp41hN0Jz0X_9Rc" data-callback="recaptcha_ok"></div>

';
echo ‘’;
}

Pero con esto
this.dep(‘datos’).set_evento(new evento_ei(‘ingresar’, true, ‘true’ ));
no me funciona, ni siquiera me muestra la pagina., yo desactive el boton desde el formulario
lo estoy activando mal ??

Hola Olga,

No hace falta hacer toda esa validación, ya si entra al callback es porque el usuario lo completo bien!!!

Falla porque estas mezclando las comillas simples con las dobles, cambia por esto:

this.dep("datos").set_evento(new evento_ei("ingresar", true, "true" ));

saludos.

Ahora me dejo cargar pero no me muestra el boton

Sino podria directamente ejecutar el boton ingresar
Como podria ser ??

Hola Olga,

No, no ejecutes la acción cuando completa el recaptcha.

Lo que te decía era que deshabilites el botón, y lo habilites ni bien completa el recaptcha (data-callback=“recaptcha_ok”), seria algo así:


        function generar_layout()
        {
                $this->generar_html_ef('usuario');
                echo "<script src='https://www.google.com/recaptcha/api.js'></script>";
                echo "<script type="text/javascript">this.desactivar_boton('nombre-boton');</script>";
                echo '<div class="g-recaptcha" data-sitekey="6LdbOrUUAAAAAKsb-Lctl0vNZRp41hN0Jz0X_9Rc" data-callback="recaptcha_ok"></div>';

                echo '<script type="text/javascript">
                                function recaptcha_ok () {
                                    this.activar_boton('nombre-boton');
                                }
                             </script>';
        }

saludos.

No funciona lo de desactivar y activar el boton.
Esta funcion es una extension del formulario datos de login
en ese formulario(datos, de toba) tengo definido el campo usuario y el boton ingresar
Visualmente esta perfecto, el campo usuario se completa perfecto y el captcha se completa tbn
El problema es que el boton ingresar me queda activo permanentemente y de manera independiente, o sea, basta que se cargue el usuario(que esta como campo obligatorio) y listo.
Obviamente que si se marca la casilla del captcha verifica si es humano o no pero de forma independiente
Quizas debería validar el captcha luego de cargar los datos, en el ci_login.php, en la funcion invocar_autenticacion_por_tipo, donde valido al usuario y antes validaba el captcha que trae toba con el campo ei_editable captcha
tendria que probar con data-callback, deberia mandarlo con la url y nombre de programa ??
pero no se como hacer que lo ejecute esa funcion
El tema es que se supone que este mecanismo de captcha es mas seguro y rapido que la version anterior, por eso la estan pidiendo
Muchas gracias

Buenos días Olga.
Te hago una consulta, estos cambios que estás haciendo los tenés subido al colab?
En caso de que no sea así, podrías pasarnos un archivo con todos cambios que hayas hecho. Podés obtener este cambio con el comando svn diff pero 1° deberías exportar si es que has hecho cambios en el toba editor.
Con eso vamos a tener lo mismo que estás modificando para poder replicarlo.

Saludos.

No los tengo en colab
Si los estoy subiendo a svn
Yo modifique el ci_login. Basicamente lo simplifique a solo el ingreso de un codigo de usuario que es la credencial del alumno
Te podria adjuntar los programas que modifique

Está bien, sino comentame brevemente que modificaste para que tratar de utilizar el captcha en toba.

Saludos.

Usar el captcha es para evitar que se ingrese con un programa robot. De hecho ya se estaba haciendo a dos semanas de implementado
En este momento está funcionando con el captcha de toba. Y funciona bien. El tema es que está muy lento, debido a la concurrencia, por ello desde la prosecretaría sugieren el uso de el recaptcha v2.
Fuera de toba, como páginas aisladas he probado los códigos que se encuentran en google y me funcionan bien.
Pero no consigo integrarlo con toba

Subi al repositorio personal un archivo tar con todo el proyecto. Espero que sirva

Hola Olga,

Hicieron algun tipo de profiling sobre la ejecucion del item ese?, la carga se encontraba en la generacion de la imagen?, en la validacion del texto ingresado?

Pero no consigo integrarlo con toba
Para integrarlo tenes en ppio que hacer dos cosas:
  • Solucionar la integracion via JS (que veo que los chicos te estuvieron orientando) para lograr que no se haga el submit hasta que no este ingresado o validado el captcha
  • Desde el lado servidor, hacer la verificacion server to server via la API que provee google con CURL o un llamado a WS.

Esto ultimo lo podes hacer en la misma operacion o en una clase aparte para que te quede autocontenido (y reusable), en cualquier caso lo que tenes que tener en cuenta es que no podes proseguir con los datos que ingreso el cliente hasta tanto dicha verificacion este completa.

Saludos

  • Solucionar la integracion via JS (que veo que los chicos te estuvieron orientando) para lograr que no se haga el submit hasta que no este ingresado o validado el captcha
    Esta es la parte que no estoy consiguiendo, no manejo muy bien el js.
    Esta bien que lo maneje desde una extension del formulario ?? en la funcion generar_layout ??
    Me parece que tengo que intentar cargar en action del boton el regreso a programa ci_login.php en la funcion invocar_autenticacion_por_tipo que es donde valido al usuario. ?? Pero no se como lograr eso.
    No encontre mucha referencia.

  • Desde el lado servidor, hacer la verificacion server to server via la API que provee google con CURL o un llamado a WS.
    Este punto creo que lo resorvería luego de realizar el anterior, ja.

Muchas gracias

En cuanto a esto
Hicieron algun tipo de profiling sobre la ejecucion del item ese?, la carga se encontraba en la generacion de la imagen?, en la validacion del texto ingresado?
Se supone que esto fue lo que colapsa dado que fue luego de incorporarlo que comenzaron los grandes problemas. Son mas de 10000 alumnos queriendo reservar hasta 1500 porciones disponibles. Se piensa que cambiar el captcha a V2 puede ayudar.

Muchas gracias por toda la ayuda !!!. Cuando ingresa el usuario se carga el codigo de usuario, el captcha y el boton ingresar
El campo usuario es obligartorio, hasta que no se cargue no puede ingresar, y ahora con ese agregado en la funcion de ci_login no le permite ingresar hasta que no se cargue el captcha.
Finalmente me funciono asi :

En la extension del fomulario datos

require_once “includes/recaptchalib.php”; (Esta libreria se puede bajar de internet sin problemas)

function generar_layout()
{
    $this->generar_html_ef('usuario');

    $url = toba::vinculador()->get_url('migestion', '2693');

    echo '<html>';
                    echo '<form name = "datos" action="$url" method="POST">';
                            echo '<div class="g-recaptcha" data-sitekey="6LdbOrUUAAAAAKsb-Lctl0vNZRp41hN0Jz0X_9Rc"></div>';
                            echo '<script type="text/javascript"
                            src="https://www.google.com/recaptcha/api.js">
                            </script>';
                    echo '</form>';
            echo '</html>';

}

Y luego en ci_login.php

function invocar_autenticacion_por_tipo()
{
$tipo_auth = toba::instalacion()->get_tipo_autenticacion();
if (isset($this->s__datos[‘usuario’]) || isset($this->s__datos_openid[‘provider’])) { //Para el caso de autenticacion basica y OpenId

$siteKey = "6LdbOrUUAAAAAKsb-Lctl0vNZRp41hN0Jz0X_9Rc";
$secret = "6LdbOrUUAAAAALBNwg6dKRdJRFeyeyff84jVHRC8";
$resp = null;
$error = null;
$reCaptcha = new ReCaptcha($secret);
if ($_POST["g-recaptcha-response"]) {
    $resp = $reCaptcha->verifyResponse(
    $_SERVER["REMOTE_ADDR"],
    $_POST["g-recaptcha-response"]
);
}

if ($resp != null && $resp->success) {
$this->valellave = ‘OK’; A esta variable la declro publica
}

        if(!isset($this->valellave)){
                                unset($usuario);
                            unset($clave);
                            echo "<script language='JavaScript'>alert('ERROR EN CAPCHA');</script>";
                            $url = toba::vinculador()->get_url();
                            echo "<META HTTP-EQUIV='refresh' CONTENT='0 ; URL=$url'>";
                            exit;
                }