| 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'':
| |
| − | <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 == | | == Prueba == |
