带有客户端哈希的登录系统

时间:2019-09-24 05:15:04

标签: php html css

我正在尝试制作一个简单的登录系统,该系统允许用户注册/登录,但是想要在将密码发送到服务器之前在客户端上对密码进行哈希处理。我知道这不是标准做法,而是尝试使其正常工作。希望我能对我要去的地方有所了解。

到目前为止,这是我的代码:

<?php
include_once('connect.php');


$username = $_POST['username'];
$sql = "SELECT salt FROM users WHERE username = '$username';";
$result = $conn->query($sql);
$row = mysqli_fetch_assoc($result);
echo $row['salt'];


$variable = $_GET['tmp'];
$getPass = "SELECT passwordhash FROM users WHERE username = '$username' AND passwordhash =         '$variable ';";
//Run the sql and either set tmp variable of isValid to 1 or 0 and then echo it below or see how many rows are returned?
?>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="sha256.js"> </script>
        <script>
            function changeFormLogin() {
                var pass = document.getElementById('getPass').value;
                var username  = document.getElementById('username').value;
                var getSalt = <?php echo $row['salt']; ?>

                var hashpass = SHA256(pass+pass);
                var tmp = validateLogin(hashpass);
                if(tmp ==1){
                    //Welcome the user back, and load new form
                }
                else{
                    //Tell them to try again, notify them.
                }

                document.getElementById("demo").innerHTML = getSalt; //Used for testing
                return true;

            }

        function validateLogin(hashPass){

        }
    </script>

</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Log In Here</h2>
        <form action="#" onsubmit ="return changeFormLogin()">
            <p>Email</p>
            <input id="username" type="email" name="username" placeholder="Enter Email" required>
            <p>Password</p>
            <input id="getPass" type="password" name="password" placeholder="••••••" required>
            <input type="submit" name="login" value="Sign In">
            <p id="demo"></p>
        </form>

        <a href="index.php"><input type="submit" name="login" value="Return home"></a>

    </div>

或者,如果有一种简化方法,我全力以赴!

1 个答案:

答案 0 :(得分:0)

您允许表单提交到服务器,这会阻止javascript执行。

我不确定您使用的是https://cdnjs.com/libraries/js-sha256库还是类似的库,但是它需要使用sha256小写而不是您键入的大写字母。

这是工作代码,

function changeFormLogin() {
    var pass = document.getElementById('getPass').value;
    var username  = document.getElementById('username').value;
    var getSalt = 123566 //your salt

    var hashpass = sha256(pass+pass);
    console.log(hashpass);
    var tmp = validateLogin(hashpass);
    if(tmp ==1){
        //Welcome the user back, and load new form
    }
    else{
        //Tell them to try again, notify them.
    }

    document.getElementById("demo").innerHTML = getSalt; //Used for testing
    return true;

}

function validateLogin(hashPass){

}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js" ></script>
        
       

</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Log In Here</h2>
        <form action="javascript:;" onsubmit="return changeFormLogin()">
            <p>Email</p>
            <input id="username" type="email" name="username" placeholder="Enter Email" required>
            <p>Password</p>
            <input id="getPass" type="password" name="password" placeholder="••••••" required>
            <input type="submit" name="login" value="Sign In">
            <p id="demo"></p>
        </form>

        <a href="index.php"><input type="submit" name="login" value="Return home"></a>
        
    </div>
</body>
</html>

您可以做的事情,并不意味着您应该做,您正在使用GET获取哈希字符串,这是不好的做法。另外,您永远不要在客户端执行服务器端应执行的操作,例如对密码进行哈希处理。

切勿将此类内容用于生产目的,也不要像其他人在评论中所说,请看一下什么是SQL注入,并且永远不要相信用户在输入字段中键入的内容。