Script para informar da segurança de uma senha, com Javascript

Queremos informar ao usuário, quando escreve uma senha, sobre o grau de segurança da senha. Para fazer isso, vejamos este simples script Javascript.

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.