Veremos um simples script em Javascript para comprovar o grau de segurança de uma senha escrita pelo usuário. Como é um script javascript do lado do cliente, permitirá mostrar o nível de segurança da senha ao mesmo tempo que o usuário a escreve em um campo de formulário.

Poderemos utilizar este script livremente em nossas páginas, de modo que ofereçamos aos visitantes uma informação sobre o segura ou insegura que é a senha que estão escolhendo, o que lhes motivará a escrever senhas mais seguras que as que habitualmente se escrevem.

Podemos ver um exemplo do objetivo buscado antes de continuar.

Em um artigo anterior do Workshop de Javascript estivemos mostrando a maneira de fazer várias funções para comprovar um string e saber se tem letras, números, maiúsculas e minúsculas. Utilizaremos estas funções agora para este script de informação de segurança da senha.

Para valorizar o grau de segurança de uma senha vamos ter em conta estas pontuações sobre diferentes conceitos:

Tem letras e números: +30%
Tem maiúsculas e minúsculas: +30%
Tem entre 4 e 5 caracteres: +10%
Tem entre 6 e 8 caracteres: +30%
Tem mais de 8 caracteres: +40%

Poderíamos ter escolhido qualquer outra pontuação para a segurança da senha, porém esta valerá. Também poderíamos ter criado outros critérios para decidir o grau de segurança. De qualquer forma para que fique claro este cálculo, ponho um par de exemplos:

A) Uma senha com números e letras, com 7 caracteres teria: 30% por letras e números + 30% por ter entre 6 e 8 caracteres = 60% de segurança.
B) Outra senha com letras maiúsculas e minúsculas, sem números, e com 8 caracteres: 30% por maiúsculas e minúsculas + 40% por mais de 8 caracteres = 70% de segurança.

Para controlar a segurança, apoiando-nos nas funções de validação alfanumérica de strings vistas anteriormente, faremos uma função como esta:

function seguranca_senha(senha){
   var seguranca = 0;
   if (senha.length!=0){
      if (tem_numeros(senha) && tem_letras(senha)){
         seguranca += 30;
      }
      if (tem_minusculas(senha) && tem_maiusculas(senha)){
         seguranca += 30;
      }
      if (senha.length >= 4 && senha.length <= 5){
         seguranca += 10;
      }else{
         if (senha.length >= 6 && senha.length <= 8){
            seguranca += 30;
         }else{
            if (senha.length > 8){
               seguranca += 40;
            }
         }
      }
   }
   return seguranca            
}   

Vamos comprovando se o string tem diversas coisas, como letras, números, maiúsculas, minúsculas, assim como sua longitude, para ir atribuindo um maior valor à segurança.

Exemplo de uso em um formulário que pede uma senha

Agora, vejamos um simples exemplo de uso da função em um formulário, que mostra a segurança de uma senha escrita pelo usuário:

O formulário poderia ser como este:

<form>
Senha: <input type="password" size=15 name="senha" onkeyup="mostra_seguranca_senha(this.value, this.form)">
<i>seguranca:</i> <input name="seguranca" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">
</form>

Como vemos, temos 1 campo INPUT de tipo PASSWORD onde escreveremos a senha. A este campo se introduziu um evento ONKEYUP que se executa quando o usuário clica uma tecla, porém no momento de soltá-la. Essa função será a encarregada de fazer com que se visualize a segurança da senha.

Ademais, colocamos outro campo de texto, para colocar o valor de segurança da senha. Este campo o forçamos a que não se possa escrever nele com o evento onfocus="blur()">. Só se poderá modificar mediante Javascript.

Vejamos a função mostra_seguranca_senha(), que é a que se encarrega de receber tanto a senha escrita como o formulário onde se encontra, para atualizar o valor de segurança.

function mostra_seguranca_senha(senha,formulario){
   seguridad=seguranca_senha(senha);
   formulario.seguranca.value=seguranca + "%";
}

Como vemos, se faz uso da função que devolve a segurança de um string que se utilizará como senha. Logo, se coloca esse valor no campo de texto adicional que há no formulário.

Podemos ver o exemplo em uma página a parte.