elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?  (Leído 4,862 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« en: 6 Septiembre 2019, 03:37 am »

Buenas noches!
Busque información sobre como podría implementar RE-CAPTCHA de google hay varios vídeos sobre esto pero existen tres captchas diferentes (al menos los que veo yo) El captcha que sería completar una tarea siempre antes de enviar un formulario, o ese captcha que sólo va a aparecer si detecta algo anormal, el otro creo que es más avanzado no se muy bien... en fin el que me interesa es el invisible ese que sólo aparece si encuentra alguna anormalidad. No tuve éxito al buscar vídeos sobre insertar  un captcha de google invisible ya que todo el material que encontre esta en ingles. Si aparecen tutoriales de captchas para el primer caso que mencione anteriormente.

¡Muchas gracias!


En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #1 en: 6 Septiembre 2019, 06:37 am »

Si buscas algo como: add google captcha to your site, seguro que te salen muchos resultados útiles.

Puedes crear tu propio captcha. No es difícil hacer algo más seguro, rápido y que respete la privacidad de tus usuarios que el captcha de Google. A parte puedes añadir directamente en el captcha otras funcionalidades. Por ejemplo hay varios "copia y pega" de los capchas de Google por ahí que hacen minado de criptomonedas.

Para que salga el captcha al realizar ciertas acciones solo tienes que hacer un redirect a una página con el captcha, cargarlo desde PHP o directamente lo cargas con un href # en html sin cambiar la página por ejemplo al completar un formulario con carácteres no admitidos. Lo mismo del lado del servidor.

Puedes generar y devolver el captcha en la respuesta si no se cumple cualquiera de las condiciones de tu whitelist.

Para que sea permanente el captcha en el sitio usa cookies, ip, y demás identificadores que quieras.

Para diseñar el captcha puedes crear imágenes con código y algoritmos pseudoaleatorios, hacer preguntas sencillas de una lista bastante larga, etc.

Si buscas algo estético, hay captchas muy chulos de arrastrar y encajar figuras, pero tal y como funciona la inteligencia artificial, los bots y el reconocimiento óptico es muy poco seguro.

Piensa algo acorde a tu sitio.


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #2 en: 6 Septiembre 2019, 10:10 am »

Consejo: Aprende inglés y busca documentación oficial antes que cualquier cosa.

https://developers.google.com/recaptcha/docs/v3


Hay 3 versiones como tu bien dices. Esta la V2 y la V3. De la V2 tienes 2 opciones:
- Que te salga el check siempre (y que Google decida si hacerle challange al usuario)
- QUe te salga el check y el challange solo cuando Google cree que debería hacerle challenge al usuario, esta última se clasifica como "Invisible".

La V3 es muy parecida a la V2, la diferencia principal es que usa IA y trabaja de forma constante desde que el usuario entra a tu página. En vez de retar o hacer cosas raras, lo que hace es analizar el comportamiento y dar una puntuación de 0 a 1. Normalmente, si está por debajo de 0.5, Google cree que el usuario no es un humano o que al menos huele mal.


Ambas versiones lo que hacen es dar un hash que tienes que pasarle a Google y Google a partir de ahí te dice lo que opina, se basa así:

Recaptcha genera un hash -> Tu recibes ese hash en el servidor -> Se lo mandas a Google -> Google te responde si es valido o no.

Para implementar el V3 en PHP es relativamente sencillo. Supongamos que tienes un formulario relativamente simple:

Código
  1. <form action='' method='POST'>
  2.    <input type='text' name='user' placeholder='Usuario'>
  3.    <input type='password' name='pass' placeholder='Contraseña'>
  4.    <input type='hidden' name='loginToken' id='loginToken' value=''>
  5.    <button type='submit'>Entrar</button>
  6. </form>
  7. <script src='https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key'></script>
  8. <script src='recaptcha.js'></script>

Si te fijas hay un campo hidden que se llama loginToken, ese es el que va a contener el token (hash) que te da el Recaptcha. Tienes que poblarlo y para hacerlo puedes hacer esto en javascript (recaptcha.js).

Código
  1. // Cuando el recaptcha se haya cargado...
  2. grecaptcha.ready(function() {
  3.  
  4.    // Añadimos un evento que escucha para cuando se envie el formulario..
  5.    document.getElementById('loginForm').addEventListener('submit', function(e){
  6.  
  7.        // Si se envia, sacamos el token asignandole de acion 'loginForm'
  8.        grecaptcha.execute('reCAPTCHA_site_key', {action: 'loginForm'}).then(function(token) {
  9.  
  10.            // y ponemos el token en el campo invisible.
  11.            document.getElementById('loginToken').value = token;
  12.  
  13.        });
  14.    });
  15. });


Así pues cuando se envíe el formulario, te va a pasar un token al servidor con el nombre loginToken. Ahora necesitas validarlo, en PHP capturas el token y se lo mandas a Google:

Código
  1. <?php
  2. define('RECAPTCHA_SECRET', 'blablabla');
  3. define('RECAPTCHA_URL', 'https://www.google.com/recaptcha/api/siteverify');
  4.  
  5.  
  6. function validateRecaptcha($token)
  7. {
  8.    $data = array(
  9.        'secret' => RECAPTCHA_SECRET,
  10.        'response' => $token,
  11.        'remoteip' => $_SERVER['REMOTE_ADDR'] // este es opcional
  12.    );
  13.  
  14.    // Hacemos la petición a Google
  15.    $curl = curl_init();
  16.        $curl,
  17.        array(
  18.            CURLOPT_URL => RECATPCHA_URL,
  19.            CURLOPT_POST => true,
  20.            CURLOPT_POSTFIELDS => $data,
  21.            CURLOPT_RETURNTRANSFER => true
  22.    ));
  23.  
  24.    // Obtenemos la respuesta
  25.    $response = json_decode(curl_exec($curl));
  26.  
  27.    // Si la respuesta esta vacia, o la respuesta no es positiva
  28.    if (empty($response) || empty($response->success)) {
  29.        return false;
  30.    }
  31.  
  32.    // Obtenemos la puntuación y comprobamos si es menor a 0.5
  33.    $score = $response->score;
  34.  
  35.    if ($score < 0.5) {
  36.        return false;
  37.    }
  38.  
  39.    return true;
  40. }
  41.  
  42. if (isset($_POST['user'], $_POST['password'], $_POST['loginToken'])) {
  43.  
  44.    $token = (!empty($_POST['loginToken']) ? $_POST['loginToken'] : '');
  45.  
  46.    if (!validateRecaptcha($token)) {
  47.        die('El captcha no es valido');
  48.    }
  49.  
  50.    // Resto del codigo.
  51. }

