JSF inputSecret

JSF inputSecret es un componente del framework JavaServer Faces (JSF) que se utiliza para representar campos de contraseña. Se utiliza para crear un campo de entrada de texto donde el texto ingresado por el usuario está oculto o enmascarado de forma predeterminada para proporcionar una capa adicional de seguridad para los datos confidenciales del formulario. Al igual que otros componentes en JSF, h:inputSecret tiene varios atributos que se pueden usar para personalizar su comportamiento y apariencia, como id, value, rendered, required, maxlength.

El componente h:inputSecret se puede vincular a una propiedad de managed bean mediante el atributo value, que le permite acceder al valor del campo de contraseña en el backend. Este componente también admite validadores incorporados, que se pueden usar para verificar la validez de la contraseña ingresada por el usuario.

Cómo usar JSF inputSecret

Para crear un campo de texto de tipo password en un formulario web en JSF utilizamos la etiqueta h:inputSecret. Esta etiqueta debe estar ubicada en un <h:form> y al ser procesada la página se renderiza un <input type=”secret”> de HTML.

La etiqueta debe tener asignados al menos los atributos:

El siguiente código:

<h:form>
    <h:inputSecret id="contrasena" value="" />
</h:form>

Obtendremos el siguiente elemento HTML:

<input id="j_idt2:contrasena" type="password" name="j_idt2:contrasena" value="">

Notar que los valores de los atributos id y name tienen un prefijo aleatorio seguido del valor que asignamos a id en la etiqueta <h:inputSecret>.

Se debe asignar un id a <h:form> para que este valor sea descriptivo.

<h:form id="loginForm">
    <h:inputSecret id="contrasena" value="" />
</h:form>

Obtendremos el siguiente HTML:

<input id="loginForm:contrasena" type="password" name="loginForm:contrasena" value="">

Para poder manipular el valor del campo de texto desde el Managed Bean correspondiente, necesitamos usar una expresión para hacer referencia al atributo del Bean:

<h:inputSecret id="contrasena" value="#{exampleBean.contrasena}" />

Placeholder: JSF inputSecret y HTML5

Si queremos utilizar atributos de HTML5 que no son soportados por la etiqueta h:inputSecret debemos utilizar el namespace passthrough , para que al ser procesado por JSF no dé error:

xmlns:p="http://xmlns.jcp.org/jsf/passthrough"

Una vez hecho esto podemos usar passthrough como atributo dentro la etiqueta para agregar el placeholder como sigue:

<h:inputSecret id="contrasena" value="#{exampleBean.contrasena}" p:placeholder="Contraseña" />

O bien utilizando el namespace core:

xmlns:f="http://xmlns.jcp.org/jsf/core"

y agregar el elemento anidado <f:passThroughAttribute>:

<h:inputSecret id="contrasena" value="#{exampleBean.contrasena}" />
    <f:passThroughAttribute name="placeholder" value="Contraseña"/>
</h:inputSecret>

Controlando la visibilidad de la contraseña

Podemos simular la funcionalidad de alternar la visualización de la contraseña ingresada agregando un poco de JavaScript y CSS. Para el caso de un formulario de autenticación tendríamos el siguiente código en nuestra página:

<h:form id="loginForm">
	<h:panelGrid columns="2">
		<h:panelGroup>
			<h:outputLabel value="Nombre de Usuario: " for="nombreUsuario" />
		</h:panelGroup>
		<h:panelGroup>
			<h:inputText id="nombreUsuario" value="#{exampleBean.nombreUsuario}" />
		</h:panelGroup>
		<h:panelGroup>
			<h:outputLabel value="Contraseña: " for="contrasena" />
		</h:panelGroup>
		<h:panelGroup>
			<h:inputSecret id="contrasena" value="#{exampleBean.contrasena}" />
			<h:graphicImage id="show" library="images" name="show.jpg" width="35px" style="vertical-align:middle;" onmouseover="changeCursor(this, 'pointer');" onmouseout="changeCursor(this, 'default');" onclick="showPassword(true);" />
			<h:graphicImage id="hide" library="images" name="hide.jpg" width="35px" style="display:none;vertical-align:middle;" onmouseover="changeCursor(this, 'pointer');" onmouseout="changeCursor(this, 'default');" onclick="showPassword(false);" />
		</h:panelGroup>
	</h:panelGrid>
</h:form>

Notar que a continuación del h:inputSecret colocamos dos graphicImage que representarán el botón mostrar u ocultar según corresponda.

Debemos invocar a las siguientes funciones JavaScript exclusivamente desde los eventos de las imágenes mencionadas:

function showPassword(b) {
	if (b){
		document.getElementById('loginForm:contrasena').type = 'text';
		document.getElementById('loginForm:show').style.display = 'none';
		document.getElementById('loginForm:hide').style.display = 'inline';
	} else {
		document.getElementById('loginForm:contrasena').type = 'password';
		document.getElementById('loginForm:show').style.display = 'inline';
		document.getElementById('loginForm:hide').style.display = 'none';
	}
}

function changeCursor(obj, cursorStyle) {
	obj.style.cursor = cursorStyle;
}

La función showPassword(b) asignará al atributo type el valor ‘text‘ con lo cual el campo de contraseña pasa a ser ahora un campo de texto normal y su contenido visible.

Conclusión

Es importante tener en cuenta que h:inputSecret es solo una parte de un conjunto de componentes en JSF que trabajan juntos para crear interfaces de usuario complejas. Comprender cómo encaja este componente en la arquitectura general de JSF lo ayudará a crear aplicaciones web más efectivas y mantenibles. h:inputSecret es una herramienta que puede ayudarlo a crear campos de contraseña seguros y fáciles de usar en sus aplicaciones JSF.

Te puede interesar