从 $_SESSION 发送变量，通过 AJAX 到 PHP 来更改密码，怎么做？

Question

我在我的网络应用程序中为已经登录的用户设置了一个选项来更改他们的密码（所以这不是忘记密码选项）。我有一个 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");
}

?>

Answer 1

问题缺少对修改密码环境的描述

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

$user_id = $_SESSION['user_id'];

因为用户已经登录，所以你必须已经在会话中的某个地方有他的 ID。您可以在成功登录后将其存储在会话中，并根据需要命名。

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

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

如今许多网站通过电子邮件发送 HTTP link 以访问 "change password" 页面。邮件中有一个特殊的link来重设密码； link 包括为用户提出的特定密码请求生成的临时 UUID（在您选择的时间范围内过期）。 UUID 与请求密码重置的用户的 user_id 一起存储在数据库中。

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

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

从 $_SESSION 发送变量，通过 AJAX 到 PHP 来更改密码，怎么做？

Sending variable from $_SESSION, through AJAX to PHP for password change, how to do it?

javascript

php

mysql

session-variables

user-variables