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.

Veja 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 permitindo 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 cem, 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:

• Microsoft VIsual Studio 2013 Express for web

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.

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