Crear captcha con google apis

2018-03-09 10:56:56

Google recaptcha api te permite crear de forma rápida y simple un captcha para tu sitio web. Lo puedes utilizar para registrar usuarios, envio de formularios, descarga de documentos. etc

Primeros pasos

Lo primero que debes hacer es entrar a la página de google recaptcha www.google.com/recaptcha. Recuerda que debes tener una cuenta de gmail creada e haber iniciado sesión. A continuación en la parte superior encontrarás un botón con el nombre de "get reCAPTCHA", como puedes ver en la imagen siguiente:



Nos redirigirá al panel de administración donde podremos ver y editar los distintos sitios que tengamos creados y crear nuevos sitios. En la siguiente imagen puedes ver un cuadro donde puedes crear un nuevo sitio para insertar reCAPTCHA.

  • En el campo Etiqueta debes introducir un nombre. Es recomendable el nombre del sitio o dominio
  • Selecciona la primera opción del tipo de reCAPTCHA
  • Presiona el botón registrar y se desplegará un nuevo campo donde debes introducir los dominios.
  • En el nuevo campo de dominios podrás introducir varios, incluso localhost para poder hacer pruebas desde un servidor local, separados por comas. Por ejemplo: mercados.com,localhost,mercadona.com
Al Registrar un nuevo reCAPTCHA se abrirá una nueva página donde podrás observar la clave del sitio, clave secreta y una explicación pobre de como implementarlo. Lo que te interesa de está página solo es la clave del sitio que la necesitarás para que funcione en tu sitio web. 
La clave del sitio es algo parecido a esto: 6LeLqRsUAAABAHea3eAaZozToH8PLE8Oce5DHjIO


Integración en tu página (front)

<html> 
    <head> 
        <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"> </script> 
    </head> 

    <body> 
        <script> 
            var verificado = false;

            var verifyCallback = function(response) {
                if(response !== ""){
                    verificado = true;
                }
            };
    
            var onloadCallback = function() {
                 grecaptcha.render('capcha', {
                     'sitekey' : '6LeLqRsUAAABAHea3eAaZozToH8PLE8Oce5DHjIO',
                     'callback' : verifyCallback,
                     'theme' : 'light'
                 });
            };

            $(document).ready(function(){
                $('#sendform').click(function(){
                    if(!verificado){
                        alert("Debes indicar que no eres un robot");
                    }else{
                        $('#form1').submit();
                    }
                 });
            });
        </script> 
<form method="post" id="form1"> <label>Captcha</label> <div class="g-recaptcha" id="capcha"></div> <button type="button" id="sendform">Enviar formulario</button> </form> </body> </html>

Ejemplo en ejecución de reCAPTCHA

En el ejemplo tienes que modificar la clave de tu sitio.

Captcha


Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.