Lo he hecho todo un poco de memoria y sin probarlo pero debería funcionar. Pero, hazte caso y aprende inglés... es obligatorio para programar.

Saludos
« Última modificación: 6 Septiembre 2019, 10:13 am por #!drvy » En línea

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #3 en: 6 Septiembre 2019, 18:18 pm »

Hola!

¿Donde debo poner id="loginForm" en el <form> ? ya que si no el código presenta un error,  Cannot read property 'addEventListener' of null

EDIT: otro error que me aparece es "grecaptcha.execute is not a function", probé poniendo el <script> de recaptcha de google en la cebecera head tanto como en el body pero no cambio nada, como observación me aparece un cuadradito con el logo de recaptchas en la parte baja a la derecha de la pagina, y si paso el mouse sobre este se expande un poco y dice "Protegido por RE-Captcha" no tengo muy en claro si esto después lo puedo ocultar.

Gracias!!!
« Última modificación: 9 Septiembre 2019, 20:47 pm por #!drvy » En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #4 en: 6 Septiembre 2019, 18:49 pm »

Código
  1. <form action='' method='POST' id="loginForm">
  2.    <input type='text' id="loginFormUser" name='user' placeholder='Usuario'>
  3.    <input type='password' name='pass' id="loginFormPassword" placeholder='Contraseña'>
  4.    <input type='hidden' name='loginToken' id='loginToken' value=''>
  5.    <button type='submit'>Entrar</button>
  6. </form>

