Ejemplo de reCAPTCHA en KumbiaPHP v2

{{#if: |}} {{#if: |}}

Este Artículo esta siendo revisado por los Kumbieros. Puedes tomar la información que aqui se encuentra pero no nos hacemos responsable

{{{imageright}}}

Pasos previos

Este ejemplo es la evolución del anterior tutorial sobre reCaptcha. Se recomienda leer el tutorial anterior para entender el funcionamiento básico y posteriormente leer este.

Cosas que vamos a encontrar distintas:

• Se ha creado una librería para abstraer las funciones de generar un captcha y para comprobar una contestación. Asi podremos usarla desde otros controladores.
• Se ha creado una segunda vista, en lugar de dejar un simple echo como hizo en el tutorial anterior.

Pasos

En el anterior tutorial sobre reCaptcha hacíamos toda la logica del reCaptcha en el controlador, lo cual, si solo era un único controlador no pasaba nada, pero de necesitarlo en más controladores, teníamos problemas.

Esta vez vamos a crear una librería que se encargue de todo: almacenar las keys, generar el HTML y validar la entrada del usuario. Dicho de otra forma, hemos creado una segunda capa de abstracción entre nuestra aplicación y reCaptcha: la primera es el propio API de reCaptcha y la segunda nuestra librería.

Creamos la libreria, app/libs/recaptcha.php:

<?php 
// Incluimos el fichero con la librería
require_once APP_PATH. '/libs/recaptchalib.php';
/**
 * Clase para consumir el servicio anti-spam reCaptcha
 * @author Soukron 
 */
class reCaptcha
{
    /**
     * Clave Publica reCaptcha
     * @var string
     */
    private static $_publicKey  = 'TU_CLAVE_PUBLICA';
    /**
     * Clave Privada reCaptcha
     */
    private static $_privateKey = 'TU_CLAVE_PRIVADA';   

    /**
     * Genera el HTML con el código reCaptcha
     * 
     * @param $error
     * @return string 
     */
    public static function html($error = NULL)
    {
        return recaptcha_get_html(self::$_publicKey, $error);
    }
    /**
     * Valida que el código colocado sea el correcto
     * @return Response
     */
    public static function validate()
    {
        $ret = recaptcha_check_answer (self::$_privateKey,
                $_SERVER['REMOTE_ADDR'],
                $_POST['recaptcha_challenge_field'],
                $_POST['recaptcha_response_field']);

        return $ret;
    }
}

Con lo que nuestro controlador se simplifica de la siguiente forma app/controllers/captcha_controller.php:

<?php
Load::Lib("recaptcha");
class CaptchaController extends AppController
{
        public function index()
        {              
		// Si vienen datos de formulario, los enviamos a la vista de nuevo
		if (Input::hasPost('Datos')) $this->Datos = Input::post('Datos');

		// Comprobamos que se haya rellenado el reCAPTCHA
                if (Input::hasPost("recaptcha_response_field"))
                {
			// Realizamos la comprobacion
                        $ret = reCaptcha::validate();
                        if ($ret->is_valid) {
				$this->Datos = Input::post('Datos');
				View::select("validado");
			}
			// Enviamos el error a la vista
			$this->previousError = $ret->error;
                }else{
                        //si no se ha enviando el captcha declaramas la variable a NULL
                        $this->previousError = NULL;
                }
        }
}

En la vista, usaremos el otro método de la librería. La vista queda como sigue, app/views/captcha/index.phtml:

<strong>Rellena el cuadro con tu nombre: </strong>
<?php 
	echo Form::open();
	echo Form::text('Datos.nombre');

	echo reCaptcha::html($previousError);	

	echo Form::submit('Enviar datos');

        echo Form::close();
?>

Y por último, para de paso mostrar el método View::select() de KumbiaPHP, creamos la vista que se mostrará en cuanto validemos correctamente el captcha.

La vista es app/views/captcha/validado.phtml:

<strong>Hola <?php echo $Datos['nombre']; ?>, tu formulario ha sido enviado!</strong>

Aplicando estilos

Para poder cambiar el css del captcha debemos agregar el siguiente código a nuestra app.

<script>
  var RecaptchaOptions = {
   theme : 'clean'  // [ red, white, blackglass, clean, custom ]
  };
</script>

A continuación agregar el siguiente código a nuestra app.

<style>
.recaptchatable .recaptcha_image_cell, #recaptcha_table
{
    background-color: #FFFFFF !important; /* reCaptcha widget background color */
}
#recaptcha_table
{
    border-color: #DFDFDF !important; /* reCaptcha widget border color */
}
#recaptcha_response_field
{
    border: 1px solid #CCCCCC !important; /* Text input field border color */
    background-color:#FFFFFF !important; /* Text input field background color */
}
</style>

Para mas información al respecto wiki de reCaptcha

Aplicando el cambio de idioma

Para poder cambiar el idioma del captcha podemos establecer el párametro lang utilizado en la API, de la siguiente manera.

<script>
var RecaptchaOptions = {
    lang: 'es'
};
</script>

Lo anterior traducira el captcha a español.

También podemos establecer nuestros propios textos a utilizar, agregando el siguiente codigo a nuestra app.

<script>
var RecaptchaOptions = {
    custom_translations : {
    	instructions_visual :  'Escriba las dos palabras:',
    	instructions_audio :   'Escribir lo que escucha:',
    	play_again :           'Volver a reproducir el audio.',
    	cant_hear_this :       'Descarga el audio en formato MP3.',
    	visual_challenge :     'Modo Visual',
    	audio_challenge :      'Escuchar la clave de seguridad.',
    	refresh_btn :          'Volver a generar una clave de seguridad.',
    	help_btn :             'Ayuda',
    	incorrect_try_again :  'Incorrecto. Por favor, inténtelo de nuevo.'
	},
    theme : 'clean'
};
</script>

Prueba

Ya esta! Como en el anterior tutorial, puedes visitar la URL de tu controlador en http://<tuhost>/captcha y probarlo.

Espero que esté claro! Si no, podeis escribirme o localizarme en el IRC.

Saludos,

Soukron