LoginTest

Para poder realizar este ejecicio debes de tener las siguientes requerimientos:

Primero cremos una tabla en mysql llamada usuario para poder ingresar nuestro login y password

  CREATE TABLE `usuario` (
  `idUsuario` INT NOT NULL AUTO_INCREMENT,
  `nombreUsuario` VARCHAR(100) NOT NULL,
  `password` VARCHAR(30) NOT NULL,
  PRIMARY KEY (`idUsuario`))
ENGINE = MyISAM
DEFAULT CHARACTER SET = utf8;
  
  

Una vez instalados maven,eclipse y tomcat comenzamos con configurar maven en eclipse nos vamos al menú que dice Window->Preferences;

Login Test

Destendemos donde dice Maven y seleccionamos Installations y agregamos la ruta donde se encuentra nuestra instalación de maven y presionamos Apply

Login Test

Una vez configurado maven nos vamos a File->New->MavenProject

Login Test

Seleccionamos en Create a simple project y presionamos Next

Login Test
LLenamos los siguientes campos: Presionamos Finish
Login Test

Una vez generado nuestro proyecto maven nos vamos al archivo pom.xml y pegamos el siguiente código esta para poder compilar con java 1.8.

   <build>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
           <source>1.8</source>
           <target>1.8</target>
        </configuration>
      </plugin> 
    </plugins>
   </build>

  
Ahora vemos que tenemos un problema nos vamos a nuestro proyecto y le damos clic derecho donde dice Maven->Update Project..
Login Test
Posteriormente seleccionamos ok
Login Test
Nos marcara un error que no encuentra el archivo web.xml pero lo solucionaremos de la siguiente manera, hacemos clic derecho en el proyecto y selecionamos Properties
Login Test
Selecionamos Project Facets en el recuadro seleccionamos Dynamic Web Module 3.1 y Java Server Faces 2.2 y presionamos Further configuration available... Login Test
Posteriormente selecionamos Disable Library Configuration esto nos dice que no disponemos de la librería necesaria pero posteriormente la proporcionaremos agregando la dependencia en el pom.xml luego presionamos OK
Login Test
Posteriormente presionamos Apply y luego OK
Login Test
Ahora agregamos todas las dependencias y como quedaría nuestro archivo pom.xml
   <project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.tutosoftware</groupId>
  <artifactId>LoginTest</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>LoginTest</name>
  
  <dependencies>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.10</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.10</version>
		</dependency>

		<!-- http://repo1.maven.org/maven -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>com.sun.el</groupId>
			<artifactId>el-ri</artifactId>
			<version>1.0</version>
		</dependency>
		<dependency>
			<groupId>javax</groupId>
			<artifactId>javaee-web-api</artifactId>
			<version>7.0</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.34</version>
		</dependency>
	</dependencies>
  
  <build>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
           <source>1.8</source>
           <target>1.8</target>
        </configuration>
      </plugin> 
    </plugins>
   </build>
  
  
   
</project>
   
   
    
A nuestro archivo que se encuentra en el directorio src/main/webapp/WEB-INF/web.xml hay que hacerle unos cambios ya que lo que se generó fue 2.5 pero en realidad estamos desarrollando es la versión 3.1 ya que este es el descriptor de despliegue de java server faces quedando de la siguiente forma:
  <?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>
  
 
En el archivo faces-config.xml escribimos el siguiente código
  <?xml version="1.0" encoding="UTF-8"?>
<faces-config
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">
    
    
    <navigation-rule>
		<from-view-id>/index.xhtml</from-view-id>
		<navigation-case>
			<from-outcome>welcome</from-outcome>
			<to-view-id>/welcome.xhtml</to-view-id>
		</navigation-case>
	</navigation-rule>
    
    
    
    
    
    
  <application>
    <resource-bundle>
       <base-name>com.tutosoftware.logintest.mensajes</base-name>
       <var>bundle</var>
     </resource-bundle>
  </application>  
    
    
    
    
    
    

</faces-config>
  
  
  
  
  
