Login con Java Server Faces

PUBLICADO EL 28 DE JULIO DEL 2008

MODIFICADO EL 28 DE SEPTIEMBRE DEL 2008

INTRODUCCIÓN

Hoy inicio una serie de tutoriales para trabajar con JSF y mostraré lo sencillo que resulta trabajar con esta relativamente reciente tecnología de SUN, y espero que los lectores puedan encontrarle el gusto a Java Server Faces y vean por si mismos el por que yo en lo personal prefiero JSF a otras tecnologías como ASP .NET y a ese otro lenguaje que no recuerdo su nombre…. ah si! ya recorde! PHP!

En este primer ejemplo será hacer un sencillo formulario de lógin con Java Server Faces y verémos los sencillo que resulta trabajar con el Visual Web Pack de NetBeans.

HERRAMIENTAS:

1. NetBeans 6.1 con el plugin para Visual Web Pack
2. Servidor de Aplicaciones GlassFish
3. MySQL 5.0
4. Aqua Data Studio 6.5

DESARROLLO

Si se usa la versión 6.1 de NetBeans, ya se trae por default el plugin para trabajar con Visual Web Pack, en caso contrario, tendràs que descargarlo desde el menú Tools-plugins.

Primero creamos una tabla como la indicada por el Diagrama E-R

donde los campos indican: id de usuario AUTO_INCREMENT, A. Paterno, A. Materno, Nombre, Nombre de usuario o nick,  Contraseña, Correo y los ultimos 4 campos son campos AUDITORES.

Una vez que tenemos lista la tabla en la BD, regresamos a NetBeans y crearemos un nuevo proyecto que será una Web Application, y  seleccionamos el servidor de aplicaciones que trabaja por defecto NetBeans, GlassFish!. y a la hora de seleccionar los Frameworks, escogeremos Visual Web Java Server Faces.

Hecho esto, tendrémos una página lista para arrastrar los componentes visuales de JSF y comenzar a diseñar!

Después proseguimos a realizar un pequeño formulario como el mostrado en la imàgen de abajo. Insertamos un Layout Panel y en su propiedad PanelLayout seleccionamos Grid Layout. Y dentro de este panel colocaremos la caja de texto del user y el Pasword Field para la contraseña junto con un botón.

Además y fuera del Layout Panel, colocaremos un Group Message! (Observesé que también existe otro Layout Panel de color verde más obscuro que contiene a los demás componentes). Seleccionamos el Group Message y en su propiedad Title ponemos “ERROR DE AUTENTICACIÓN”.

Es de suponerse que necesitamos una pequeña tabla donde esten nuestros usuarios con sus respectivas claves encriptadas! Para ello y en MySQL disponemos de varias funciones, entre las más recomendadas esta  AES_ENCRYPT.

Una vez que ya se tiene la BD, regresamos a NetBeans y en la pestaña de Services realizamos la conexión a la Base de Datos dando click derecho en Data Bases y seleccionando New Connection… En caso de no tener el driver de MySQL ya instalado, deberemos entonces dar click derecho sobre la carpeta de drivers y seleccionar New Driver…

Si ya tenemos todo listo, podemos dar click derecho sobre nuestra conexión y seleccionar Connection. Después ya podremos navegar sobre las distintas tablas que tengamos. Entonces pues, seleccionaremos nuestra tabla de usuarios y arrastramos al “Page1″.

Con esto se insertará en el SessionBean1 un RowSet y en el Page1 un DataProvider. El RowSet es el encargado se obtener los datos, ejecutar las sentencias SQL, y el DataProvider es algo así como un Puntero al RowSet y generalmente este último es el que usaremos para insertar y obtener valores.

Seleccionamos el RowSet creado en el SessionBean1 y damos click derecho para seleccionar Edit SQL Statement. Ahi modificaremos nuestra consulta SQL para traer únicamente los campos que necesitamos, que son usuario y password. En mi caso, como las contraseñas estan encriptadas, la sentencia SQL queda algo así:

