0

我正在我的 Web 应用程序中为已经登录的用户更改密码（因此这不是忘记密码选项）。我有一个 HTML 表单，然后是用于表单验证的外部 JS 文件，如果输入的数据通过验证，则通过 AJAX 将输入的值发送到 PHP 脚本，然后验证数据，如果一切正常，更新数据库中的密码。我现在遇到的问题是如何将用户 ID 从 $_SESSION 变量传递到 PHP 脚本，该脚本通过用户 ID 在用户数据库中找到该行并更改密码。我在互联网上搜索，我没有找到一个很好的答案来解决我的问题。我试图避免<input type="hidden" value="<?php echo $_SESSION["userid"]?>">方法，因为它缺乏安全性。

这是我的脚本：

HTML

<?php 
    include_once "./includes/header.php";
?>

<!-- MAIN PAGE CONTENT -->

    <main>
        <div class="main-content">
            <div class="page-title">
                <h1>Change password</h1>
            </div>
            <div class="page-content">
                <div class="page-subcontent-wrapper">
                    <div class="page-subcontent-section">
                        <form id="js-change-password-form" class="change-user-password-wrapper" method="POST" action="" autocomplete="off" accept-charset="UTF-8" novalidate>
                            <div class="change-user-password">
                                <div class="change-user-password-element">
                                    <label for="js-change-password-input">New password:</label>
                                    <div id="js-change-password-display" class="password-display hide-password"></div>
                                </div>
                                <div class="change-password-input-wrapper">
                                    <input id="js-change-password-input" type="password">
                                    <div id="js-change-password-message" class="validation-message-div"></div>
                                </div>
                            </div>
                            <div class="change-user-password">
                                <div class="change-user-password-element">
                                    <label for="js-change-password-confirm-input">Confirm password:</label>
                                    <div id="js-change-password-confirm-display" class="password-display hide-password"></div>
                                </div>
                                <div class="change-password-input-wrapper">
                                    <input id="js-change-password-confirm-input" type="password">
                                    <div id="js-change-password-confirm-message" class="validation-message-div"></div>
                                </div>
                            </div>
                            <div class="change-user-password-button">
                                <button id="js-change-password-button" type="submit">Submit</button>
                            </div>
                        </form>
                        <div class="change-user-password">
                            <div class="change-user-password-message-success">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="./js/change_password.js">
        </script>
    </main>

<?php 
    include_once "./includes/footer.php";
?>

注意：header.php在session_start();其顶部。

Javascript/JQuery

$(document).ready(function(){

    // Password validators

    $("#js-change-password-form").submit(function(e){

        var changePasswordValue = $("#js-change-password-input").val();
        var changePasswordValueLength = changePasswordValue.length;
        var changePasswordConfirmValue = $("#js-change-password-confirm-input").val();
        var userId = $("#js-user-id-input").val();

        e.preventDefault();
        if (changePasswordValueLength < 8) {
            var errorMessage = "<div class='error-message error-pointer'><p>Password should have at least 8 characters.</p></div>";
            $("#js-change-password-message").html(errorMessage);
            $(".validation-message-div").css("display", "flex");
            $("#js-change-password-input").css("border-color", "rgb(190,115,110)");
        } else {
            var errorMessage = "<div class='success-message'><p>Looking good!</p></div>";
            $("#js-change-password-message").html(errorMessage);
            $(".validation-message-div").css("display", "flex");
            $("#js-change-password-input").css("border-color", "rgb(95,160,95)");
            noErrorChangePassword = true;
        }

        if (changePasswordValueLength < 8) {
            $("#js-change-password-confirm-message").css("display", "none");
            $("#js-change-password-confirm-message").empty();
            $("#js-change-password-confirm-input").css("border-color", "rgb(225,225,225)");
        } else {
            if (changePasswordConfirmValue != changePasswordValue) {
                var errorMessage = "<div class='error-message error-pointer'><p>Password doesn't match.</p></div>";
                $("#js-change-password-confirm-message").html(errorMessage);
                $(".validation-message-div").css("display", "flex");
                $("#js-change-password-confirm-input").css("border-color", "rgb(190,115,110)");
            } else {
                var errorMessage = "<div class='success-message'><p>Password match.</p></div>";
                $("#js-change-password-confirm-message").html(errorMessage);
                $(".validation-message-div").css("display", "flex");
                $("#js-change-password-confirm-input").css("border-color", "rgb(95,160,95)");
                noErrorChangePasswordConfirm = true;
            }
        }

        if (noErrorChangePassword == true && noErrorChangePasswordConfirm == true) {
            $("#js-change-password-form").find("input, select, button").prop("disabled", true);
            setTimeout(function(){
                $("#js-change-password-form").fadeOut(750);
                setTimeout(function(){
                    $(".change-user-password-message-success").fadeIn(750);
                    setTimeout(function(){
                        window.location.replace('./profile.php');
                    }, 5000);
                }, 750);
            }, 500);
            $.ajax({
                url : "./includes/change_password.script.php",
                method : "POST",
                data : {
                    changePasswordValue : changePasswordValue,
                    changePasswordConfirmValue : changePasswordConfirmValue,
                    /* userId : userId, ? */
                    submit : 1
                },
                success : function(data) {
                  $(".change-user-password-message-success").html(data);
                }
            });
        }

    });

/* ---------------------------------------------------------
    -------------------- PASSWORD DISPLAY ------------------
    ----------------------------------------------------- */

    /* -------- Password Display Hidden -------- */

    $("#js-change-password-display").click(function(){
        var fieldType = $("#js-change-password-input").attr("type");
        if (fieldType == "password") {
            $("#js-change-password-input").attr("type", "text");
            $("#js-change-password-display").removeClass("hide-password").addClass("show-password");
        } else {
            $("#js-change-password-input").attr("type", "password");
            $("#js-change-password-display").removeClass("show-password").addClass("hide-password");
        }
    });

    /* -------- Confirm Password Display Hidden -------- */

    $("#js-change-password-confirm-display").click(function(){
        var fieldType = $("#js-change-password-confirm-input").attr("type");
        if (fieldType == "password") {
            $("#js-change-password-confirm-input").attr("type", "text");
            $("#js-change-password-confirm-display").removeClass("hide-password").addClass("show-password");
        } else {
            $("#js-change-password-confirm-input").attr("type", "password");
            $("#js-change-password-confirm-display").removeClass("show-password").addClass("hide-password");
        }
    });

});

