JSF utilizando JBOSS + RichFaces
Olá galera! Vamos a mais um post. Como venho realizando estudos sobre JBOSS, JSF e RICHFACES, resolvi compartilhar um pouco do meu aprendizado com vocês.
Este post ensina como configurar o richfaces em uma aplicação JSF, criando um exemplo que está disponível na internet e já é conhecido por muitos.
RICHFACES
O richfaces é uma biblioteca de componentes para aplicações web que utilizando o framework JSF. Seus componentes são dividos em duas bibliotecas de tags: a RichFaces, que fornece temas (skin) e Ajax4jsf Component Development Kit (CDK).
Para criarmos uma aplicação Web usaremos o Eclipse como plataforma. Caso não tenho o Eclipse em seu computador, segue endereço para download:
http://www.eclipse.org/downloads/
e selecione o link Eclipse IDE for Java EE Developers. Após o término do download, descompacte em um local desejado. Ex.: C:\eclipse.
Após definir o local do Eclipse, abra-o para que possamos configurar o plugin JBOSS Tools. Com o Eclipse aberto, vá no menu: Help>Intall New Software. Clique no botão Add, na tela seguinte no campo Name: digite JBoss Tools e em Location: insira o link http://download.jboss.org/jboostools/updates/stable/galileo. Prossiga até baixar e instalar o plugin. Ao término, reinicie o Eclipse para continuarmos.
Vamos agora fazer o download do RichFaces, segue endereço: http://www.jboss.org/richfaces/download/stable. A versão que será utilizada é a RichFaces 3.3.3. Contudo, as versões mais recentes podem ser usadas sem problema, desde que seja compatível com o framework JSF 1.2.
Bibliotecas do RichFaces
Ao término do download, descompacte o arquivo zip em seu computador, como padrão, descompactei o meu em C:\. Após escolhido o local, entre no diretório lib e veja se há os seguintes arquivos:
- richfaces-api-3.3.3.Final
- richfaces-impl-3.3.3.Final
- richfaces-impl-jsf2-3.3.3.Final
- richfaces-ui-3.3.3.Final
Vamos agora começar a criação do nosso projeto. Com o Eclipse aberto, vá em File>New>Project. Na caixa que surgir, vá até JBoss Tools Web>JSF>JSF Project e clique no botão Next.
Na etapa seguinte, digite um nome para o projeto em: Project Name. Feito, clique em Next.
Na terceira parte, será onde iremos definir em qual servidor será executado. No nosso caso, iremos utilizar o JBOSS, caso ele não apareça na Runtime clique no botão New para carregá-lo.
Importando as Bibliotecas
Agora iremos importar as bibliotecas RichFaces. Com o botão direito do mouse, clique sobre o diretório lib que encontra-se dentro do diretório WEB-INF e selecione a opção import.
Na próxima caixa de diálogo que surgir, General>File System e clique em Next.
A seguir, clique no botão Browse e selecione o local onde está localizado as bibliotecas RichFaces. Selecione todas as bibliotecas que listamos acima.
Vamos agora configurar o RichFaces no deployment descriptor
No arquivo web.xml vamos fazer as configurações necessárias para ter suporte ao RichFaces.
<?xml version="1.0"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name>WebAut</display-name> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param> <context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param> <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <!-- Faces Servlet --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Faces Servlet Mapping --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
Agora, vamos criar uma página com o nome index.jsp da raiz do diretório web. Caso não saiba como inserir um arquico JSP, vá até o diretório WebContent e clique com o botão direito do mouse, em seguida clique em New>JSP File, conforme figura abaixo:
Edite este página para que fique da seguinte forma:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head></head> <body> <jsp:forward page="/paginas/inicial.jsf" /> </body> </html>
Agora crie um diretório chamado páginas na raiz do diretório Web e dentro dele um arquivo JSP com o nome inicial.jsp. Dentro deste arquivo insira o seguinte conteúdo:
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <html> <f:view> <head> <title></title> </head> <body> <div style="width: 300px;"> <h:form id="formExemplo"> <rich:panel header="Painel Administrativo"> Coisas que somente administradores podem ver! </rich:panel> <rich:spacer height="20"/> <rich:panel header="Painel Comum"> Coisas que qualquer usuário pode ver! </rich:panel> </h:form> </div> </body> </f:view> </html>
Neste momento o projeto deve estar da seguinte forma:
Agora vamos testar o que fizemos até o momento, é nesse ponto que podemos testar se tudo está correto.
Para isso, exporte o projeto com um arquivo war e salve-o no diretório deploy do servidor (JBOSS), conforme abaixo:
Inicialize o servidor através da opção Servers do Eclipse:
Ou se preferir, pode executar o servidor indo até o diretório onde encontra-se o JBOSS e acesse o arquivo run.bat que encontra-se dentro de bin.
Com o servidor iniciado, acesse http://localhost:8080/WebAut/. Verifique se o resultado obtido é conforme o apresentado abaixo:
Se tudo estiver OK, maravilha. Agora vamos implementar o que fizemos até agora. Para isso, vamos precisar de uma banco de dados, neste exemplo iremos trabalhar com o MySQL.
Implementando do Banco de Dados
Crie uma base de dados chamada “credencial” conforme estrutura a seguir:
create table users ( user_name varchar(15) not null primary key, user_pass varchar(15) not null ); create table user_roles ( user_name varchar(15) not null, role_name varchar(15) not null, primary key (user_name, role_name) );
Insira os seguintes valores:
insert into users (user_name, user_pass) values ('chuck', 'norris'); insert into users (user_name, user_pass) values ('bond', 'james'); insert into user_roles (user_name, role_name) values ('chuck', 'MASTER'); insert into user_roles (user_name, role_name) values ('bond', 'COMMON');
Agora é necessário efetuar algumas configurações no JBOSS, para isso, pare de executar o servidor.
Então abra o wordpad salve-o com o nome webaut-ds.xml dentro do diretório deploy do JBOSS (C:/JBOSS/server/default/deploy). Há duas coisas que deve-se atentar, primeiro, o sufixo -ds é obrigatório, segundo, o conteúdo apresentado abaixo deverá ser alterado conforme os dados de sua conexão.
<datasources> <local-tx-datasource> <jndi-name>WebAutDS</jndi-name> <connection-url>jdbc:mysql://localhost:3306/credencial</connection-url> <driver-class>com.mysql.jdbc.Driver</driver-class> <user-name>root</user-name> <password>mysql</password> <metadata> <type-mapping>mySQL</type-mapping> </metadata> </local-tx-datasource> </datasources>
Esta é a configuração é o datasource da aplicação, sendo usada pelo módulo que fará a autenticação de usuário.
Seguindo, localize o arquivo login-config.xml dentro do diretório conf do JBOSS (C:/JBOSS/server/default/conf) e adicione a ele o seguinte código:
<application-policy name = "WebAutRealm"> <authentication> <login-module code = "org.jboss.security.auth.spi.DatabaseServerLoginModule" flag = "required"> <module-option name = "dsJndiName">java:/WebAutDS</module-option> <module-option name = "principalsQuery">select user_pass from users where user_name=?</module-option> <module-option name = "rolesQuery">select role_name, 'Roles' from user_roles where user_name=?</module-option> </login-module> </authentication> </application-policy>
Esta configuração é responsável por autenticar os usuários da aplicação. Isto é feito através da móduto do datasource que foi criado anteriormente, assim, ele permite a conexão com o banco de dados e realiza as consultas das credenciais com os SQL’s informadas. Logo, a configuração será referenciada na aplicação através do seu nome (WebAutRealm) através das configurações que serão feitas a seguir.
Antes de continuarmos, será necessário copiar um driver JDBC para o MySQL no diretório lib do JBOSS (C:/JBOSS/server/default/lib). Caso não possua o driver, segue link para download: http://dev.mysql.com/downloads/connector/j/
Prosseguindo….
Vamos criar um arquivo jboss-web.xml dentro do diretório WEB-INF e configure-o da seguinte forma:
<?xml version="1.0" encoding="UTF-8"?> <jboss-web> <security-domain>java:/jaas/WebAutRealm</security-domain> </jboss-web>
Repare que nesse ponto estamos utilizando o JNDI da configuração que criamos a pouco.
Agora, abra p web.xml para que possamos fazer as últimas alterações.
- Neste primeiro ponto identifico quais recursos estarão protegidos e quais recuros estarão disponíveis para cada perfil. Neste caso, estou informnando que todo o conteúdo (/*) está seguro, e que os perfis MASTER e COMMON terão acesso:
<security-constraint> <web-resource-collection> <web-resource-name>Area Restrita</web-resource-name> <url-pattern>/*</url-pattern> <http-method>POST</http-method> <http-method>GET</http-method> </web-resource-collection> <auth-constraint> <role-name>MASTER</role-name> <role-name>COMMON</role-name> </auth-constraint> </security-constraint>
- Agora iremos informar que o método de login será através de um formulário web:
<!-- METODO DE LOGIN PARA VALIDACAO DE ACESSO --> <login-config> <auth-method>FORM</auth-method> <form-login-config> <form-login-page>/login.jsp</form-login-page> <form-error-page>/login.jsp</form-error-page> </form-login-config> </login-config>
- Aqui informaremos os perfis de acesso:
<!-- ROLES --> <security-role> <role-name>MASTER</role-name> </security-role> <security-role> <role-name>COMMON</role-name> </security-role>
Crie um arquivo login.jsp no diretório Web, e insira o seguinte código:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form method="post" action="j_security_check"> <fieldset> <legend>Login</legend> <p> <label for="form-login">Login:</label> <input type="text" name="j_username" id="form-login" /> </p> <p> <label for="form-senha">Senha:</label> <input type="password" name="j_password" id="form-senha" /> </p> <p> <input type="submit" value="Enviar" /> </p> </fieldset> </form> </body> </html>
Para finalizar, altere a página inicial.jsp inserindo as seguintes informações:
<h:form id="formExemplo"> <rich:panel header="Painel Administrativo" rendered="#{rich:isUserInRole('MASTER')}"> Coisas que somente administradores podem ver! </rich:panel> <rich:spacer height="20"/> <rich:panel header="Painel Comum" rendered="#{rich:isUserInRole('MASTER, COMMON')}"> Coisas que qualquer usuário pode ver! </rich:panel> </h:form> <pre>
Este é o ponto em que será feita a verificação se o usuário possui a permissão requerida, onde o “rendered” na tag indica se deve ou não ser apresentada. E o rich:isUserInRole verifica se o usuário logado possui a autorização requerida. Assim, o conteúdo somente será apresentado se o usuário tiver autorização para tal requisição.
Neste momento, seu projeto deve apresentar a seguinte característica:
Tudo OK, então gere o war novamente da aplicação, conforme feito anteriormente. Apague os diretórios work e temp que no diretório default do JBOSS (C:\JBOSS\server\default).
Então inicie o servidor, quando ele já estiver startado, acesse a aplicação e verifique se a tela abaixo irá aparecer:
Assim, para o chuck norris deverá aparecer a seguinte tela:
Depois, reinicie o servidor e entre com o login james bond:
E veja se a tela abaixo será apresentada:
Bom galera, no momento é isso ai. Espero que tenha ajudado vocês.
Arquivo em Desenvolvimento
[…] This post was mentioned on Twitter by Max Katz, Bruno Gualda. Bruno Gualda said: Visitem: http://brunogualda.com.br/?p=33. #JBoss #richFaces […]
Muito bom o post!
Parabéns pelo blog.
Grande Brunão, o post está muito bom cara, já até explicou como fazer login, tá ficando ninja!! 😉
Deus abençoe, e posta mais post ai pra gente ir aprendendo também, hehe!!
Vlw Bruno, me ajudou bastante,
grande abraço.
Opa, sempre as ordens.
Fala Bruno, primeiramente parabéns pelos artigo!
No segundo ponto, gostaria de saber o que é esta action=”j_security_check” que colocou na página login.jsp?
Seguir conforme explica e tudo ok! Contudo, o botão submit na página login não remete a nenhuma ação, ou seja, não manda para a página inicial.jsp.
Pode me explicar melhor?!?!
No mais, valeu!
Olá Renan,
Peço desculpas pela demora em responder sua questão, mas feriadão, sabe como é :). Mas sem delongas, vou tentar
explicar a finalidade do action=”j_security_check” na página de login.
Pense da seguinte forma, se o usuário tentar entrar com a url de login direto no
browser, ele conseguirá acessar. Assim, para que não tenhamos que ficar fazendo
validação manual cria-se o que chamamos de “form-based login”, ou seja, você pode
modificar a aplicação para que ela tenha uma única página de login e um “form”
específico.
NOTA: A FORMATAÇÃO DA PÁGINA PODE SER A SEU MODO, MAS O “J_SECURITY_CHECK,
J_USERNAME E J_PASSWORD” TEM NOMES LIMITADOS E DEFINIDOS PELO PADRÃO DO J2EE.
Seguindo essa formatação, sempre que o acesso for tentado, será necessário efetuar
login para acessar o sistema. Onde o action=”j_security_check” será substituído
pelo JBOSS ou outro que siga o padrão do J2EE.
Por fim, quanto ao botão submit, peço que revise, pois quando efetuei os testes
ele fazia a checagem das informações conforme descrito no início do post, onde
verificava as informações contidas no banco de dados.
Espero ter ajudado, qualquer coisa é só chamar.