Edición de «Ejemplo de reCAPTCHA en KumbiaPHP v2»

{{cleanupbox
|image=[[Archivo:Import.png|40px]]
|texto ='''Este Artículo esta siendo revisado por los Kumbieros.'''<br />
<span style="font-size:90%">Puedes tomar la información que aqui se encuentra pero no nos hacemos responsable</span>
}}

== Pasos previos ==
Este ejemplo es la evolución del [http://wiki.kumbiaphp.com/Ejemplo_de_reCAPTCHA_en_KumbiaPHP 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 [http://wiki.kumbiaphp.com/Ejemplo_de_reCAPTCHA_en_KumbiaPHP 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'':
<source lang=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;
    }
}
</source>


Con lo que nuestro controlador se simplifica de la siguiente forma ''app/controllers/captcha_controller.php'':
<source lang=php >
<?php
Load::Lib("recaptcha");
class CaptchaController extends ApplicationController
{
        public function index()
        {              
		// Si vienen datos de formulario, los enviamos a la vista de nuevo
		if ($this->has_post('Datos')) $this->Datos = $this->post('Datos');

		// Comprobamos que se haya rellenado el reCAPTCHA
                if ($this->has_post("recaptcha_response_field"))
                {
			// Realizamos la comprobacion
                        $ret = reCaptcha::validate();
                        if ($ret->is_valid) {
				$this->Datos = $this->post('Datos');
				$this->render("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;
                }
        }
}
</source>


En la vista, usaremos el otro método de la librería. La vista queda como sigue, app/views/captcha/index.phtml: 
<source lang=php >
<strong>Rellena el cuadro con tu nombre: </strong>
<?php 
	echo form_tag('captcha/');
	echo input_field_tag('Datos.nombre');

	// Cargamos la librería y le pedimos un código html
	Load::Lib("recaptcha");
	echo reCaptcha::html($previousError);	

	echo submit_tag('Enviar datos');
?>
</source>


Y por último, para de paso mostrar el método ''render'' de KumbiaPHP, creamos la vista que se mostrará en cuanto validemos correctamente el captcha. 

La vista es ''app/views/captcha/validado.phtml'':
<source lang=php>
<strong>Hola <?php echo $Datos['nombre']; ?>, tu formulario ha sido enviado!</strong>
</source>


== Aplicando estilos ==
Para poder cambiar el css del captcha debemos agregar el siguiente código a nuestra app.
<source lang=javascript>
<script>
  var RecaptchaOptions = {
   theme : 'clean'  // [ red, white, blackglass, clean, custom ]
  };
</script>
</source>
A continuación agregar el siguiente código a nuestra app.
<source lang=css>
<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>
</source>
Para mas información al respecto [http://wiki.recaptcha.net/ 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.
<source lang=javascript>
<script>
var RecaptchaOptions = {
    lang: 'es'
};
</script>
</source>
Lo anterior traducira el captcha a español.

También podemos establecer nuestros propios textos a utilizar, agregando el siguiente codigo a nuestra app.
<source lang=javascript>
<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>
</source>

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

[[Categoría:Tutoriales KumbiaPHP]]