PHP

<?php 
if (isset($_POST["submit"])) {
    include_once "dbconn.script.php";

    $user_id = /* ? */;
    $changePasswordValue = $_POST["changePasswordValue"];
    $changePasswordConfirmValue = $_POST["changePasswordConfirmValue"];
    $changePasswordValueLength = strlen($changePasswordValue);

    if ($changePasswordValueLength < 8) {
        echo "<p>Password should have at least 8 characters.<p>";
    } else {
        if ($changePasswordConfirmValue != $changePasswordValue) {
            echo "<p>Passwords you entered does not match.</p>";
        } else {
            $hashedChangePassword = password_hash(base64_encode(hash('sha384', $changePasswordValue, true)), PASSWORD_BCRYPT, ["cost" => 11]);
            $sql = "UPDATE hgs_users SET user_pw = ? WHERE user_id = ?";
            $stmt = mysqli_stmt_init($conn);
            if (!mysqli_stmt_prepare($stmt, $sql)) {
                echo "<p>SQL statement failed!</p>";
                exit();
            } else {
                mysqli_stmt_bind_param($stmt, "ss", $hashedChangePassword, $user_id);
                mysqli_stmt_execute($stmt);
                mysqli_stmt_close($stmt);
                echo "<p>Success!</p>";
            }
        }
    }
    mysqli_close($conn);
} else {
    header("Location: ../index.php");
}

?>
4

1 回答 1

1

该问题缺少对更改密码的环境的描述。

如果您要更改已通过身份验证的用户的密码，它应该很简单

$user_id = $_SESSION['user_id'];

因为用户已经登录，所以您必须已经在会话中的某个位置拥有他的 ID。成功登录后，您可以将其存储在会话中，随意命名。

您不需要将用户 ID 传递给 HTML 表单，您已经在会话中拥有它。

如果您要更改未经身份验证的用户的密码，那就完全不同了。

如今，许多网站通过电子邮件发送 HTTP 链接以访问“更改密码”页面。在电子邮件中有一个特殊的链接来重置密码；该链接包括为用户提出的特定密码请求生成的临时 UUID（在您选择的时间范围内到期）。UUID 与请求密码重置的用户的 user_id 一起存储在 DB 中。

当用户点击链接时，会发送到您接收 UUID 的页面。多亏了 UUID，您可以检索请求重置密码的 user_id 并完成这项工作，在重置密码后立即删除 UUID。

当然，还有其他方法可以实现密码重置机制，但恕我直言，这是网络上最直接和最常见的方法。

于 2018-11-04T00:21:15.357 回答