.png)
Introducción Aprender a permitir que las personas muestren u oculten el contenido de un campo de contraseña mejora la usabilidad y la accesibilidad. Es clave para quienes necesitan ver lo que escriben y para mitigar shoulder surfing en espacios compartidos. En lugar de usar casillas de verificación, un patrón moderno es un botón con un icono de ojo que alterna el estado del campo.
Ejemplo básico en ASP.NET Core En Razor Pages puedes colocar un input de tipo password, seguido de un botón con un icono de ojo. Con JavaScript, al hacer clic cambias dinámicamente el tipo del input entre password y text, actualizas atributos de accesibilidad como aria-label y aria-pressed, y alternas las clases del icono entre bi-eye y bi-eye-slash. La maquetación puede apoyarse en una input-group de Bootstrap para alinear el botón. En producción, coloca los estilos y scripts en archivos separados para mantener el código limpio.
Pasos rápidos - Crea un input de contraseña con un id único. - Añade un botón adyacente con un icono de ojo. - Enlaza un manejador de clic que cambie el tipo del input entre password y text. - Actualiza aria-pressed y aria-label para lectores de pantalla. - Alterna las clases del icono para reflejar el estado visible u oculto. - Usa delegación de eventos para soportar inputs dinámicos.
Ejemplo con opciones mediante plugin Si buscas más configuración, el plugin Bootstrap Show Password ofrece opciones útiles: - Ubicación del botón antes o después del input. - Tamaño del botón sm o lg. - Mensaje para input vacío. - Clase personalizada para el icono. - Eventos y métodos como show.bs.password y hide.bs.password que puedes registrar para trazar un registro de actividad en un panel en lugar de usar alertas. También conviene deshabilitar el botón de ojo si el input está inhabilitado para evitar confusiones.
Modelo y capa de página para demo En una demostración con Razor Pages puedes emplear un record con varias propiedades de contraseña y un PageModel que inicializa valores en OnGet y los procesa en OnPost. Esto sirve solo como ejemplo educativo para probar el interfaz de alternancia y el registro de eventos, no para gestionar credenciales reales.
Buenas prácticas de seguridad y accesibilidad - No guardes contraseñas en texto plano ni las escribas en logs. - Emplea HTTPS, protección contra ataques de fuerza bruta y políticas de bloqueo tras intentos fallidos. - Evalúa una política de Content Security Policy y auditorías de ciberseguridad periódicas. - Considera desactivar autocompletar si tu caso de uso lo requiere. - Revisa accesibilidad: foco claro, etiquetas visibles, descripciones mediante aria, y contraste adecuado.
Cómo puede ayudarte Q2BSTUDIO En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida que integra usabilidad, seguridad y rendimiento desde el diseño. Además de construir formularios de autenticación robustos, diseñamos experiencias completas con software a medida y aplicaciones a medida, incorporando inteligencia artificial para validaciones inteligentes, detección de fraude y agentes IA que mejoran la experiencia de usuario. Podemos desplegar soluciones seguras en servicios cloud aws y azure, y conectar tu capa analítica con servicios inteligencia de negocio y power bi. Descubre nuestro enfoque integral en desarrollo de aplicaciones y software a medida y refuerza tus sistemas con nuestras prácticas de ciberseguridad y pentesting. También ofrecemos ia para empresas y automatización de procesos para acelerar tu time to value.
Conclusión Tienes dos enfoques para mostrar u ocultar contraseñas en ASP.NET Core: una implementación ligera con JavaScript nativo y una alternativa con plugin que añade opciones de configuración y eventos. Elige el que mejor se adapte a tu base de código, aplica estilos coherentes con tu tema, y no olvides alinear la solución con tus políticas de ciberseguridad.
