sexta-feira, 2 de agosto de 2013

Recaptcha Google em projeto JSF

Segue abaixo um passo a passo de como usar o componente Recaptcha do Google em uma aplicação JSF, o exemplo leva em consideração que você tenha em seu ambiente de desenvolvimento um projeto web JSF 1.2.

Passo 1: É necessário que você consiga as chaves (KEY PUBLIC) e (KEY PRIVATE) pois as mesmas são utilizadas para validação no componente. Para você gerar a chave acesse o seguinte endereço: https://www.google.com/recaptcha/admin/create onde é necessário que tenha uma URL valida.

Passo 2: Baixe o jar que contem as classes JAVA no seguinte endereço: https://code.google.com/p/recaptcha/downloads/list?q=label:java-Latest . Após isso insira o jar nas libs do seu projeto.

Passo 3: Crie um ManagedBean conforme o exemplo abaixo:

 import javax.faces.application.FacesMessage;  
 import javax.faces.context.FacesContext;  
 import javax.servlet.http.HttpServletRequest;  
 import net.tanesha.recaptcha.ReCaptcha;  
 import net.tanesha.recaptcha.ReCaptchaFactory;  
 import net.tanesha.recaptcha.ReCaptchaImpl;  
 import net.tanesha.recaptcha.ReCaptchaResponse;  

 public class RecaptchaBean {  
      private final String KEY_PUBLIC = "DIGITE_A_CHAVE_PUBLIC";  
      private final String KEY_PRIVATE = "DIGITE_A_CHAVE_PRIVADA";  
     
      public String getRecaptcha() {  
           ReCaptcha recaptcha = ReCaptchaFactory.newReCaptcha(KEY_PUBLIC, KEY_PRIVATE, false);  
           return  recaptcha.createRecaptchaHtml(null, null);  
      }  
      
      public void validarRecaptcha() {  
           try {  
                if (!validaTextoImagem()) {  
                     FacesContext.getCurrentInstance().addMessage("form",  
                               new FacesMessage(FacesMessage.SEVERITY_ERROR, "Dados inválidos", null));  
                } else {  
                     FacesContext.getCurrentInstance().addMessage("form",  
                               new FacesMessage(FacesMessage.SEVERITY_INFO, "Dados Validos", null));  
                }  
           } catch (Exception e) {  
                e.printStackTrace();                 
           }  
      }  

      private boolean validaTextoImagem() throws Exception {  
           HttpServletRequest req = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();  
           String enderecoRemoto = req.getRemoteAddr();  
           ReCaptchaImpl reCaptcha = new ReCaptchaImpl();  
           reCaptcha.setPrivateKey(Mensagem.key(KEY_PRIVATE));  
           String textoCriptografado = req.getParameter("recaptcha_challenge_field");  
           String resposta = req.getParameter("recaptcha_response_field");  
           /**  
            * Testa se o campo desafio está nulo ou vazio, ou se o campo resposta  
            * veio nulo (vem String vazia se o usuário não preencheu) e lança  
            * exception.  
            */  
           if (textoCriptografado == null || textoCriptografado.equals("") || resposta == null) {  
                throw new Exception("Dados submetidos não recuperados. Talvez exista um problema na exibição do componente captcha.");  
           }  
           ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(enderecoRemoto, textoCriptografado, resposta);  
           if (resposta.isEmpty() || !reCaptchaResponse.isValid()) {  
                return false; // resposta em branco ou inválida  
           } else {  
                return true; // texto válido  
           }  
      }  
 }  


Após isso insira o ManagedBean no seu faces-config.xml conforme a imagem abaixo:



Passo 4: Crie um arquivo xhtml e insira o conteúdo abaixo:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core" >  
 <head>  
      <script type="text/javascript">       
           var RecaptchaOptions = {  
                theme : 'clean', // as opções são 'red' (default), 'white', 'blackglass' e 'clean'  
                lang : 'pt'  
           };            
      </script>       
 </head>  
 <body>  
      <h:form id="form">  
           <div style="margin: 10px;">  
                <h:messages />  
           </div>  
           <div style="clear:both;">                           
                <h:outputText value="#{recaptchaBean.recaptcha}" escape="false" />  
           </div>       
           <h:commandButton action="#{recaptchaBean.validarRecaptcha}" value="Validar Recaptcha" />       
      </h:form>  
 </body>  
 </html>  


Após isso suba o seu servidor web e acesse essa tela que criou, e o browser exibirá o seguinte resultado:



No site do Google para desenvolvedores você pode encontrar mais informações de como utilizar esse componente usando as melhores praticas através do link https://developers.google.com/recaptcha/intro.

Nenhum comentário:

Postar um comentário