Introdução

Durante o desenvolvimento de aplicações, principalmente web, um dos fatores de maior relevância e que merece atenção é a segurança. Na maior parte dos sistemas em que o usuário mantém informações pessoais, sejam fotos, músicas, informações de compra e venda, etc, é necessário que esse se autentique para poder ter acesso a esses dados.

Porém, obviamente, para poder se autenticar (fazer login) no sistema, é preciso que esse usuário efetue um cadastro, no qual informa login, senha e outros dados que sejam relevantes para aplicação. No momento desse cadastro, é fundamental que o sistema auxilie o usuário e realize uma verificação da “força” da sua senha, evitando assim que ele utilize uma sequência de caracteres fácil de descobrir e, consequentemente, tenha prejuízos devido à violação de seus dados por alguém ter descoberto sua senha e acessado o sistema em seu lugar.

Essa verificação pode variar entre as aplicações, mas em geral se utiliza um algoritmo de validação da complexidade da senha informada. Como o desenvolvimento de um algoritmo desse tipo pode ser bastante complexo, uma opção prática e bastante adequada é a utilização de soluções já desenvolvidas e distribuídas para uso geral (geralmente gratuitas).

Nesse artigo será apresentado o plugin jQuery.Complexify, que realiza essa validação de forma rápida, além de poder ser facilmente integrado a páginas web. Esse plugin foi desenvolvido por Dan Palmer e é de distribuição gratuita, podendo ser obtido na página oficial que pode ser acessada no seguinte endereço: http://danpalmer.me/jquery-complexify/.

Nesse artigo veremos como integrar esse plugin a uma página HTML, através de exemplos práticos onde será mostrada o grau de complexidade da senha digitada no momento da inserção desse dado, sem que seja necessário clicar em nenhum botão ou “sair” do campo de senha, por exemplo.

Como utilizar

Como esse plugin foi desenvolvido com base na biblioteca jQuery, antes de tudo é necessário referenciá-la para poder fazer uso de sua sintaxe. A jQuery pode ser obtida no site oficial (http://jquery.com/download/), onde pode-se efetuar o download e usar o arquivo local, ou pode-se referenciar o arquivo JS direto no servidor (http://code.jquery.com/jquery-1.9.0.min.js), conforme veremos na Listagem 1.

O mesmo pode ser feito com o plugin em si, que pode ser obtido no link https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js para se salvar e usar o arquivo local, ou utilizar diretamente esse endereço no momento da referência. Nesse artigo será utilizada a segunda forma.

Listagem 1: Referenciando os arquivos necessários

<script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
<script 
src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>

Em seguida é necessário inserir mais uma tag na qual será invocada a função complexify para os campos que precisem ser validados. Uma vez que já importamos a jQuery, podemos usar sua sintaxe para usar o plugin. Na Listagem 2 é mostrado um exemplo básico de uso.

Listagem 2: Sintaxe básica de validação de um campo

<script type="text/javascript">
        $(function () {
            $("#nome_do_campo").complexify({}, function (valid, complexity) {
                //exibir o nível da senha
            });
        });
</script>

Onde consta nome_do_campo, no seletor da jQuery, deve ser informado o id do campo que será validado, geralmente um input do tipo password.

Exemplo prático com a tag <meter>

Nesse exemplo utilizaremos a tag <meter> que exibe uma barra de progresso, da qual controlaremos a propriedade value de acordo com o nível de complexidade/segurança da senha digitada.

O código da Listagem 3, a seguir, pode ser salvo como um arquivo de extensão html e aberto no browser para verificação.

Listagem 3: Exemplo de validação do nível da senha

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtPassword").complexify({}, function (valid, complexity) {
                document.getElementById("mtSenha").value = complexity;
            });
        });
</script>
</head>
<body>
    <p>
        <span>Senha:</span><input type="password" id="txtPassword" />
        <meter value="0" id="mtSenha" max="100"></meter>
    </p>
</body>
</html>

Ao abrirmos o exemplo no browser temos o seguinte resultado:

Validação do nível da senha com a tag meter

Figura 1: Validação do nível da senha com a tag meter

Exemplo usando jQuery UI ProgressBar

Nesse artigo, buscando apresentar mais de uma forma de apresentar o nível de segurança da senha, utilizaremos o widget Progressbar da jQuery UI, que funciona de forma semelhante ao meter, mas com estilos bastante diferentes. Para isso é necessário referenciar mais alguns arquivos, mas como explicar o funcionamento da jQuery UI não é o foco deste artigo e também devido às referências serem bastante semelhantes aquelas já feitas, não entraremos em detalhes, apenas veremos o código e em seguida o resultado.

Listagem 4: Validação de senha com interface cross-browser

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtPassword").complexify({}, function (valid, complexity) {
                $("#progressbar" ).progressbar({
				  value: complexity
				});
            });
        });
</script>
</head>
<body>
    <p>
        <span>Senha:</span><input type="password" id="txtPassword" />
        <div id="progressbar"></div>
    </p>
</body>
</html>

Como resultado temos a seguinte interface:

Validação de senha com o widget Progressbar da jQuery UI

Figura 2: Validação de senha com o widget Progressbar da jQuery UI

Conclusão

Questões relacionadas ao layout da página não foram abordadas nesse artigo, o objetivo aqui foi apresentar esse plugin jQuery Complexify, bastante útil de fácil utilização.

Considerando que a segurança das senhas é um fator de extrema importância em um cadastro, é fácil perceber a utilidade dessa ferramenta. É importante visitar a página oficial desse plugin para obter maiores informações sobre seu uso.

Finalizamos aqui este artigo. Até a próxima publicação.