Como ves Drvy usa .value para acceder al valor contenido en cada campo. Puedes usar .value para acceder a lo que el usuario pone en usuario, contraseña o lo que sea.

A parte de pillar el form por id puedes de otras maneras:

 https://www.w3schools.com/js/js_htmldom_elements.asp

 https://www.w3schools.com/js/tryit.asp?filename=tryjs_doc_forms

Esta lib está guay para crear captchas. Tienes un ejemplo en el sitio que puedes probar.
 https://www.w3schools.in/php-script/captcha/

Pd: El error que te sale debe estar relacionado con la carga de la librería. Asegurate de que la librería está cargada/lista antes de utilizar sus funciones.

Imagino que también debes conseguir la key/clave para tu sitio. Por la Documentación de google te tiene que venir como pedir tdas las claves que necesites 100%.

Citar
On the reCAPTCHA page, click “Use reCAPTCHA ON YOUR SITE“. Type your domain you are using the reCAPTCHA for. Select the “Enable this key on all domains (global key)” so you can use the same reCAPTCHA key for all your sites. Google will have 2 keys generated for your site, a public and a private key.
Sin buscar mucho me sale esto. Te traduzco:
Citar
En la pagina de reCaptcha haz click en "Utiliza reCaptcha en tu sitio". Escribe el dominio en el cual vas a usar reCaptcha. Selecciona "utilizar esta clave en todos los dominios(clave pública) Así podrás usar la misma clave para todos tus dominios. Google te va a generar 2 claves para tu sitio. Una privada y una pública.

A parte de esto, en el ejemplo de Drvy está guardando un archivo
al que llama recaptcha.js y lo incluye poniendo su ruta en el tag script source. Asegurate de que lo que abres en el navegador es la página principal desde la cual se llama al script. Y no abriendo directamente el script. O simplemente incluye todo el código en la página principal y no hagas el script src para llamar al recaptcha.js

Sin mirar mucho veo que hay guías de todo el proceso de incluir recaptcha escritas en español y salen con una simple búsqueda en Google.

Como te dice Drvy deberías tener como prioridad número 1 entender inglés. Toda la doc official y un montón de recursos y libros están escritos en inglés. Las propias "keywords" de los lenguajes son en inglés. Y muchos códigos opensource están en inglés también.
En la web de duolinguo tienes cursos de inglés interactivos. Son casi como juegos, divertidos útiles y didácticos. Héchale un ojo, se puede aprender desde 0 ahí. A parte ver vídeos en youtube y buscar palabras una por una (no frases) en el google translate te ayuda a aprender las palabras más frecuentes. Llega un punto que simplemente por contexto la palabra que no conzcas aprendes su significado sin buscar nada, algunas palabras no tienen traducción a español y las sacas así.


Mod: Obligatorio el uso de etiquetas GeSHi.
« Última modificación: 9 Septiembre 2019, 20:47 pm por #!drvy » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #5 en: 6 Septiembre 2019, 19:20 pm »

Hola manolo!

¿Entonces cual método es más seguro, usar las captchas de google o usar captchas creadas por mi?
« Última modificación: 9 Septiembre 2019, 20:47 pm por #!drvy » En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #6 en: 6 Septiembre 2019, 19:49 pm »

