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.

Exemplo de JSON + SERVLET + AJAX JQUERY

Segue abaixo um exemplo de chamada AJAX com JQUERY a uma Servlet retornando um Array de objetos JSON, para esse exemplo estou levando em consideração que você já tenha um projeto Web simples com JQUERY OK?

Passo 1: Primeiro é necessário baixar o jar do JSON no site org.json, o jar que baixei contem as seguintes classes:



Passo 2: Crie uma classe chamada Pessoa, conforme abaixo:

   
 public class Pessoa {  
      private String nome;  
      private Integer idade;  
      public String getNome() {  
           return nome;  
      }  
      public void setNome(String nome) {  
           this.nome = nome;  
      }  
      public Integer getIdade() {  
           return idade;  
      }  
      public void setIdade(Integer idade) {  
           this.idade = idade;  
      }  
 }  


Passo 3: Crie uma Servlet chamada PessoaServlet que retornara um Array de objetos Json conforme o exemplo abaixo:

 import java.io.IOException;  
 import java.io.PrintWriter;  
 import java.util.ArrayList;  
 import java.util.List;  
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
 import org.json.JSONArray;  
 import org.json.JSONException;  
 import org.json.JSONObject;  
 import br.com.dominio.Pessoa;  
 public class PessoaServlet extends HttpServlet {       
           private static final long serialVersionUID = 1L;  
           @Override  
           protected void doGet(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {  
                recuperarPessoas(request, response);  
           }  
           @Override  
           protected void doPost(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {  
                recuperarPessoas(request, response);  
           }  
           private void recuperarPessoas(final HttpServletRequest request, final HttpServletResponse response) throws IOException {  
                try {  
                     request.setCharacterEncoding("UTF-8");  
            response.setCharacterEncoding("UTF-8");  
            response.setContentType("application/json");   
            PrintWriter out = response.getWriter();   
                     List<Pessoa> procedimentos = getPessoas();  
                     JSONArray jsonArray = new JSONArray();  
                     for (Pessoa obj : procedimentos) {  
                          JSONObject jsonObject = new JSONObject();  
                          jsonObject.put("nome", obj.getNome());  
                          jsonObject.put("idade", obj.getIdade());  
                          jsonArray.put(jsonObject);  
                     }  
                     out.print(jsonArray);  
                } catch (JSONException e) {  
                     e.printStackTrace();  
                }  
           }  
           private List<Pessoa> getPessoas() {  
                List<Pessoa> pessoas = new ArrayList<Pessoa>();  
                Pessoa pessoaUm = new Pessoa();  
                pessoaUm.setNome("Gustavo Lopes de Oliveira");  
                pessoaUm.setIdade(25);  
                Pessoa pessoaDois = new Pessoa();  
                pessoaDois.setNome("Ralph Miranda");  
                pessoaDois.setIdade(28);  
                pessoas.add(pessoaUm);  
                pessoas.add(pessoaDois);  
                return pessoas;  
           }  
      }  


Passo 4:Declare no seu web.xml a servlet PessoaServlet conforme abaixo, a minha servlet esta no pacote br.com.servlet por isso na tag do web.xml servlet-class eu tenho que apontar o caminho inteiro br.com.servlet.PessoaServlet:

  <servlet>  
  <servlet-name>PessoaServlet</servlet-name>  
  <servlet-class>br.com.servlet.PessoaServlet</servlet-class>  
  </servlet>  
  <servlet-mapping>  
  <servlet-name>PessoaServlet</servlet-name>  
  <url-pattern>/PessoaServlet</url-pattern>  
  </servlet-mapping>  


Passo 5:Crie um arquivo html ou xhtml chamado teste e copie o conteúdo abaixo nesse arquivo:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8"></meta>  
 <script src="/site/js/jquery-1.8.0.min.js" type="text/javascript"></script>  
 <script type="text/javascript">  
 //<![CDATA[  
 $(document).ready(function(){    
   var teste;  
   $.ajax({  
     data: "",  
     dataType: 'json',  
     url: './PessoaServlet',  
     type: 'POST',  
     success: function(data){  
          var corpo = "<div><h2>Lista de Pessoas</h2><ul>";  
          for (var i = 0, length = data.length; i < length; i++) {  
                     var pessoa = data[i];  
                     corpo += "<li>"+  
                                    "<span>Nome: "+pessoa.nome+"</span><span style='margin-left:10px;'>Idade: "+ pessoa.idade+"</span>"                           
                               "</li>";                                     
       }    
       corpo += "</ul></div>";  
       var divCorpo = document.getElementById("divCorpoHtml");  
       divCorpo.innerHTML=corpo;  
     },  
     error: function() {  
       alert("Ocorreu um erro na requisição ajax");  
     }  
   });  
 });  
 //]]>       
 </script>  
 </head>  
 <body style="padding: 10px;">       
      <div id="divCorpoHtml">       
      </div>  
 </body>  
 </html>  
Passo 6: Por fim inicie o seu servidor (TomCat/Jboss etc) e acesse a tela teste.(html/xhtml)e o resultado será conforme a imagem abaixo: