Medir a segurança de uma Password com Javascript?

Escrito por Gonçalo Martins

Com o aparecimento da Web2.0 os paradigmas de desenvolvimento web alteraram-se ligeiramente. Os utilizadores querem mais facilidade na interacção com uma página web.

Foi então que se começou a verificar um "boom" no aparecimento de javascript na web. Praticamente todos os websites utilizam esta linguagem de programação, para alguma coisa. O Google por exemplo utiliza javascript para mostrar a determinado utilizador que está a criar uma Google acount a segurança da password (como o Google existem muitos outros).

Neste artigo vou-lhe disponibilizar um plugin que criei à algum tempo para Mootools 1.2+. Este plugin cria um sistema muito similar ao do Google.

Demo:

_{Introduza números, Letras minúsculas, letras maiúsculas e os caracteres (!,",#,$,%,&,^,~,?,=,&,@,£) para testar o script.}

Como implementar o exemplo acima na sua página web?

1. Html

html
<form>
<b>Password:</b>
<br />
<input type="password" id="inputpassword" name="password" />
<br />
<b>Força password:</b>
<br />
<div style="width: 120px;
">
<div id="password_texto" style="font-size: 10px;
"></div>
<div id="password_barra" style="font-size: 1px;
 height: 3px;
 width: 0px;
 border: 1px solid white;
"></div>
</div>
</form>

2. Javascript

javascript
<script type="text/javascript" src="min_pass.js"></script> 
<script>
window.addEvent('domready', function() {
    
$('inputpassword').addEvent('keyup', function(){
var valorpass = $('inputpassword').value;
 
    
var campo = 'password';
 
var textoforca="Força da Pass:";
 
var forcapass=[['Muito Segura', '#0ca908'], ['Segura','#7ff67c'], ['Muito Forte','#1740ef'], ['Forte','#5a74e3'], ['Mediana','#e3cb00'], ['Fraca','#e71a1a']];
 
runPassword(valorpass, campo ,textoforca, forcapass);
 
});
 
});

O que se passa no Javascript anterior?

javascript
1) <script type="text/javascript" src="min_pass.js"></script>

Esta linha realiza o load do script para criar o medidor de segurança para a sua password. Pode realizar download dele aqui.

javascript
2) var campo = 'password';

A variável campo é a variável que identifica em que div's vão aparecer as indicações de segurança da sua password. Neste caso os id's password_texto e password_barra. Se a variável campo for modificada para (por exemplo) 'senha', os id's no HTML terão que passar a ser senha_texto e senha_barra.

javascript
3) var textoforca = "Força da Pass:";

Esta linha define o texto que aparece. Pode substituir o conteúdo que se encontra dentro de aspas pelo que mais lhe for conveniente.

javascript
4) var forcapass = [['Muito Segura', '#0ca908'], ['Segura','#7ff67c'], ['Muito Forte','#1740ef'], ['Forte','#5a74e3'], ['Mediana','#e3cb00'], ['Fraca','#e71a1a']];

A linha anterior define o texto e a cor dos vários níveis de segurança da sua password. O nível mais alto de segurança é o que aparece primeiro no array, sendo assim o mais baixo o que aparece por ultimo. Neste momento só existem 6 níveis. Tal como anteriormente pode alterar a cor e o texto dos níveis substituindo os valores do array.

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

segurança, password, mootools, plugin, Google, javascript

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



João Moreira Junho 22, 2009	Excelente script! Tinha visto muitos, mas nenhum com tantas opções de personalização. E melhor de tudo é que é para Mootools


PcSaudavel.com Junho 23, 2009 http://www.pcsaudavel.com/	Bem interessante essa dica. Um Abraço Roberto


Rui Julho 21, 2009	Não está a resultar!


Rui Agosto 06, 2009 http://ruidias.pt.to	Não resulta!


Lucas Agosto 21, 2009 http://interativa.ppg.br	Cara, o demo parece excelente, mas aqui não está a funcionar... Tens como disponibilizar um RAR com ele em funcionamento?


GonçaloM Agosto 24, 2009 http://weblouca.com	@Rui, Rui, Lucas Todo o código contigo no artigo funciona, não se podem esquecer de realizar o load do script min_pass.js e ter atenção aos caminhos relativos no vosso servidor. Têm ainda que realizar o load da framework mootools 1.2+ (http://mootools.net/download/get/mootools-1.2.3-core-nc.js) Atenção que o mootools é ainda incomplativel com outras frameworks como Jquery e Prototype