En src/main/webapp/WEB-INF hacemos clic derecho y seleccionamos New->Folder
Login Test
creamos una carpeta llamada templatesy presionamos Finish
Login Test
Ahora en src/main/webapp/WEB-INF/templates/ hacemos clic derecho y seleccionamos New->XHTML Page Nota:Para que aparezca como este ejemplo hay que instalar el plugin de JBoss Tool
Login Test
Lo nombramos simple.xhtml y presionamos Finish
Login Test
En simple.xhtml Escribimos el siguiente código
  <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">

<h:head>
<title><ui:insert name="title">#{bundle['application.defaultpage.titulo']}</ui:insert></title>
<link href="#{request.contextPath}/css/simple.css" rel="stylesheet" type="text/css" />
</h:head>

<h:body>
  <div id="container">
      <div id="header">
      <ui:insert name="header">
      <h1>#{bundle['application.defaultpage.header.contenido']}</h1>
      </ui:insert>
</div>
<div id="content">
      <ui:insert name="content">
       #{bundle['application.defaultpage.body.contenido']}
     </ui:insert>
</div>
<div id="footer">
      <ui:insert name="footer">
      #{bundle['application.defaultpage.footer.contenido']}
     </ui:insert>
</div>
      
       
  </div>

</h:body>

</html>
  
Sobre el directorio src/main/resources creamos las carpetas com/tutosoftware/logintest sucesivamente y en src/main/resources/com/tutosoftware/logintest hacemos clic derecho y selecionamos New->Other..
Login Test
Destendemos JBoss Tools Web y selecionamos Properties File y presionamos Next
Login Test
Lo nombramos mensajes y presionamos Finish esto nos quedaría como mensajes.properties
Login Test
En mensajes.properties escribimos lo siguiente:
 
user.name = Usuario
user.password = password
user.name.validation = Ingresar usuario
user.password.validation = Ingresar password
application.login = Login
application.loginpage.title = Login page
application.welcome = Bienvenido
application.welcomepage.titulo = Página de bienvenida
application.defaultpage.titulo = Login Test
application.defaultpage.header.contenido = Bienvenido a Login Test
application.defaultpage.body.contenido = Su contenido aquí
application.defaultpage.footer.contenido = Gracias por usar la aplicación
   
   
  
En el directorio src/main/webapp creamos la carpeta css dentro de css hacemos clic derecho y selecionamos New->Other y posteriormente destendemos Web seleccionamos CSS File y presionamos next
Login Test
Lo nombramos simple.css y presionamos Finish
Login Test
Escribimos el siguiente código
  @CHARSET "ISO-8859-1";
h1, p, body, html {
margin:0;
padding:0;
}
body {
background-color:#EEEEEE;
}
#container {
width:100%;
}
#header {
background-color:#FFA500;
}
#header h1 {
margin-bottom: 0px;
}
#content {
float:left;
width:100%;
}
#footer {
clear:both; /*No floating elements are allowed on left or right*/
background-color:#FFA500;
text-align:center;
font-weight: bold;
}
.errorMessage {
color: red;
}
   
   
En src/main/webapp creamos el archivo index.xhtml y escribmos el siguiente código
 
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

	<ui:composition template="/WEB-INF/templates/simple.xhtml">
	  <ui:define name="title">
	  #{bundle['application.loginpage.title']}
	  </ui:define>
	  <ui:define name="content">
	  <h:form>
	     <h:panelGrid columns="3">
	     <h:outputText value="#{bundle['user.name']}" />
	     <h:inputText 
	     id="nombreUsuario"
	     value="#{login.usuario}" 
	     required="true" 
	     requiredMessage="#{bundle['user.name.validation']}" />
	     <h:message for="nombreUsuario"  styleClass="errorMessage"/>
	     
	     
	     <h:outputText value="#{bundle['user.password']}" />
	     <h:inputSecret 
	     id="password"
	     value="#{login.password}" 
	     required="true" 
	     requiredMessage="#{bundle['user.password.validation']}" />
	     <h:message for="password"  styleClass="errorMessage"/>
	     </h:panelGrid>
	     <h:commandButton action="#{login.validarUsuarioPassword}" value="#{bundle['application.login']}" />
	     <br/><br/>
	  </h:form>
	  
	  </ui:define>
	 
	 
	</ui:composition>
