Medir a segurança de uma Password com Javascript?

22 Junho 2009 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

<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

O que se passa no Javascript anterior?

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.

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.

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.

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.

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	Bem interessante essa dica. Um Abraço Roberto


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


Rui Agosto 06, 2009	Não resulta!


Lucas Agosto 21, 2009	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	@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


Leonardo Teixeira Junho 03, 2010	Olá Gonçalo... Muito bom esse material. Gostei mesmo!!! Após 4 horas "quebrando" a cabeça para entender todo o código (rsrs) consegui implementar do jeito que eu queria. Continue assim... Obrigado.


Marcelo Outubro 25, 2010	Sua idéia é legal mas aqui não funciona fala que nao dá suporte a propriedade metodo


Elias Dezembro 12, 2010	Bom dia, eu gostei do post, só to com umas dúvidas, e tbm não consegui implementar como o Sr. Lucas comentou, será que não teria um RAR para disponibiliar ou um link de teste...mas o link externo não no corpo deste post, pois assim podemos ver o código fonte, pois não sou muito perito em JAVA para poder consertar possíveis erros (caso tenha). e eu não entendi o comentráio do ConçaloM onde ele diz que tem que realizar o load da framework Mootools-1.2.3, eu baixei e carreguei, usando "script type="text/javascript" src="http://weblouca.com/components/com_jomcomment/templates/breeze/mootools-1.2.3-core-nc.js" ". mas mesmo assim não funciona. Grato pela atenção. Elias


Elias Dezembro 12, 2010	Olá..sou eu de novo...acabei de deixar o comentário acima, bom testei novamente e consegui usar...desculpa qualquer coisa vou explicar o meu erro, pode ser o erro de alguém.. eu passei o load do min_pass errado. Então os lodas ficam: "script type="text/javascript" src="http://weblouca.com/components/com_jomcomment/templates/breeze/../../js/min_pass.js">


Elias Dezembro 12, 2010	Olá..sou eu de novo...acabei de deixar o comentário acima, bom testei novamente e consegui usar...desculpa qualquer coisa vou explicar o meu erro, pode ser o erro de alguém.. eu passei o load do min_pass errado. Então os lodas ficam: "script type="text/javascript" src="http://weblouca.com/components/com_jomcomment/templates/breeze/js/min_pass.js">script" "script type="text/javascript" src="http://weblouca.com/components/com_jomcomment/templates/breeze/js/mootools-1.2.3-core-nc.js"">script" Espero ter ajudado tbm..no meu caso passei o nome min_pass e esqueci da extensão .JS. Desculpe e grato Elias