[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…

image 

2) Luego seleccionamos PasswordStrength (obvio no?)

image

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.

2 comentarios en “[Tutotorial] PasswordStrenght, indícale al usuario que tal fuerte es su password”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *