ASP .NET MVC - Validação da força da senha usando jQuery


 Neste artigo eu vou mostrar como podemos realizar a validação da força de uma senha usando jQuery em uma aplicação ASP .NET MVC.

Muitas vezes somos solicitados a criar uma conta cadastrando um login e uma senha para ter acesso a um web site ou a dados sensíveis de um sistema. Como algumas senhas são fáceis de quebrar usando técnicas de força bruta, é comum dar o feedback aos usuários para mostrar a força da senha escolhida sinalizando ao usuário se a sua senha é ou não tão segura.

Neste artigo vou mostrar como podemos verificar a força de uma senha fornecida por um usuário fornecendo informações que indicam se a senha é fraca ou forte.

Algumas senhas são muito fracas e nunca devem ser utilizadas, geralmente elas incluem data de nascimento, números de telefone, números ou letras repetidos e nomes pessoais.

Outras podem ser descritas como fracas ou fortes de acordo com o comprimento da senha e do tipo de caracteres que ela contém. Por exemplo, se sua aplicação permite senhas de quatro caracteres de comprimento com a utilização das 26 letras do alfabeto, o número máximo de senhas possíveis é de aproximadamente 450.000. Este é um número pequeno para um computador moderno e um ataque de força bruta poderá quebrar a senha com certa facilidade.

Podemos aumentar o número de senhas possíveis, permitindo que caracteres adicionais sejam incluídos na senha. Se continuarmos com uma senha de quatro caracteres mas permitimos uma combinação de letras maiúsculas e minúsculas, as combinações possíveis aumentam de 450.000 para cerca de 7,5 milhões. Adicionando dígitos numéricos, símbolos e espaços para aumentar o conjunto de caracteres a 100 podemos chegar a 100 milhões de senhas possíveis com apenas quatro caracteres, o que é um número considerável.

Outra forma de aumentar o número de combinações possíveis é aumentar o comprimento da senha. Com os cem caracteres fornecidos por letras, dígitos e símbolos, estendendo a senha para dez caracteres de tamanho temos 100.000.000.000.000.000.000 combinações possíveis. Um número tão alto faz com que um ataque de força bruta não seja tão temido.

Recursos usados:

Criando o projeto no Visual Studio 2013 Express for web

Abra o VS Express 2013 for web e clique em New Project;

A seguir selecione a linguagem Visual C# e o template ASP .NET Web Application;

Informe o nome Mvc_Validar_ForcaSenha e clique no botão OK;

A seguir selecione o template Empty, marque o folder MVC e clique no botão OK;

Será criado um projeto MVC com a seguinte estrutura exibida na janela Solution Explorer:

Definindo o Controller

Vamos agora definir o nosso controlador chamado HomeController.

Clique com o botão direito na pasta Controllers e a seguir em Add -> Controller;

Selecione a opção MVC 5 Controller - Empty e clique no botão Add;

Informe o nome HomeController e clique no botão Add;

Na Action Index do controller criado vamos definir o código que retorna uma View().

Também vamos definir uma nova Action Index(string Senha) para tratar o POST retornando uma view e a mensagem sobre a senha informada:

using System.Web.Mvc;
namespace Mvc_Validar_ForcaSenha.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(string Senha)
        {
            ViewBag.Message = "A senha informada foi  :" + Senha;
            return View();
        }
    }
}

Preparando o ambiente

Antes de continuar vamos referenciar no projeto o plugin para verificar a força da senha. Existem muitas opções que você pode usar e eu escolhi o plugin que pode ser baixado neste link: http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/

Após baixar o arquivo passwordStrengthMeter.js copie-o na pasta Scripts do projeto. Veja abaixo o código deste arquivo:

