Home
Ter
02
Set

Usando JCCReCaptcha com yvComment

Atenção, abrir em uma nova janela. PDFImprimirE-mail

Alterando o yvComment

 

Quando criei o JCCReCaptcha, tinha em mente usá-lo junto com o yvComment. Por esta razão, implementei um plugin baseado na interface do plugin OSTWigits-Captcha, utilizado pelo yvComment.

 

Apesar de seguirmos rigorosamente a interface do OSTWigits-Captcha, a ponto do nosso método confirm() também receber um argumento para permitir que seja executado no mesmo contexto daquele plugin, o fato do ReCaptcha funcionar gerando uma interface html completa impôs a necessidade de algumas adequações dentro do código do yvComment.

 

Naturalmente, esta é uma das coisas mais bonitas do Software Aberto: A possibilidade de adequá-lo às suas necessidades. Isto não quer dizer, entretanto, que seja razoável sair alterando tudo quanto usamos, desta forma, buscamos alternativas para mudanças que tivessem o menor impacto possível dentro do código do yvComment.

 

Antes de começarmos, gostaria de salientar que as mudanças apresentadas aqui foram feitas sobre a versão 1.23 do componente yvComment.  Naturalmente não há qualquer garantia de que estas mudanças permaneçam válidas em versões futuras deste componente!

 

Mudança “preguiçosa”

 

