none
Login asp.net mvc ajax RRS feed

  • Pergunta

  • Galera, seguinte...

    Comprei um layout pronto na internet(apenas o HTML,CSS e JS) e estou utilizando-o. Ele já tem uma página de login e a mesma utiliza jquery validate para fazer validações, como por exemplo se o usuário digitou o email corretamente na hora de se cadastrar. Ok, as validações client-side estão sendo feitas corretamente, porém agora preciso fazer com que isso funcione e o html está desse jeito:

    <input type="text" class="input-block-level" data-validate="{required: true, email:true, messages:{required:'Preencha o campo Email', email:'Por favor, digite um endereço de email válido'}}" name="email" id="email" autocomplete="off" />

    Antes de meter a mão na massa imaginei que todas minhas requisições eu faria com jquery - ajax. Ou seja, iria capturar os valores que estão nos campos e enviá-los chamando o controller através do javascript. Porém, tem duas coisas:

    1. Não sei se posso fazer isso quando é um sistema de login(é seguro fazer desse modo?)
    2. Se eu faço desse jeito, capturo com jquery o evento click do submit, mas aí ele irá ignorar se o usuário digitou algo errado no client side. Procurei se os métodos do jquery validate retornavam alguma coisa para eu saber se deu tudo certo ou não, para só assim quando o usuário clicar eu capturar os valores e mandar para o método que faz o login mas não achei nada.

    Alguém sabe me dizer nesse caso, qual o melhor jeito de implementar um sistema de login?

    Obrigado.


    quarta-feira, 24 de julho de 2013 04:14

Respostas

  • Bom dia :

    R 1 =>

    Sim é  seguro pois no método do ajax você irá definir o Type como POST , ou seja os dados serão enviados de forma Oculta. 

    R 2 => 

    Quanto ao envio, existe um fato mesmo se o login e senha estive errado para o ajax do jquery o que importa é que ele conseguiu fazer o envio dos dados , daí então basta você fazer o tratamento no Controller e da um retorno em Json dizendo que algo deu errado , do contrário como da mesma forma a requisição voltará para a mesma página ou seja a página de login aí se for ok você redireciona para  a página correta. Só um grande detalhe hoje é quase impossível um usuário querer desabilitar o javascript do navegador, caso essa proeza seja feito a forma de validação e envio não irá funcionar.

    Ex do R 2 => 

    // Requisição em ajax
    
    var LoginSenha = { Login : $("#txtLogin").val(), Senha: $("#txtSenha").val() };
    
    
    
    $.ajax({
    
    type : "POST",
    url : "/Home/ValidaUsuario",
    data : JSON.stringify(LoginSenha),
    dataType : "json",
    contentType : "application/json;charset=uft-8",
    success : function(data)
    {
    
    if(data == "OK")
    {
     document.location.href = "/Home/Acesso";
    
    }
    else
    {
    alert("Login ou Senha Inválidos");
    
    }
    
    },
    error : function(erro){
    
    alert(erro.responseText);
    }
    
    
    });

    Exemplo do Controller :

    public ActionResult ValidaUsuario(string Login, string Senha)
    {
    
    var Query = new Repositorio();
    
    var Usuario = Query.Valida(n => n.Login.Equals(Login) && n.Senha.Equals(Senha));
    
    if(Usuario == null)
    {
    
    return Json(new { Retorno = "NOK" });
    
    
    }
    
    else
    
    {
    
    Session["Usuario"] = Usuario;
    
    return Json(new { Retorno = "OK" });
    
    }
    
    
    
    }

    Se lhe foi útil marque como resposta.


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br


    • Editado Davi Murilo quarta-feira, 24 de julho de 2013 11:22 correção
    • Marcado como Resposta rafitas quarta-feira, 24 de julho de 2013 18:08
    quarta-feira, 24 de julho de 2013 11:22
  • Vamos lá então primeiro teríamos que entender como funciona essa função validate e ver se dentro dela tem algo return para não continuar mais o processo até a validação está ok, ou senão saber qual é o retorno da função validade em caso de sucesso. 

    No modo tradicional seria assim :

    // Javascript
    
    $("#btnEnviar").click(function(){
    
    if($("#Nome").val() == "")
    {
    alert("Preencha o nome");
    $("#Nome").focus();
    
    return; // Aqui encerrará o código
    }
    
    
    $.ajax({
    .......
    ......
    
    }); // Seria feito o envio se estivesse tudo ok
    
    
    
    });

    2 ª Resposta Sim é só colocar esse código Session["Usuario"] = aqui é valor que quer , no meu caso persisto a classe Usuario.

    Estamos aí .


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    • Marcado como Resposta rafitas quarta-feira, 24 de julho de 2013 22:56
    quarta-feira, 24 de julho de 2013 18:43
  • Se você tiver gmail o meu é dmurilo@gmail.com , se quiser entre lá a gente tenta resolver isso mais rápido aí depois você coloca o resultado aqui no fórum , senão vai se estender muito esse post pode ser.

    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    • Marcado como Resposta rafitas sexta-feira, 26 de julho de 2013 03:07
    quinta-feira, 25 de julho de 2013 18:53

