Indicador de qualidade de senha

Quando 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.

Por Programação Pular para comentários
Indicador de qualidade de senha

Quando 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.


Indicador de qualidade de senha


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; iif (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 < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 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||/|!|"|·|$|%|&|(|)|=|?|¿|||@|#|¬|€|^|`|[' target="_blank">|+|*|¨|´|{|}|-|_|.|:|,|;|>|<)/ // Caracteres especiales
);
// verifica todas as condições
for (var i=0; iif (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 < 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.

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">


Sentido Web - Indicador calidad password




Digite sua senha:


Em caso de dúvidas deixe-a no comentário e ela será respondida o mais breve possível.

Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.