var shortPass = 'Muito Curta'
var badPass = 'Ruim'
var goodPass = 'Boa'
var strongPass = 'Forte'
function passwordStrength(password,username)
{
    placar = 0 
    //password < 4
    if (password.length < 4 ) { return shortPass }
    //password == username
    if (password.toLowerCase()==username.toLowerCase()) return badPass
    //tamanho da senha
    placar += password.length * 4
    placar += ( verificarRepeticao(1,password).length - password.length ) * 1
    placar += ( verificarRepeticao(2,password).length - password.length ) * 1
    placar += ( verificarRepeticao(3,password).length - password.length ) * 1
    placar += ( verificarRepeticao(4,password).length - password.length ) * 1
    //senha tem 3 numeros
    if (password.match(/(.*[0-9].*[0-9].*[0-9])/))  placar += 5 
    //senha tem dois simbolos
    if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)) placar += 5 
    //senha tem caracteres maiusculos e minusculos
    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  placar += 10 
    //senha tem numeros e caracteres
    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  placar += 15 
    //
    //senha tem numeros e símbolos
    if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/))  placar += 15 
    //senha tem caractere e símbolo
    if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/))  placar += 15 
    //senha tem apenas numeros ou caracteres
    if (password.match(/^\w+$/) || password.match(/^\d+$/) )  placar -= 10 
    // vreificando o placar entre :  0 < placar < 100
    if ( placar < 0 )  placar = 0 
    if ( placar > 100 )  placar = 100 
    if (placar < 34 )  return badPass 
    if (placar < 68 )  return goodPass
    return strongPass
}
// verificarRepeticao(1,'aaaaaaabcbc')   = 'abcbc'
// verificarRepeticao(2,'aaaaaaabcbc')   = 'aabc'
// verificarRepeticao(2,'aaaaaaabcdbcd') = 'aabcd'
function verificarRepeticao(pLen,str) {
    res = ""
    for ( i=0; i<str.length ; i++ ) {
        repeated=true
        for (j=0;j < pLen && (j+i+pLen) < str.length;j++)
            repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen))
        if (j<pLen) repeated=false
        if (repeated) {
            i+=pLen-1
            repeated=false
        }
        else {
            res+=str.charAt(i)
        }
    }
    return res
}

Eu alterei somente o texto inicial do arquivo para exibir a mensagem em português no arquivo javascript original e os comentários.

Criando a View

Agora vamos criar uma view onde vamos exibir uma caixa de texto para que o usuário informe a senha e um controle Button para que o usuário realize o Post da informação.

Clique com o botão direito do mouse sobre no interior da View Index e a seguir em Add View;

A seguir defina as opções para criar a view conforme a figura abaixo:

A seguir inclua o código abaixo para esta view que será criada na pasta Views/Home com o nome Index.cshtml:

@{
    ViewBag.Title = "Validação da Força da Senha com jQuery";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/passwordStrengthMeter.js"></script>
<script language="javascript">
    var result = "";
    jQuery(document).ready(function () {
        $('#txtpassword').keyup(function () {
            $('#result').html(passwordStrength($('#txtpassword').val(), ""))
            result = $('#result').html();
            if (result == "Muito Curta") {
                $('#result').attr({ 'style': 'color:Red;' });
            }
            if (result == "Ruim") {
                $('#result').attr({ 'style': 'color:Olive;' });
            }
            if (result == "Boa") {
                $('#result').attr({ 'style': 'color:Lime;' });
            }
            if (result == "Forte") {
                $('#result').attr({ 'style': 'color:Green;' });
            }
        })
    })
    function ValidateForm() {
        if (result == "Boa" || result == "Forte") {
            return true;
        }
        else
        {
            alert("A senha é FRACA.");
            return false;
        }
    }
</script>
@using (Html.BeginForm("Index", "Home"))
{
    <h2>Macoratti .net</h2>
    <hr />
    <div>
        Password: @Html.Password("Senha", "", new { @Id = "txtpassword" })
        <span id='result'></span>
    </div>
    <br />
    <div style="text-align:center">
        <input type="submit" value="Submit" onclick="javascript:return ValidateForm();" />
    </div>
    <div style="color:Red;font-weight:bold;">@ViewBag.Message</div>
}

Você pode alterar as cores de exibição do texto e incrementar o script com outros recursos.

Executando o projeto iremos obter a exibição da página abaixo. Ao digitar a senha veremos uma mensagem exibindo a sua validação:

1- Senha muito Curta

2- Senha Ruim

3- Senha Boa

4- Senha Forte

Quando o usuário clicar no botão Submit para enviar o post da senha teremos:

Pegue o projeto completo aqui: Mvc_Validar_ForcaSenha.zip

    Lucas 9:23 E dizia a todos : Se alguém quer vir após mim, negue-se a si mesmo, e tome cada dia sua cruz, e siga-me.
    Lucas 9:24 Porque, qualquer que quiser salvar a sua vida, perdê-la-á; mas qualquer que, por amor de mim, perder a sua vida, a salvará.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:


José Carlos Macoratti