</html>
  
   
Ahora nos pasamos al directorio Java Resources y en src/main/java hacemos clic derecho seleccionamos New->Package
Login Test
Creamos el paquete com.tutosoftware.logintest.beans y presionamos Finish
Login Test
Sobre el paquete com.tutosoftware.logintest.beans vamos a crear un bean gestionado para realizar la sesión de usuario y password hacemos clic derecho sobre dicho paquete seleccionamos New->Class Login Test
A la clase la nombramos Login y agregamos una interface Serializable y por último presionamos Finish
Login Test
Escribimos el siguiente código
 package com.tutosoftware.logintest.beans;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;

import com.tutosoftware.logintest.dao.LoginDAO;
import com.tutosoftware.logintest.util.SessionUtils;





@ManagedBean
@SessionScoped
public class Login implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private String password;
	private String msg;
	private String usuario;
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public String getUsuario() {
		return usuario;
	}
	public void setUsuario(String usuario) {
		this.usuario = usuario;
	}
	public String validarUsuarioPassword(){
		boolean valid = LoginDAO.validate(usuario, password);
		System.out.println(valid);
		if (valid) {
		 HttpSession session  = SessionUtils.getSession();
		 session.setAttribute("username",usuario);
		 return "welcome";
	     }else {
	    	 FacesContext.getCurrentInstance().addMessage(
						null,
						new FacesMessage(FacesMessage.SEVERITY_WARN,
								"Usuario o password incorrecto",
								"Por favor introducir password y usuario correcto"));
				return "index";
	     }
		
	}
	public String salir(){
		HttpSession session = SessionUtils.getSession();
		session.invalidate();
		return "index";
	}
	
}
 
  
   
En Java Resources src/main/java creamos el paquete com.tutosoftware.logintest.dao y creamos la clase LoginDAO.java que conectará a mysql esto es de manera un poco informal ya que para probar rapidamente así que escribimos el siguiente código
package com.tutosoftware.logintest.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.tutosoftware.logintest.util.DataConnect;



public class LoginDAO {
	public static boolean validate(String usuario, String password) {
		Connection con = null;
		PreparedStatement ps = null;

		try {
			con = DataConnect.getConnection();
			ps = con.prepareStatement("Select nombreUsuario, password from usuario where nombreUsuario = ? and password = ? ");
			ps.setString(1, usuario);
			ps.setString(2, password);

			ResultSet rs = ps.executeQuery();

			if (rs.next()) {
				return true;
			}
		} catch (SQLException ex) {
			System.out.println("Login error -->" + ex.getMessage());
			return false;
		} finally {
			DataConnect.close(con);
		}
		return false;
	}
}

  
   
Sobre Java Resources src/main/java creamos el paquete com.tutosoftware.logintest.util escribmos la clase DataConnect.java y escribimos le siguiente código
 package com.tutosoftware.logintest.util;

import java.sql.Connection;
import java.sql.DriverManager;

public class DataConnect {
	public static Connection getConnection() {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			Connection con = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/pruebadb","root","lara");
			return con;
		} catch (Exception ex) {
			System.out.println("Database.getConnection() Error -->"
					+ ex.getMessage());
			return null;
		}
	}

	public static void close(Connection con) {
		try {
			con.close();
		} catch (Exception ex) {
		}
	}

}
 
 
  
  
  
   
Sobre com.tutosoftware.logintest.util creamos la clase SessionUtils.java para manejo de sesión relacionada con el usuario y escribimos el código
  package com.tutosoftware.logintest.util;


import javax.faces.context.FacesContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;


public class SessionUtils {
	public static HttpSession getSession() {
		return (HttpSession) FacesContext.getCurrentInstance()
				.getExternalContext().getSession(false);
	}

	public static HttpServletRequest getRequest() {
		return (HttpServletRequest) FacesContext.getCurrentInstance()
				.getExternalContext().getRequest();
	}

	public static String getUserName() {
		HttpSession session = (HttpSession) FacesContext.getCurrentInstance()
				.getExternalContext().getSession(false);
		return session.getAttribute("username").toString();
	}

