Autor Tema: [SOLUCIONADO] Como agregar campo reCaptcha V2  (Leído 179 veces)

0 Usuarios y 1 Visitante están viendo este tema.

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
[SOLUCIONADO] Como agregar campo reCaptcha V2
« : agosto 28, 2019, 10:18:06 am »
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.
« Última Modificación: septiembre 02, 2019, 02:38:23 pm por olgacisneros »

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
[SOLUCIONADO] Como agregar campo reCaptcha V2
« Respuesta #1 : agosto 28, 2019, 12:58:34 pm »
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
« Última Modificación: septiembre 02, 2019, 02:38:43 pm por olgacisneros »

lleonardis

  • Moderador Global
  • *****
  • Mensajes: 1103
    • Ver Perfil
  • Institución: SIU
  • Nombre y apellido: Leonel Leonardis
  • Sistema: G3W2
Re:Como agregar campo reCaptcha V2
« Respuesta #2 : agosto 28, 2019, 03:10:08 pm »
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:

Código: [Seleccionar]
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.

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #3 : agosto 28, 2019, 04:53:38 pm »
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 '<script type="text/javascript">
                        function recaptcha_ok () {
                                var response = grecaptcha.getResponse();
                                if(response.length == 0){
                                                alert("Captcha no verificado")
                                        } else {
                                                alert("Captcha verificado");
                                                this.dep('datos').set_evento(new evento_ei('ingresar', true, 'true' ));
                                                return true;
                                        }
                                }
                                </script>';
        }

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 ??


lleonardis

  • Moderador Global
  • *****
  • Mensajes: 1103
    • Ver Perfil
  • Institución: SIU
  • Nombre y apellido: Leonel Leonardis
  • Sistema: G3W2
Re:Como agregar campo reCaptcha V2
« Respuesta #4 : agosto 28, 2019, 04:59:49 pm »
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:
Código: [Seleccionar]
this.dep("datos").set_evento(new evento_ei("ingresar", true, "true" ));
saludos.

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #5 : agosto 28, 2019, 05:11:06 pm »
Ahora me dejo cargar pero no me muestra el boton


olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #6 : agosto 28, 2019, 05:24:09 pm »
Sino podria directamente ejecutar el boton ingresar
Como podria ser ??

lleonardis

  • Moderador Global
  • *****
  • Mensajes: 1103
    • Ver Perfil
  • Institución: SIU
  • Nombre y apellido: Leonel Leonardis
  • Sistema: G3W2
Re:Como agregar campo reCaptcha V2
« Respuesta #7 : agosto 29, 2019, 09:49:16 am »
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í:

Código: [Seleccionar]
        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.
« Última Modificación: agosto 29, 2019, 09:51:04 am por lleonardis »

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #8 : agosto 29, 2019, 11:16:36 am »
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

Jose Marino

  • Moderador Global
  • *****
  • Mensajes: 991
    • Ver Perfil
    • Email
  • Institución: SIU
  • Nombre y apellido: José Luis Marino
  • Sistema: Guaraní
  • Teléfono laboral: 4129-1952
  • Utilizo algun sistéma del SIU: Sí
Re:Como agregar campo reCaptcha V2
« Respuesta #9 : agosto 29, 2019, 11:37:22 am »
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.

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #10 : agosto 29, 2019, 12:23:10 pm »
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

Jose Marino

  • Moderador Global
  • *****
  • Mensajes: 991
    • Ver Perfil
    • Email
  • Institución: SIU
  • Nombre y apellido: José Luis Marino
  • Sistema: Guaraní
  • Teléfono laboral: 4129-1952
  • Utilizo algun sistéma del SIU: Sí
Re:Como agregar campo reCaptcha V2
« Respuesta #11 : agosto 29, 2019, 12:43:13 pm »
Está bien, sino comentame brevemente que modificaste para que tratar de utilizar el captcha en toba.


Saludos.

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #12 : agosto 29, 2019, 01:56:28 pm »
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

olgacisneros

  • Full Member
  • ***
  • Mensajes: 117
    • Ver Perfil
    • Email
  • Institución: U.N.C. S.P.G.I.
  • Nombre y apellido: Olga Cisneros
  • Teléfono laboral: 0351-4266211
Re:Como agregar campo reCaptcha V2
« Respuesta #13 : agosto 29, 2019, 02:48:16 pm »
Subi al repositorio personal  un archivo tar con todo el proyecto. Espero que sirva

richard

  • Moderador Global
  • *****
  • Mensajes: 2647
    • Ver Perfil
  • Institución: SIU
  • Nombre y apellido: Ricardo Dalinger
  • Sistema: SIU-Toba
Re:Como agregar campo reCaptcha V2
« Respuesta #14 : agosto 30, 2019, 11:06:50 am »
Hola Olga,
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.
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?

Citar
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
Twitter es al incontinente verbal,  lo que los dulces al diabetico.