Todas as Respostas

  • Bom dia :

    R 1 =>

    Sim é  seguro pois no método do ajax você irá definir o Type como POST , ou seja os dados serão enviados de forma Oculta. 

    R 2 => 

    Quanto ao envio, existe um fato mesmo se o login e senha estive errado para o ajax do jquery o que importa é que ele conseguiu fazer o envio dos dados , daí então basta você fazer o tratamento no Controller e da um retorno em Json dizendo que algo deu errado , do contrário como da mesma forma a requisição voltará para a mesma página ou seja a página de login aí se for ok você redireciona para  a página correta. Só um grande detalhe hoje é quase impossível um usuário querer desabilitar o javascript do navegador, caso essa proeza seja feito a forma de validação e envio não irá funcionar.

    Ex do R 2 => 

    // Requisição em ajax
    
    var LoginSenha = { Login : $("#txtLogin").val(), Senha: $("#txtSenha").val() };
    
    
    
    $.ajax({
    
    type : "POST",
    url : "/Home/ValidaUsuario",
    data : JSON.stringify(LoginSenha),
    dataType : "json",
    contentType : "application/json;charset=uft-8",
    success : function(data)
    {
    
    if(data == "OK")
    {
     document.location.href = "/Home/Acesso";
    
    }
    else
    {
    alert("Login ou Senha Inválidos");
    
    }
    
    },
    error : function(erro){
    
    alert(erro.responseText);
    }
    
    
    });

    Exemplo do Controller :

    public ActionResult ValidaUsuario(string Login, string Senha)
    {
    
    var Query = new Repositorio();
    
    var Usuario = Query.Valida(n => n.Login.Equals(Login) && n.Senha.Equals(Senha));
    
    if(Usuario == null)
    {
    
    return Json(new { Retorno = "NOK" });
    
    
    }
    
    else
    
    {
    
    Session["Usuario"] = Usuario;
    
    return Json(new { Retorno = "OK" });
    
    }
    
    
    
    }

    Se lhe foi útil marque como resposta.


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br


    • Editado Davi Murilo quarta-feira, 24 de julho de 2013 11:22 correção
    • Marcado como Resposta rafitas quarta-feira, 24 de julho de 2013 18:08
    quarta-feira, 24 de julho de 2013 11:22
  • Você tem que fazer a validação tanto na parte cliente como servidor para ter uma segurança efetiva.
    quarta-feira, 24 de julho de 2013 17:58
    Moderador
  • Davi, muito obrigado, de qualquer modo sua resposta foi muito útil, porque futuramente eu teria que fazer isso mesmo e não saberia como. Porém o item 2 acho que não expliquei direito o que eu quis dizer:

    No meu cadastro, quando um usuário insere as informações, existem validações que não deveriam deixar o cara continuar até que todas essas validações estejam ok. Porém eu não sei verificar como faço para saber se todas as validações estão ok ou não. Olha:

    http://social.msdn.microsoft.com/Forums/getfile/312059

    (Tive que mandar assim pq o msdn disse que não posso inserir imagens enquanto não verificar minha conta)

    Isso está sendo feito da maneira que coloquei em cima junto com esse script no final da página:

    // validate
                    $('#sign-in').validate();
                    $('#sign-up').validate();
                    $('#form-recover').validate();

    Eai, pensei em fazer dessa maneira: 

    $('#cria-conta').click(function () {
                        alert("Handler for .click() called.");
                    });

    Mas dessa maneira de qualquer jeito ele vai chamar. Independente se o cara digitou algo errado ou não, entende?

    Agora, aproveitando, queria te perguntar... pra fazer o login funcionar corretamente, como abrir uma sessão, é só colocar o que você colocou ali em cima? :

    Session["Usuario"] = Usuario;

    Brigadão, já vo marcar como resposta, mesmo assim beleza?

    quarta-feira, 24 de julho de 2013 18:04
  • Vamos lá então primeiro teríamos que entender como funciona essa função validate e ver se dentro dela tem algo return para não continuar mais o processo até a validação está ok, ou senão saber qual é o retorno da função validade em caso de sucesso. 

    No modo tradicional seria assim :

    // Javascript
    
    $("#btnEnviar").click(function(){
    
    if($("#Nome").val() == "")
    {
    alert("Preencha o nome");
    $("#Nome").focus();
    
    return; // Aqui encerrará o código
    }
    
    
    $.ajax({
    .......
    ......
    
    }); // Seria feito o envio se estivesse tudo ok
    
    
    
    });

    2 ª Resposta Sim é só colocar esse código Session["Usuario"] = aqui é valor que quer , no meu caso persisto a classe Usuario.

    Estamos aí .


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    • Marcado como Resposta rafitas quarta-feira, 24 de julho de 2013 22:56
    quarta-feira, 24 de julho de 2013 18:43
  • Davi brigadão cara.. 

    Agora sim estou conseguindo andar com o projeto(e vou fazer dessa maneira todos os forms que tiver no meu sistema). Só uma coisinha.. Fiz o teste debugando e deu tudo certo, porém o javascript dá erro mesmo assim.

    Tentei debugar o javascript pelo debug do chrome mas a parte do ajax não é possível debugar. Acredito que o javascript não esteja conseguindo esperar a resposta do server side e por isso dá o erro. Estou procurando na net aqui.. Caso saiba o que pode ser, por favor me avise. Obrigado novamente.. Abraço

    quinta-feira, 25 de julho de 2013 05:34
  • OBS: o responseText vem vazio. Do o alert e não vem nada no alert
    quinta-feira, 25 de julho de 2013 05:37
  • Fiz o que vi nesse site:

    http://www.unseenrevolution.com/jquery-ajax-error-handling-function/

    error: function (jqXHR, exception) {
                                    if (jqXHR.status === 0) {
                                        alert('Not connect.\n Verify Network.');
                                    } else if (jqXHR.status == 404) {
                                        alert('Requested page not found. [404]');
                                    } else if (jqXHR.status == 500) {
                                        alert('Internal Server Error [500].');
                                    } else if (exception === 'parsererror') {
                                        alert('Requested JSON parse failed.');
                                    } else if (exception === 'timeout') {
                                        alert('Time out error.');
                                    } else if (exception === 'abort') {
                                        alert('Ajax request aborted.');
                                    } else {
                                        alert('Uncaught Error.\n' + jqXHR.responseText);
                                    }
                                }

    e a mensagem veio de 'Not connect.\n Verify Network.', Porém quando coloco um breakpoint no meu método do controller ele chega tudo ok e inclusive com os valores certos. E sim, está conseguindo ir até a parte de retornar também.

    Estranho .. Se eu descobrir posto aqui

    quinta-feira, 25 de julho de 2013 05:51
  • Eu postei errado essa parte do código :

    contentType : "application/json;charset=uft-8",

    O correto é assim :

    contentType: "application/json; charset=utf-8"

    Ou seja eu tinha colocado uft-8 sendo que é utf-8, veja se arrumando isso o problema se resolve.


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    quinta-feira, 25 de julho de 2013 11:28
  • Davi,

    Valeu pela tentativa, estava errado mesmo e eu corrigi. Mas continua dando o mesmo problema. To tentando achar algo na internet aqui mas ta difícil, eu to achando muito estranho ele dar 'Not connect.\n Verify Network.' se logo após isso, ele chega o breakpoint lá no Controller.

    Acredito que o javascript não esteja conseguindo esperar o c#, não sei..

    quinta-feira, 25 de julho de 2013 16:09
  • Testou em Browsers Diferentes ? Se não tente .

    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    quinta-feira, 25 de julho de 2013 16:11
  • Estou utilizando o chrome mas tentei agora no mozilla e internet explorer e deu a mesma coisa :(

    Estou tentando ler na api jquery sobre esse error da função ajax. Mas ta difícil de entender o motivo. O bom é que se eu descobrir vo poder usar pra todos os meus forms da mesma maneira.

    quinta-feira, 25 de julho de 2013 16:58
  • Tem como postar o seu código JavaScript que está fazendo o envio ?

    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    quinta-feira, 25 de julho de 2013 17:05
  • Claro:

    $('#cria-conta').click(function (e) {
                        if ($('#sign-up').valid()) {
                            var usuario = { username: $('#username').val(), email: $('#email').val(), senha: $('#password').val() };
    
                            $.ajax({
    
                                type: "POST",
                                url: "/login/CriaConta",
                                data: JSON.stringify(usuario),
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                success: function (data) {
    
                                    if (data == "OK") {
                                        //document.location.href = "/Home/Acesso";
                                        alert("Deu tudo certo");
                                    }
                                    else {
                                        alert("Algo errado");
    
                                    }
    
                                },
                                error: function (jqXHR, exception) {
                                    if (jqXHR.status === 0) {
                                        alert('Not connect.\n Verify Network.');
                                    } else if (jqXHR.status == 404) {
                                        alert('Requested page not found. [404]');
                                    } else if (jqXHR.status == 500) {
                                        alert('Internal Server Error [500].');
                                    } else if (exception === 'parsererror') {
                                        alert('Requested JSON parse failed.');
                                    } else if (exception === 'timeout') {
                                        alert('Time out error.');
                                    } else if (exception === 'abort') {
                                        alert('Ajax request aborted.');
                                    } else {
                                        alert('Uncaught Error.\n' + jqXHR.responseText);
                                    }
                                }
    
    
                            });
    
                        }
                    });
                })

    quinta-feira, 25 de julho de 2013 17:31
  • Ele passa pelo Controller com os parametros certos ? Se possível coloque também o código do Controller .

    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    quinta-feira, 25 de julho de 2013 18:32
  • Sim, chega tudo certinho no controller(Mas assim, primeiro ele dá o alert javascript, depois chega os parametros.Ou quase na mesma hora, ou seja, a impressão que fica pra mim, é que ele não espera o retorno)

    Veja meu controller:

    public ActionResult CriaConta(string username, string email, string senha)
            {
                if (username != "" && email != "" && senha != "")
                {
                    return Json(new { Retorno = "OK" });
                }
                else
                {
                    return Json(new { Retorno = "NOK" });
                }
            }

    quinta-feira, 25 de julho de 2013 18:43
  • Se você tiver gmail o meu é dmurilo@gmail.com , se quiser entre lá a gente tenta resolver isso mais rápido aí depois você coloca o resultado aqui no fórum , senão vai se estender muito esse post pode ser.

    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    • Marcado como Resposta rafitas sexta-feira, 26 de julho de 2013 03:07
    quinta-feira, 25 de julho de 2013 18:53
  • Beleza cara, te mandei email e convidei pro google talk. Se conseguirmos resolver ou eu conseguir resolver posto aqui
    quinta-feira, 25 de julho de 2013 23:15
  • Galera com a ajuda do Davi, consegui resolver.

    Apenas faltava um e.preventDefault(); logo depois do click. Para quem quiser saber, o código ficou assim:

    $('#cria-conta').click(function (e) {
                        e.preventDefault();
                        if ($('#sign-up').valid()) {
                            var usuario = { username: $('#username').val(), email: $('#email').val(), senha: $('#password').val() };
    
                            $.ajax({
    
                                type: "POST",
                                url: "/login/CriaConta",
                                data: JSON.stringify(usuario),
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                //beforeSend: function(){
                                //    alert("Estou indo");
                                //},
                                success: function (data) {
    
                                    if (data.Retorno == "OK") {
                                        document.location.href = "/Home";
                                    }
                                    else {
                                        alert("Algo errado");
    
                                    }
                                    
                                },
                                error: function (jqXHR, exception) {
                                    if (jqXHR.status === 0) {
                                        alert('Not connect.\n Verify Network.');
                                    } else if (jqXHR.status == 404) {
                                        alert('Requested page not found. [404]');
                                    } else if (jqXHR.status == 500) {
                                        alert('Internal Server Error [500].');
                                    } else if (exception === 'parsererror') {
                                        alert('Requested JSON parse failed.');
                                    } else if (exception === 'timeout') {
                                        alert('Time out error.');
                                    } else if (exception === 'abort') {
                                        alert('Ajax request aborted.');
                                    } else {
                                        alert('Uncaught Error.\n' + jqXHR.responseText);
                                    }
                                }
    
    
                            });
    
                        }
                    });

    sexta-feira, 26 de julho de 2013 03:09