Chamo de mudança “preguiçosa” por ser a menos intrusiva no componente yvComment, às custas de que este deixe de ser compatível com o OSTWigits-Captcha.

 

  1. Fonte: default.php, na pasta components\com_yvcomment\views\comment\tmpl, código original, trecho 352-361:
  2.  

    <img
    	<?php
     	     if ($this->params->get('yvcomment_delay_captcha_image')
     	          && empty($textToEdit)
     	          && !isset($this->editor)) {
     	         echo ' id=\'captcha' . $idSuffix . '\'';
     	     } else {
     	         echo ' src=\'' . JRoute::_('index.php?option=com_yvcomment&task=displaycaptcha') . '\'' ;
     	}?>
     	alt='<?php echo JText::_("SECRETWORD_IMAGE"); ?>' />
    

     

    Este é o trecho em que a tag <img> é usada, para apresentar a imagem dinâmica gerada pelo plugin OSTWigits-Captcha. O acionamento do plugin ocorre por intermédio do argumento “SRC”, “JRoute::_('index.php?option=com_yvcomment&task=displaycaptcha'”.

     

    Tudo que precisamos fazer aqui é substituir estas linhas pelo código abaixo:

     

    <?php
           Global $mainframe;
           $mainframe->triggerEvent( 'OnCaptcha_Display');
     
           echo "<input name='secretword' type='hidden' value='-' />";
     ?>
    

     

    Perceba que o “input secretword’ é necessário porque o yvComment espera recebê-lo, tratá-lo e encaminhá-lo ao plugin. Para o ReCaptcha, não precisamos dele, mas removê-lo provocaria mais mudanças dentro do yvComment. Assim, o mantivemos escondido e com um valor default, para que não caia na crítica do yvComment que garante que o usuário tenha digitado algo antes de submeter ao plugin.

     

  3. Fonte: default.php, na pasta components\com_yvcomment\views\comment\tmpl, código original, trecho 364-378:
  4.  

     <tr<?php
     	if ($this->params->get('yvcomment_delay_captcha_image')
     	        && empty($textToEdit)
     	        && !isset($this->editor)) {
     	   echo ' id=\'secretwordrow' . $idSuffix . '\' style=\'display:none\'';
     	}?>>
       <td class="CommentLeftColumn" title='<?php echo JText::_("SECRETWORD_TIP"); ?>'>
         <?php
             echo JText::_('SECRETWORD');
         ?>:
       </td>
       <td>
           <input name='secretword' type='text' class='inputbox' style='width: 98%' value='' />
       </td>
     </tr>
    

     

    Este é o trecho responsável pela apresentação do textbox que capturaria a tentativa de interpretação do usuário para o OSTWigits-Captcha. Desde que o ReCaptcha já traz seu próprio textbox para este fim, este trecho pode ser comentado ou removido do código integralmente!

     

Mudança elaborada

 

A adaptação acima é toda a adaptação realmente necessária para que o plugin JCCReCaptcha possa ser utilizado pelo yvComment. Entretanto, após feita esta adaptação, retornar ao plugin OSTWigits-Captcha exigiria que as mesmas fossem desfeitas.

 

Muitas maneiras existem para fazer isso. Uma é salvando uma cópia do fonte original para restauração por meio de um mero copy, via linha de comandos; outra é desinstalar o yvComment alterado e reinstalar o pacote original, (perdendo toda a configuração no processo).

 

Em nossa instalação, optamos por fazer uma adaptação mais elaborada que consiste em adicionar um parâmetro para permitir “chavearmos” entre o uso de um plugin que gera uma imagem – como o OSTWigits-Captcha, e outro que gere uma interface completa em html, como o JCCReCaptcha. Como o yvComment faz uso do plugin para Captcha por intermédio de Triggers, ele não possui dependência direta com nenhum plugin específico, facilitando muito a substituição destes, quisemos então reforçar esta característica. Isto envolveu as seguintes alterações:

  1. Fonte: en-GB.com_yvcomment.ini, pasta administrator/language/en-GB, linha 190:
  2.  

    Este é o arquivo contendo as mensagens do componente e do plugin yvComment, para localização. Vamos fazer a inclusão das mensagens que criaremos para nossas mudanças, indicadas nas linhas realçadas:

     

    USE_CAPTCHA=Use Captcha
    USE_CAPTCHA_DESC=Protect from spam with secret words (compatible Captcha plugin required)
    CAPTCHA_RENDER_MODE=Captcha Render Mode
    CAPTCHA_RENDER_MODE_DESC=Render engine of captcha plugin.
    CAPTCHA_RENDER_MODE_OPT_IMG=Image for IMG tag
    CAPTCHA_RENDER_MODE_OPT_HTML=HTML User Interface
    UNKNOW_CAPTCHA_RENDER_MODE=Unknow captcha render mode.
    

     

  3. Fonte: yvcomment.xml, plugin yvcomment, pasta plugins\content:
  4.  

    Este é o fonte onde se encontram definidos todos os parâmetros tanto do plugin quanto do componente yvComment. Neste fonte, à linha 139, incluímos o código abaixo, que declara o nosso novo parâmetro, “captcha_render_mode”:

     

     <param name="captcha_render_mode" type="list" default="img" label="CAPTCHA_RENDER_MODE" description="CAPTCHA_RENDER_MODE_DESC">
       <option value="img">CAPTCHA_RENDER_MODE_OPT_IMG</option>
       <option value="html">CAPTCHA_RENDER_MODE_OPT_HTML</option>
     </param>
    

     

    Perceba que em lugar de usarmos as mensagens em texto direto, estamos usando as macros que definimos anteriormente no arquivo de localização. Desta forma, nossa mudança será facilmente portada para vários idiomas.

     

  5. Fonte: view.html.php, componente yvcomment, pasta components\com_yvcomment\views\comment:
  6.  

    O trecho que nos interessa neste fonte, faz a carga de alguns dos parâmetros em variáveis, para uso posterior. Incluiremos na linha 373, a carga do nosso novo parâmetro, seguindo o estilo e as convenções de nomeação utilizados pelo código:

     

     $params->set('yvcomment_captcha_render_mode', $yvComment->getConfigValue('captcha_render_mode', 'img') );
    

     

  7. Fonte: default.php, componente yvComment, na pasta components\com_yvcomment\views\comment\tmpl, linha 352 a 361:
  8.  

    Faremos uso do novo parâmetro para manter o código original que renderiza a imagem de captcha, "chaveando" entre este e o novo código que renderiza a interface gráfica do widget. Com base no código original, conforme visto acima, acrescentar as linhas em destaque:

     

    <?php if ( $this->params->get('yvcomment_captcha_render_mode') == 'img' ) : ?>
     		<img
     			<?php
     			if ($this->params->get('yvcomment_delay_captcha_image')
     				&& empty($textToEdit)
     				&& !isset($this->editor)) {
     				echo ' id=\'captcha' . $idSuffix . '\'';
     			} else {
     				echo ' src=\'' . JRoute::_('index.php?option=com_yvcomment&task=displaycaptcha') . '\'' ;
     			}?>
     		  alt='<?php echo JText::_("SECRETWORD_IMAGE"); ?>' />
     <?php elseif ( $this->params->get('yvcomment_captcha_render_mode') == 'html' ) :
     		global $mainframe;
     		$mainframe->triggerEvent( 'OnCaptcha_Display');
     
     		echo "<input name='secretword' type='hidden' value='-' />";
           else:
    		echo JText::_("UNKNOW_CAPTCHA_RENDER_MODE");
           endif;
     ?>
    

     

  9. Fonte: default.php, componente yvComment, na pasta components\com_yvcomment\views\comment\tmpl, linha 364-378, (posição no fonte original, conforme a inclusão das linhas feita acima, o trecho deverá estar nas linhas 374-388, do fonte modificado) :
  10.  

    Faremos uso do novo parâmetro para omitir a linha da TABLE que contêm o textbox usado para captar a tentativa de solução do captcha, quando este é renderizado através de uma tag img, uma vez que nosso componente "encherta" o widget de recaptcha que possui uma interface gráfica completa, já com seu próprio textbox. Com base no código original, conforme visto acima, inserir as linhas em destaque:

     

     <?php if ( $this->params->get('yvcomment_captcha_render_mode') == 'img' ) : ?>
       <tr<?php
     			if ($this->params->get('yvcomment_delay_captcha_image')
     				&& empty($textToEdit)
     				&& !isset($this->editor)) {
     				echo ' id=\'secretwordrow' . $idSuffix . '\' style=\'display:none\'';
     			}?>>
     	<td class="CommentLeftColumn" title='<?php echo JText::_("SECRETWORD_TIP"); ?>'>
     	  <?php
     		echo JText::_('SECRETWORD');
     		?>:
     	</td>
     	<td>
     	  <input name='secretword' type='text' class='inputbox' style='width: 98%' value='' />
     	</td>
       </tr>
     <?php endif; // yvcomment_captcha_render_mode ?>
    

     

Usando a versão modificada

 

Executadas as alterações descritas acima, Vá a interface de configuração do plugin yvComment. Você deverá encontrar nosso novo parâmetro, como ilustrado na figura abaixo:

 
Novo Parâmetro no yvComment

 

Altere-o para "HTML User Interface" e salve.

 

Instale o JCCReCaptcha e o habilite. Se tiver outro plugin de Captcha, desabilite-o.

 

Agora experimente o seu yvComment turbinado com o ReCaptcha. Deverá resultar em algo como a figura abaixo:

 
reCaptcha integrado ao yvComment
 
 

Finalizando

 

Infelizmente, devido a restrições de nossa hospedagem, não podemos fazer uso do plugin em nosso blog, pois o reCaptcha utiliza sockets na implementação de sua API.  Desta forma não podemos apresentar uma versão "ao vivo" do mesmo.  De qualquer forma, convidamos a todos que testarem o componente a nos deixarem suas impressões e comentários, logo no final da página.  Procuraremos responder às dúvidas o mais breve possível, aqui mesmo pelos comentários.

 

 



Adicionar este artigo ao seu site de favoritos ?
Digg! Reddit! Del.icio.us! Google! Live! Facebook! Technorati! StumbleUpon! MySpace! Netvouz! Mister-Wong! Diigo! Faves! Ask! DZone! Swik! Twitter! LinkedIn!

Adicionar comentário

Seu apelido/nome:
Comentário:

Menu Principal

Editar traduo para English (United Kingdom) Editar traduo para Português (Brasil)
Blog Sistemas e Cia