Son distintos. Los de Google a mi personalmente no me parecen seguros. La ventaja que tienen es que puedes trackear y detectar bots o usuarios mal intencionados que vienen de otros sitios y tú no tienes esa capacidad. Pero si targetean tu sitio, los captchas de google siempre ponen las mismas imágenes. Pasos de peatones, coches, semáforos, autobuses, escaparates... Los bots bien programados grabando movimientos y pulsaciones se los saltan. Si haces un captcha a mano sabiedo como funciona el reconocimiento óptico puedes generar captchas que no se puedan saltar. Solo tienes que validar en el server para que solo exista una validación posible por captcha y generar uno nuevo por cada intento. Yo me aprovecho del contexto de las oraciones para usar carácteres visualmente ambiguos. Por ejemplo si escribo "HoIa" en un captcha, el bot lo interpreta como hoia en vez de hola si lo que mira son los caracteres. A esto le sumas poner letras que no tengan nada que ver por encima y lineas del mismo color que las letras, letras desordenadas, etc. A parte fuerzas a que necesiten programar el bot específicamente para tu sitio y no que cada scanner por ahí suelto que se pueda saltar los captchas de google se salte también tu sitio.
También evitas que se carge una librería pesada en tu sitio, se haga track a los usuarios de tu sitio, etc.
El captcha puede quedar horrible estéticamente en tu sitio, etc.

Todo tienes sus pros y contras. Yo prefiero implementarlo yo, porque se lo que estoy haciendo en pos de usar una herramienta externa que no sè al 100% lo que hace. Y más cando trato con datos de terceros. En el caso de Google no creo que tengas problemas, pero por normal general estás metiendo código en tu sitio que en cualquier momento puede cambiar sus condiciones de uso y perjudicarte.
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #7 en: 7 Septiembre 2019, 18:51 pm »

Hola!

¿Que papel vendría a jugar en el código el "action: LoginForm" en el script de javascript?
¿Se puede dejar vació? ¿Es requerido?

Gracias!
En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #8 en: 7 Septiembre 2019, 21:39 pm »

Hola!

¿Que papel vendría a jugar en el código el "action: LoginForm" en el script de javascript?
¿Se puede dejar vació? ¿Es requerido?

Gracias!
En el html el atributo action sirve para indicar a donde va a ser enviado el form, por ejemplo:<form action="/miDocumentoPHP.php" ...
Antes de HTML5 (Antes de 2014) era obligatorio incluirlo. Desde HTML5 no es necesario incluirlo.

La respuesta a para que se usa en el javascript te viene en la documentación oficial. Me imagino que no la miraste o no entiendes lo que te pone, te traduzco el trozo en el que se menciona Action.

 https://developers.google.com/recaptcha/docs/v3

Actions

reCAPTCHA v3 introduce un nuevo concepto: actions. Cuando especificas un "action name" en cada sitio que ejecutas reCAPTCHA estás habilitando dos nuevas características:

Una detallada organización de la información para tu top10 de acciones en la consola de administración para la adaptación en base a analisis de riegos en el contexto de la acción. (Comportamientos malintencionados pueden variar)

Impirtante, cuando verificas la respuesta de reCAPTCHA también Debes verificar que el nombre de acción coincida con el que estás esperando.

¿script? grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}); }); ¿/script?

Note: actions solo deben contener caracteres alfanuméricos y barras, y no deben ser únicas del usuario.


Verificación de respuesta del sitio

Haz que la petición compruebe de token de respuesta como con reCAPTCHA v2 o Invisible reCAPTCHA.

La respuesta es un objeto JSON:
{
"success": true|false,
/* Si esta petición utilizó un token reCAPTCHA valido para tu sitio */

"score": number
/* La puntuación par esta petición (0.0 - 1.0) */

"action": string
/* El nombre de action de esta petición (importante verificarlo) */

"challenge_ts": timestamp,
/* Registro de tiempo de carga del reto (se refiere al captcha a resolver) (ISO format yyyy-MM-dd'T'HH:mm:ssZZ) */

"hostname": string,
/* El nombre de host del sitio donde se completó el reCAPTCHA

"error-codes": [...]
/* opcional */
}

Pd: Te cambié las etiquetas script por ¿? Que me me salta el WAF en el foro.
« Última modificación: 7 Septiembre 2019, 21:42 pm por string Manolo » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Como puedo implementar RE-CAPTCHAS de google en mi aplicación web?
« Respuesta #9 en: 7 Septiembre 2019, 22:07 pm »

