Cómo integrar Google reCaptcha a nuestra web

| 3 noviembre, 2015 | JQuery/Javascript, php | 1 comentario

Cada vez Internet esta más inundada de programas llamados "robots" que su propósito es navegar por la web y encontrar formularios de registros, correo, etc que puedan llenar y crear todo tipo de spam.

Una solución a esto es la creación de los captcha que son pruebas que solo una persona podría resolver como la verificación de una palabra, imagen o pregunta. Google tiene también ha creado este método llamado reCaptcha que es uno de los que más me gusta debido a la sencillez en que una persona debe hacer la verificación, no es más que hacer clic en una casilla, verificar imagenes o depende del nivel de reintentos entonces verificar una que otra frase.

recaptcha1Lo primero que debemos hacer es registrar el dominio donde vamos a utilizar el captcha y así obtener nuestra llave de verificación. Eso lo hacemos desde https://www.google.com/recaptcha/admin (aclarando que debes tener una cuenta de correo gmail para acceder a este servicio así como a cualquier otro de Google)

recaptcha2

Luego de hacer el registro vamos a la página web e insertamos el div donde aparecerá el captcha y también uno donde desplegaremos un mesaje de verificación.

PHP
1
2
3
4
<div id='gCaptcha'></div>
<br/>
<!-- mensaje verificacion -->
<div id="msgVerificacion"></div>

En este tutorial pienso hacer la verificación mediante ajax por lo que voy a agregar la librería JQuery:

PHP
1
<script src="../../js/jquery-1.11.2.min.js"></script>

Ahora escribimos la función que a la que llamaremos desde la api de Google para dibujar el captcha en el formulario, en sitekey escribis la llave de tu sitio y callback disparará la función que verifica la cadena del captcha:

PHP
1
2
3
4
5
6
7
8
9
10
<script>
  //funcion para dibujar captcha
  var widgetId1;
  function generarCaptcha(){
    widgetId1 = grecaptcha.render('gCaptcha', {
      'sitekey' : '<<Aqui Clave del sitio>>',
      'callback' : verifCaptcha //funcion para verificar el captcha en nuestra web
    });
  }
</script>

Luego de la función que dibuja el captcha escribimos la que hace la verificación:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
.....
//funcion para verificar el captcha
function verifCaptcha(response){
  //ajax de verificacion
  $.ajax({
    type: 'POST',
    data: {captcha: response}, //enviamos la respuesta del captcha a la url especificada
    dataType: 'json',
    url: "verif_captcha.php"
  }).done(function(data){
    //convertimos la respuesta json en objetos
    var obj = $.parseJSON(JSON.stringify(data));
    var cod = parseInt(obj.cod);
    var mensaje = obj.mensaje;      
 
    //verificamos el codigo del mensaje
    switch(cod){
      case 0: //falla        
        $('#msgVerificacion').html(mensaje);
        grecaptcha.reset(widgetId1); //reseteamos el captcha (a tu gusto, no es necesario)
        break;
 
      case 1: //verificado        
        $('#msgVerificacion').html(mensaje);
        break;
    }        
  });
}
</script>

En lo anterior enviamos la cadena del captcha a una pagina en nuestro servidor que hará una verificación a la api de Google, y dependiendo de la respuesta mostrarémos un mensaje de error o éxito.

Al final de este archivo agregamos la api de Google que al finalizar la cargar de sus librerías llamará a la función que dibuja el captcha:

PHP
1
2
<!-- api -->
<script src='https://www.google.com/recaptcha/api.js?onload=generarCaptcha&render=explicit' defer async></script>

Este es el código completo de la página donde estará el captcha:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <form>
      <!-- captcha -->
      <div id='gCaptcha'></div>
      <br/>
      <!-- mensaje verificacion -->
      <div id="msgVerificacion"></div>
    </form>
  </body>
</html>
<script src="../../js/jquery-1.11.2.min.js"></script>
 
<script>
  //funcion para dibujar captcha
  var widgetId1;
  function generarCaptcha(){
    widgetId1 = grecaptcha.render('gCaptcha', {
      'sitekey' : '<<Aqui Clave del sitio>>',
      'callback' : verifCaptcha //funcion para verificar el captcha en nuestra web
    });
  }
  
  //funcion para verificar el captcha
  function verifCaptcha(response){
    //ajax de verificacion
    $.ajax({
      type: 'POST',
      data: {captcha: response}, //enviamos la respuesta del captcha a la url especificada
      dataType: 'json',
      url: "verif_captcha.php"
    }).done(function(data){
      //convertimos la respuesta json en objetos
      var obj = $.parseJSON(JSON.stringify(data));
      var cod = parseInt(obj.cod);
      var mensaje = obj.mensaje;      
 
      //verificamos el codigo del mensaje
      switch(cod){
        case 0: //falla        
          $('#msgVerificacion').html(mensaje);
          grecaptcha.reset(widgetId1); //reseteamos el captcha (a tu gusto, no es necesario)
          break;
 
        case 1: //verificado        
          $('#msgVerificacion').html(mensaje);
          break;
      }        
    });
  }
</script>
 
<!-- api -->
<script src='https://www.google.com/recaptcha/api.js?onload=generarCaptcha&render=explicit' defer async></script>

Este es el archivo php que hace la verificación:

verif_captcha.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
$captcha = filter_input(INPUT_POST, 'captcha'); //respuesta del captcha
 
//inicio un codigo y mensaje de error
$respuesta = ['cod'=>0, 'mensaje'=>'<span style="color:red; font-size: 12px;">El captcha no fue verificado<span>'];
 
//opciones para evitar verificacion ssl
$arrContextOptions = array(
  "ssl" => array(
    "verify_peer" => false,
    "verify_peer_name" => false,
  ),
);
 
//llamada a la api de google que nos devuelve una cadena json con la respuesta si la verificacion fue exitosa
$verif=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<<Aqui Clave secreta>>&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR'], false, stream_context_create($arrContextOptions));
$obj = json_decode($verif);
 
//si el campo success es true entonces todo salio bien =)
if($obj->success==true){ //captcha verificado con exito
  $respuesta = ['cod'=>1, 'mensaje'=>'<span style="color:green; font-size: 12px;">Chan chan, no eres un robot, felicidades!!<span>'];
}
 
//respuesta con el codigo y mensaje
echo json_encode($respuesta);

Cada vez que se pase el control del captcha mostrarémos un mensaje asi:

recaptcha4Si la verificación no la queres hacer por ajax sino que al enviar el formulario entonces debes olvidarte de la función verifCaptcha y capturar la respuesta en verif_captcha.php así:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$captcha = filter_input(INPUT_POST,'g-recaptcha-response');
//opciones para evitar verificacion ssl
$arrContextOptions = array(
  "ssl" => array(
    "verify_peer" => false,
    "verify_peer_name" => false,
  ),
);
 
//llamada a la api de google que nos devuelve una cadena json con la respuesta si la verificacion fue exitosa
$verif=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<<Aqui Clave secreta>>&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR'], false, stream_context_create($arrContextOptions));
$obj = json_decode($verif);
 
//si el campo success es true entonces todo salio bien =)
if($obj->success==true){ //captcha verificado con exito
  //validado
}else{
  //no validado
}

Espero que esto sea de ayuda, saludos!

 

Entradas relacionadas

Sobre el Autor

hug0

Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla

Un comentario
  1. Alberto Prieto Responder

    Muchas Gracias lo pude adaptar fácilmente a lo que necesito.

Deja un comentario