使用jquery的简单登录表单

Question

我的目标：接受用户名和密码的登录表单（分别使用admin和password）。使用时，它将在标题中填充或创建一个包含用户名和注销选项的部分。 （该部分在用户未登录时不可见）。

我到目前为止所尝试的是在下面，哪些工作，但我想知道如何改善这个代码？

<!-- HTML --> 
     <div id="first"> 
      <form action="" method="post"> 
       <input type="text" id="loginusername" placeholder="Username" /> 
       <input type="password" id="loginpassword" placeholder="Password" /> 
       <input type="button" id="login" value="Sign In" /> 
      </form> 
     </div> 

     <div id="second"> 

     </div> 



<!-- JQUERY --> 
    $(document).ready(function(){ 
       // on click Sign In Button checks that username =='admin' and password == 'password' 
       $("#login").click(function(){ 
       if($("#loginusername").val()=='admin' && $("#loginpassword").val()=='password') { 
         $("#first").hide(); 
         $("#second").append("<p>Hello, admin</p> <br/><input type='button' id='logout' value='Log Out' />"); 
        } 
       else { 
        alert("Please try again"); 
       } 

       $("#logout").click(function() { 
       $("form")[0].reset(); 
       $("#first").show(); 
       $("#second").hide(); 
      }); 
     }); 

    }); 

Answer 1

登录表单通常用于防止未授权用户访问信息或行为应该是访问/只允许特定的人。所以，为了使登录表单正确地工作，它必须是安全的（至少尽可能）。如果登录表单不安全，它可能会给你保护你的数据的错觉，但是技术熟练的人可以在你不知道的情况下绕过它，这是不好的！

现在，这是我看到的只有jQuery登录表单的问题。在页面代码中以纯文本形式输入密码的事实只是不好的！绕过它是非常容易的！每个会查看你的页面代码的人都会知道你的管理员密码。即使您使用良好的散列算法（如SHA-2）来“隐藏”密码，它也几乎一样糟糕，因为它会给可能的攻击者一个很好的提示，从哪里开始猜测您的密码（使用rainbow tables或brute force）。

因此，我的建议是使用服务器端应用程序以及您的jQuery脚本，可以通过jQuery调用以检查密码，然后允许用户进入。它还不是最好的解决方案（它会在https连接上发送密码要好得多），但它仍然是一个改进！

您的代码，为了做到这一点，应该是这样的：

$(document).ready(function(){ 
    // on click Sign In Button checks with the remote server that username =='admin' and password == 'password' 
     $("#login").click(function(){ 
      $.ajax({ 
       url: 'http://www.mywebsite.com/checklogin?user='+encodeURIComponent($("#loginusername").val())+'&pass='+encodeURIComponent($("#loginpassword").val()), 
       success:function(data){ 
        if(data == "OK") 
        { 
         $("#first").hide(); 
         $("#second").append("<p>Hello, admin</p> <br/><input type='button' id='logout' value='Log Out' />"); 
        } 
        else 
        { 
         alert("Please try again"); 
        } 
       } 
      }); 
     }); 

     $("#logout").click(function() { 
      $("form")[0].reset(); 
      $("#first").show(); 
      $("#second").hide(); 
     }); 
    }); 

你也可以修改代码，使其通过发送POST方法的要求（这是稍微好一点）。 在服务器端，您可以拥有一个简单的脚本，它接收两个get参数（user和pass），检查它们是否与期望值（'admin'和'password'）相对应，然后打印到屏幕上如果成功则为OK，否则为KO。对于一个简单的开始，你可以创建一个PHP应用程序来做到这一点，就像下面这样（这是一个非常简单且可改进的开始）：

<?php 

$user = (array_key_exists("user",$_GET))?$_GET["user"]:""; //Checks if the user parameter has been passed through the get method, if not, sets the $user variable to an empty string 
$pass = (array_key_exists("pass",$_GET))?$_GET["pass"]:""; //Checks if the pass parameter has been passed through the get method, if not, sets the $pass variable to an empty string 

if($user == "user" and $pass == "pass") 
    echo "OK"; 
else 
    echo "KO"; 

Answer 2

使用此代码，我认为这将有助于你

<div id="first"> 
       <form action="" method="post"> 
        <input type="text" id="loginusername" placeholder="Username" /> 
        <input type="password" id="loginpassword" placeholder="Password" /> 
        <input type="button" class="login" value="Sign In" /> 
       </form> 
      </div> 

      <div id="second"> 

      </div> 




> $(document).ready(function(){ 
>     // on click Sign In Button checks that username =='admin' and password == 'password' 
>     $(".login").click(function(){ 
>     if($("#loginusername").val()=='admin' && $("#loginpassword").val()=='password') { 
>       $("#first").hide(); 
>       $("#second").show(); 
>       $("#second").append("<p>Hello, admin</p> <br/><input type='button' class='logout' value='Log Out' />"); 
>      } 
>     else { 
>      alert("Please try again"); 
>     } 
> 
>     $(".logout").click(function() { 
>     $("form")[0].reset(); 
>     $("#second").children('p, input').remove(); 
>     $("#first").show(); 
>     $("#second").hide(); 
>    }); 
>   }); 
> 
>  });