Había hecho esto (a medias por que el código base lo encontré en un tutorial) lo que yo no podía encontrar era la v2 que era invisible y sólo aparecia cuando encontraba algo mal pero me termino convenciendo esta de la v3 que me dijerón:

Código
  1. // en HEAD
  2. <script src="https://www.google.com/recaptcha/api.js?render=KEY_PUBLICA"></script>
  3. <script type="text/javascript">
  4. grecaptcha.ready(function()
  5. {
  6. grecaptcha.execute('KEY_PUBLICA', {action: 'homepage'}).then(function(token)
  7. {
  8. document.getElementById('g-recaptcha-response').value = token;
  9. });
  10. });
  11. </script>
  12.  

Código
  1. // en BODY
  2.        <form id="LoginForm" method="post">
  3. <label for="email">Correo electrónico</label>
  4. <input type="email" id="email" placeholder="Email" name="email" required="true">
  5. <input type="text" id="g-recaptcha-response" name="g-recaptcha-response">
  6. <button type="submit" name="enviar">enviar</button>
  7. </form>
  8.  

Código
  1. // en PHP
  2.                class Captcha
  3.        {
  4.         function getCaptcha($token)
  5.         {
  6.         $respuesta = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=KEY_SECRETA&response={'.$token.'}');
  7. $retorno = json_decode($respuesta);
  8. return $retorno;
  9.        }
  10.        }                
  11.  
  12.                if(isset($_POST['enviar']))
  13. {
  14. $ObjCaptcha = new Captcha();
  15. $retorno = $ObjCaptcha->getCaptcha($_POST['g-recaptcha-response']);
  16. $email = $_POST['email'];
  17.  
  18. if(empty($email))
  19. {
  20. echo "No podes dejar esto vacio";
  21. }
  22. else
  23. {
  24. if($retorno->success == true && $retorno->score > 0.5)
  25. {
  26. echo 'funciono';
  27.  
  28. ?>
  29. <script type="text/javascript">
  30. window.location.href = "funciono";
  31. </script>
  32. <?php
  33. }
  34. else
  35. {
  36.                                        echo "Dice no se admiten robots, sólo se permite uno.";  :xD
  37. echo var_dump($retorno);
  38. }
  39. }
  40. }
  41.  

Por supuesto ya adapte donde dice KEY_SECRETA y KEY_PUBLICA por lo que me dio google.
si me da error le dije que me muestre un var_dump del dato y me devuelve esto (nunca se ejecuta correctamente, el success siempre esta en false, nose porque si no soy un robot, que yo sepa :xD)

el var dump
Código
  1. object(stdClass)#2 (2) { ["success"]=> bool(false) ["error-codes"]=> array(1) { [0]=> string(22) "invalid-input-response" } }
  2.  
« Última modificación: 7 Septiembre 2019, 22:11 pm por MiguelCanellas » En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como implementar google mail (Gmail) en tu pagina web, version WHM « 1 2 »
Desarrollo Web
Graphixx 10 13,041 Último mensaje 2 Julio 2014, 17:36 pm
por el-brujo
Pregunta: Como funciona una aplicacion que genera otra aplicacion?
Programación C/C++
inGnio 2 3,081 Último mensaje 18 Octubre 2012, 04:48 am
por x64core
Como puedo implementar Tcptrack
Redes
virtualedu 0 1,689 Último mensaje 10 Junio 2013, 14:58 pm
por virtualedu
[Pregunta]: ¿Seguridad del token de los captchas de google?
Desarrollo Web
Leguim 2 2,232 Último mensaje 24 Septiembre 2019, 11:02 am
por EdePC
[pregunta] como puedo extraer estos datos de google
Desarrollo Web
colcrt 1 1,625 Último mensaje 19 Septiembre 2019, 09:58 am
por @XSStringManolo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines