[Tutotorial] PasswordStrenght, indícale al usuario que tal fuerte es su password
 | El control PasswordStregth nos permite atachar a un textbox la funcionalidad de indicarle al usuario el grado de “fortaleza” de la password que está ingresando, bueno, ya saben, para indicarle que la contraseña “asdasd” o “123” no es la mejor elección (aunque sean de las más repetidas). El mensaje al usuario puede ser en forma de texto o una barra de progreso, la posición también se la podemos indicar declarativamente, esta mensaje aparece mientras el usuario va escribiendo su password y desaparece cuando se pierde el foco del textbox en donde está escribiendo. |
El mensaje al usuario puede ser en forma de texto o una barra de progreso, la posición también se la podemos indicar declarativamente, esta mensaje aparece mientras el usuario va escribiendo su password y desaparece cuando se pierde el foco del textbox en donde está escribiendo
Las propiedades mas importantes que tenemos que tener en cuenta:
- TargetControlID : Es el ID del TextBox al que vamos a atachar el control
- DisplayPosition: La posición en donde va a quedar el control respecto al textbox,
- StrengthIndicatorType: El t.ipo de indicador de “fortaleza” (Texto o Indicador como Barra)
- PreferredPasswordLength: El largo preferido de la password
- PrefixText: El texto que va antes de la descripción cuando StrengthIndicatorType= Text , por ejemplo : “Complejidad:”
- MinimumNumericCharacters: La cantidad mínima de caracteres numéricos en la Password
- MinimumSymbolCharacters: La cantidad mínima de caracteres símbolos (% $*)
-
RequiresUpperAndLowerCaseCharacters: Especifica la password debe contener mayúsculas y minúsculas.
- MinimumUpperCaseCharacters: Solo tiene efecto si RequiresUpperAndLowerCaseCharacters esta activado, y especifica la cantidad
-
TextStrengthDescriptions : Lista de valores que corresponden a las descripciones de la complejidad de la password ,separamos por punto y coma, siempre y cuando esté seteado StrengthIndicatorType=Text, el mínimo de valores es dos y el máximo es 10, se ordena de menor a mayor complejidad.
Ej:"Muy Simple;Simple;Aceptable;Fuerte;Excelente!"
-
TextStrengthDescriptionStyles: Sirve para seatear los estilos de cada valor de la lista de indicadores de TextStrengthDescriptions, e igualmente es una lista separada por punta y coma
-
CalculationWeightings: Lista separada por puntos y coma, de valores numéricos utilizados para determinar la ponderación de las características que hacen más fuerte la password. Deben existir 4 valores especificados, y la suma de estos valores debe ser 100. La ponderación predeterminada es 50;15;15;20. Esto corresponde a que el criterio de longitud de la contraseña corresponde a un 50% del calculo, el criterio numérico corresponde a un 15% del calculo, el criterio sobre mayúsculas y minúsculas al 15% del calculo, el criterio de caracteres símbolos a un 20% del calculo ,por lo que es el formato 'A; B; C; D' donde A = ponderación largo password, B = ponderación de caracteres numéricos, C = ponderación de mayúsculas y minúsculas, D = ponderación de caracteres símbolo.
El ejemplo, de una vez por todas!
1) Primero que nada (o antes que todo) vamos a tener un formulario con el clásico “Ingrese su Password” , el textbox, y agregamos el control presionando Add Extender…
2) Luego seleccionamos PasswordStrength (obvio no?)
3) Configuramos las opciones, es mucho más cómodo por código declarativo, según mi opinión.
<cc1:PasswordStrength ID="tx_pass_PasswordStrength" runat="server"
TargetControlID="tx_pass"
DisplayPosition="RightSide" StrengthIndicatorType="Text" PreferredPasswordLength="10" PrefixText="Complejidad:" TextCssClass="TextIndicator_TextBox1" MinimumNumericCharacters="1" MinimumSymbolCharacters="1" RequiresUpperAndLowerCaseCharacters="false" TextStrengthDescriptions="Muy Simple;Simple;Bien;Fuerte;Excelente"
TextStrengthDescriptionStyles="MuySimple;Simple;Bien;Fuerte;Excelente" CalculationWeightings="50;15;15;20" />
Como se ve, existen CSS Asociados cada una de las descripciones, los cuales son:
<style type="text/css">
.MuySimple{color: #FF0000;}
.Simple {color: #FF6600;}
.Bien {color: #FFCC66;}
.Fuerte {color: #66CCFF;}
.Excelente{color: #00CC99;}
</style>
Ahora a probarlo, ya que esta todo ok, Te dejo un video de como funciona, el código lo puedes descargar aquí
El video:
Como siempre, espero que te sirva este artículo, nos vemos!
Gonzalo.