	public static String getUserId() {
		HttpSession session = getSession();
		if (session != null)
			return (String) session.getAttribute("userid");
		else
			return null;
	}

}
  
  
  
  
En Java Resources src/mai/java creamos el paquete com.tutosoftware.logintest.filtro y creamos una clase llamada AuthorizationFilter.javaaquí obtenemos una sesión para cada usuario conectado a través del método getUserId asociando un identificador de sesión con un ID de usuario en particular y escribimos el siguiente código.
 package com.tutosoftware.logintest.filtro;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@WebFilter(filterName = "AuthFilter", urlPatterns = { "*.xhtml" })
public class AuthorizationFilter implements Filter {

	@Override
	public void destroy() {
		// TODO Auto-generated method stub

	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		// TODO Auto-generated method stub
		try {

			HttpServletRequest reqt = (HttpServletRequest) request;
			HttpServletResponse resp = (HttpServletResponse) response;
			HttpSession ses = reqt.getSession(false);

			String reqURI = reqt.getRequestURI();
			if (reqURI.indexOf("/index.xhtml") >= 0
					|| (ses != null && ses.getAttribute("username") != null)
					|| reqURI.indexOf("/public/") >= 0
					|| reqURI.contains("javax.faces.resource"))
				chain.doFilter(request, response);
			else
				resp.sendRedirect(reqt.getContextPath() + "/faces/index.xhtml");
		} catch (Exception e) {
			System.out.println(e.getMessage());
		}

	}

	@Override
	public void init(FilterConfig arg0) throws ServletException {
		// TODO Auto-generated method stub

	}

}
 
 
   
En src/main/webapp creamos welcome.xhtml y escribimos le siguiente código
 <!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

	<ui:composition template="/WEB-INF/templates/simple.xhtml">
	<ui:define name="title">
	   #{bundle['application.welcomepage.titulo']}
	</ui:define>
	<ui:define name="content">
	<h:form>  
	   #{bundle['application.welcome']}, #{login.usuario}! <br/>
     <h:commandLink action="#{login.salir}" value="Salir" />
	</h:form>
	
	
	</ui:define>
	
	
	
	</ui:composition>
</html>
   
En mysql realizamos un insert para comprobar que realmente estamos conectados al sistema mediante la base de datos y iniciar sesión
  INSERT INTO pruebadb.usuario VALUES(null,'adminjsf','lara');
  
Llego el momento de conectar nuestro contenedor web tomcat a eclipse, nos vamos a la parte de abajo de eclipse seleccionamos la pestaña que dice Servers nos posicionamos en el link que dice No servers are avalaible.CLick this link to create new server... y hacemos clic.
Login Test
Destendemos la carpeta que dice Apache y selecionamos Tomcat v8.0 Server y presionamos Finish.Nota: me aparece así porque ya lo había instalado anteriormente pero si es la primera vez que lo utilizas deberás meter la ruta donde tienes instalado tomcat.
Login Test
Una vez instalado tomcat a probar este pequeño ejemplo nos posicionamos sobre el proyecto y hacemos clic derecho y seleccionamos Run As->Run on Server y volar se ha dicho.En la siguiente pantalla presionar Finish
Login Test
En la ruta donde aparece se ve de la siguiente manera http://localhost:8080/LoginTest/faces/index.xhtml abrimos nuestro explorador de preferencia y esto es lo que aparece:
Login Test
Primero probamos sin meter ningún dato.Lo que se muestra en pantalla es la primera validación que es ingresar usuario y password
Login Test
Luego metemos un usuario incorrecto y una contraseña no valida.nos aparece Usuario o pasword incorrecto porque valida en base de datos. Login Test
Ahora metemos un usuario correcto y password correcto, nos direcciona a welcome.xhtml donde nos genera una sesión y nos aparece un evento con un link que dice salir este nos direcciona a index.xhtml y termina sesión. Login Test
Conclusión:Este ejemplo se hizo con imagenes para que te vayas guiando como se realizó lo importante de este ejemplo es el manejo de jsf la plantilla que se utilizó en simple.xhtml y manejo de sesiones fue algo extra. dejo los siguientes links de donde nos basamos para realizar este ejemplo:
A partir de los siguientes ejemplos de jsf nada mas se pondrá el código este ejemplo fue pensado en la gente que apenas empieza a adentrarse en el mundo jsf o java y eclipse.
descargar código
Hay que importar el proyecto a eclipse y no olvidar que se esta realizado en java 1.8. Como importar un proyecto a eclipse