Revisión actual |
Tu texto |
Línea 5: |
Línea 5: |
| }} | | }} |
| | | |
− | == Pasos previos ==
| + | Definitely pent topic matter, appreciate it for selective information. dfafcfgddedbfkge |
− | 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:
| + | Very nice site! |
− | * 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 ==
| + | Very nice site! |
− | 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.
| + | Very nice site! |
| | | |
− | Creamos la libreria, ''app/libs/recaptcha.php'':
| + | Very nice site! |
− | <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';
| |
− | /**
| |
− | * Errores del reCaptcha
| |
− | */
| |
− | private static $_error = NULL;
| |
− | | |
− | /**
| |
− | * Genera el HTML con el código reCaptcha
| |
− | *
| |
− | * @return string
| |
− | */
| |
− | public static function html()
| |
− | {
| |
− | return recaptcha_get_html(self::$_publicKey, self::$_error);
| |
− | }
| |
− | /**
| |
− | * Valida que el código colocado sea el correcto
| |
− | * @return boolean
| |
− | */
| |
− | public static function isValid()
| |
− | {
| |
− | $ret = recaptcha_check_answer (self::$_privateKey,
| |
− | $_SERVER['REMOTE_ADDR'],
| |
− | $_POST['recaptcha_challenge_field'],
| |
− | $_POST['recaptcha_response_field']);
| |
− | if ( $ret->is_valid ){
| |
− | return TRUE;
| |
− | }else{
| |
− | self::$_error = $ret->error;
| |
− | return FALSE;
| |
− | }
| |
− | }
| |
− | }
| |
− | </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 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
| |
− | if (reCaptcha::isValid() {
| |
− | $this->Datos = Input::post('Datos');
| |
− | View::select("validado");
| |
− | }
| |
− | }
| |
− | }
| |
− | }
| |
− | </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::open();
| |
− | echo Form::text('Datos.nombre');
| |
− | | |
− | echo reCaptcha::html();
| |
− | | |
− | echo Form::submit('Enviar datos');
| |
− | | |
− | echo Form::close();
| |
− | ?>
| |
− | </source>
| |
− | | |
− | | |
− | 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'':
| |
− | <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]]
| |