SELECT ALL tacusu.`USU_CNOM`, AES_DECRYPT(USU_CPAS,’abc123′) as USU_CPAS
FROM tacusu

donde ‘abc123′ es la clave para desencriptar la contraseña que fué encriptada con esa misma clave. Guardamos los cambios y listo. Ah y para insertar la contraseña encriptada es algo asi:

INSERT INTO tacusu
VALUES(‘windoctor’, AES_ENCRYPT(‘aqui_contraseña’,'aqui_clave_secreta’));

Ahora seleccionamos la caja de texto, click derecho y escogemos “Add binding Attribute” para que podamos hacer referencia a él dentro del código. Hacemos esto mismo para el Password Field y el Botón. Además podemos cambiar su nombre con el cual harémos referencia en el mismo código, cambiando la propiedad id.

Seleccionamos el boton y dando doble click sobre el, pasaremos a la vista de código en donde se habrá creado un método “action”. Ahi pondrémos el código mostrado en la figura de abajo.

Observese que tenemos:this.getSessionBean1().setMensaje(“Bienvenido ” + user);

Con esto, estamos pasando dicho mensaje a la sesión del usuario y esto nos permitirá conservar esos valores a lo largo de la estancia del usuario en nuestra página.

Como se observa, dicho método retorna un valor “null” en el caso de que row sea igual a null, en caso contrario retorna un “index”. Esto es por que dentro del archivo faces-config.xml ubicado en la carpeta de WEB-INF tenemos las dichosas “reglas de navegación” que nos permiten indicar el flujo de direcciones entre las páginas de nuestra aplicación. Entonces, vamos a ese archivo y veremos que NetBeans nos provee de una bonita vista de gráfica. Aquí únicamente debemos expandir al Page1.jsp y veremos que tendrémos ahi el botón que insertamos, seleccionamos dicha área y arrastrando el mouse hacia la página index.jsp (se me paso decirles antes que crearan una nueva “Visual Web JSF Page” con el nombre de index, así que agreguenla). Con esto, veremos que se ha trazado una línea con una flecha apuntando de Page a index, veremos que tiene un nombre de “case1″.. del lado izquierdo en la propiedad outcome cambiaremos este nombre por “index” que fué el que pusimos en el código. Esta es nuestra regla de navegación. Cuando nuestro usuario de click al boton iremos al index.jsp pero si el usuario es incorrecto el método action nos retornará un null por lo cual nos quedaremos en la misma página. Guardamos los cambios y cerramos faces-config.

Ahora vamos al SessionBean1 y ahi declaramos una variable String como esta:

private String mensaje;

Luego, dando un click derecho ahi mismo en la ventana de código seleccionamos Refactor–Encapsulate Fields, e indicamos que deseamos crear sus métodos get y set de la variable mensaje.

Con esto se crearán dichos métodos. Ahora volvemos a la página index.jsp e insertamos un Static Text y cambiamos el tamaño y color de letra alterando la propiedad style. Seleccionamos el Static Text y damos click derecho, seleccionamos Property Bindings, y en la ventana que se nos abre. establecemos los valores indicados por la siguiente figura y damos click al botón de apply y cerramos la ventana.

Finalmente con esto tendrémos nuestra aplicación funcionando! Al inicio, cuando queramos ejecutar la aplicación, tardará alrededor de 1 minuto y fracción pues primero se iniciará el servidor de aplicaciones glassfish.

SI ESTA INFORMACIÓN TE FUÉ ÚTIL, TÓMATE LA MOLESTIA DE DEJAR UN COMENTARIO, QUEJA O SUGERENCIA, AL MENOS PARA SABER QUE LO QUE ESCRIBO LE ES ÚTIL A ALGUIEN Y ASÍ SEGUIR ESCRIBIENDO MÁS TUTORIALES.

Saludos!!