Indicador de qualidade de senha
Canal: JavaScript | Autor: Jonathan Lamim Antunes | Publicado em: 08/05/2009 | Views: 2.217Quando um usuário se registra em alguma aplicação web, sempre é necessário o cadastramento de uma senha, e nem sempre o usuário cadastra uma senha segura. Nesse caso cabe a nós desenvolvedores de aplicações web mostrar para o usuário que a senha dele não é tão segura quanto ele pensa.
Para isto, vamos ver um script que modificará os "inputs password" para inserir neles uma funcionalidade que indique a qualidade da senhaque está sendo introduzida.
O script irá inserir um evento onkeyup e realizará uma série de comparações para conhecer a qualidade da senha, uma senha válida será a que cumprir todas as condições. As condições incluídas nesse exemplo são as tipicamente pedidas: que existam maiúsculas e minúsculas, algum número, caracteres especiais e uma quantidade de caracteres maior que 6.
Para checar cada condição usaremos expressões regulares e levaremos um contador para saber quantas condições foram cumpridas. Quando finalizarmos nossas comprovações calcularemos o percentual de qualidade e o indicaremos com uma barra de progresso. Esta barra aumentará conforme a qualidade da senha for aumentando e irá mudando da cor vermelha para verde conforme a qualidade da senha for aumentando.
O efeito de barra de progresso será realizado da seguinte maneira, temo suma imagem que vai funcionar como máscara, tendo duas partes de tamanho igual e cada uma dessas partes terão o mesmo tamanho do input. Cada metade terá uma funcionalidade, a metade da direita servirá para ocultar e a da esquerda para mostrar, conforme quisermos que a barra vá aumentando. Iremos movendo o fundo para a direita para que se possa visualizar a barra de progresso. Inicialmente a linha tracejada da imagem que mostramos como exemplo estará no lado esquerdo do input.
O código será o seguinte:var __PASSWORD__ = {
colorKO: [255, 0, 0], // Color de contraseña no válida
color50: [127, 127, 0], // Color para el 50% para que no haya un cambio tan brusco
colorOK: [0, 255, 0], // Color de contraseña válida
width: 150,
// insere o evento onkeyup no input:password e insere o evento checkpassword
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i%3Cinputs.length; i++) {
if (inputs.type == "password") {
inputs.addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs.className = "password";
}
}
},
// Obtém o percentual de cor entre a cor inicial e a cor final levando em conta uma cor intermediária
getColor: function(porc) {
var color = new Array();
var color1 = porc %3C 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc %3C 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));
return color;
},
// Comprova a qualidade da senha
checkPassword: function() {
var valor = this.value;
var cont = 0;
var comprobaciones = new Array(
/[A-Z]/, // maiúsculas
/[a-z]/, // minúsculas
/d/, // números
/.{6}/, // mais de 6 caracteres
/(s||/|!|"|·|$|%|&|(|)|=|?|¿|||@|#|¬|€|^|`|[' rel="nofollow" target="_blank">|+|*|¨|´|{|}|-|_|.|:|,|;|%3E|%3C)/ // Caracteres especiales
);
// verifica todas as condições
for (var i=0; i%3Ccomprobaciones.length; i++) {
if (valor.match(comprobaciones)) {
cont++;
}
}
//valores possíveis em caso de 5 condições: 0, 20, 40, 60, 80, 100, mas o valor mínimo tem que ser 20 para que coincida com o colorKo, já que se não, ao pressionar uma tecla será trocada a cor em colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));
// Move o fundo tratando-o como uma máscara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";
//Troca a cor de fundo
var color = __PASSWORD__.getColor(porc);
if (porc %3C 0) {
this.style.backgroundColor = "";
} else {
this.style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")";
}
}
};
window.addEventListener("load", function() {__PASSWORD__.init();}, false);
Veja abaixo o código fonte completo desse artigo.%3C!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd"%3E
%3Chtml%3E
%3Chead%3E
%3Ctitle%3ESentido Web - Indicador calidad password%3C/title%3E
%3Cstyle type="text/css"%3E
.password {
background: url(background.gif) -150px 0px;
border: 1px solid #000000;
width: 150px;
}
%3C/style%3E
%3Cscript type="text/javascript"%3E
var __PASSWORD__ = {
colorKO: [255, 0, 0], // cor da senha não válida
color50: [127, 127, 0], // cor para 50% para não haver uma mudança tão brusca
colorOK: [0, 255, 0], // cor da senha válida
width: 150,
// Insere o evento onkeyup na caixa input:password e insere o evento checkpassowrd
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i%3Cinputs.length; i++) {
if (inputs.type == "password") {
inputs.addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs.className = "password";
}
}
},
// obtém a cor percentual entre a cor inicial e a final, levando em conta uma cor intermediária
getColor: function(porc) {
var color = new Array();
var color1 = porc %3C 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc %3C 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));
return color;
},
// verifica a qualidade da senha
checkPassword: function() {
var valor = this.value;
var cont = 0;
var comprobaciones = new Array(
/[A-Z]/, // maiúsculas
/[a-z]/, // minúsculas
/d/, // números
/.{6}/, // mais de 6 caracteres
/(s||/|!|"|·|$|%|&|(|)|=|?|¿|||@|#|¬|€|^|`|[' rel="nofollow" target="_blank">|+|*|¨|´|{|}|-|_|.|:|,|;|%3E|%3C)/ // Caracteres
especiales
);
// verifica todas as condições
for (var i=0; i%3Ccomprobaciones.length; i++) {
if (valor.match(comprobaciones)) {
cont++;
}
}
//valores possíveis em caso de 5 condições: 0, 20, 40, 60, 80, 100, mas o valor mínimo tem que ser 20 para que coincida com o colorKo, já que se não, ao pressionar uma tecla será trocada a cor em colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));
// Move o fundo tratando-o como uma máscara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";
// Troca a cor de fundo
var color = __PASSWORD__.getColor(porc);
if (porc %3C 0) {
this.style.backgroundColor = "";
} else {
this.style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")";
}
}
};
window.addEventListener("load", function() {__PASSWORD__.init();}, false);
%3C/script%3E
%3C/head%3E
%3Cbody%3E
%3Cp%3EDigite sua senha: %3Cinput type="password" name="pass" /%3E
%3C/body%3E
%3C/html%3E
Em caso de dúvidas deixe-a no comentário e ela será respondida o mais breve possível.
Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado
crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra.
Você não pode criar obras derivadas.
Barra de Progresso com AJAX
Uma das necessidades que nos deparamos. Próximo artigo
Exibindo Data e Hora na Página
Esta coluna mostra a função em Java Sc.








