从$\u会话发送变量,通过ajax到php进行密码更改,怎么做?

mo49yndu  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(409)

我在我的web应用程序中为已经登录的用户设置了一个更改密码的选项(所以这不是一个忘记密码的选项)。我有一个html表单,然后外部js文件进行表单验证,如果输入的数据通过验证,通过ajax将输入的值发送到php脚本中,然后php脚本也验证数据,如果一切正常,更新数据库中的密码。我现在遇到的问题是,如何将user id从$\u session变量传递到php脚本,php脚本通过user 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");
}

?>
wpcxdonn

wpcxdonn1#

这个问题缺乏对密码更改环境的描述。
如果您要更改已通过身份验证的用户的密码,那么应该很简单 $user_id = $_SESSION['user_id']; 因为用户已经登录,所以您必须已经在会话中的某个位置有了他的id。在成功登录后,您可以将其存储在会话中,并为其命名。
您不需要将用户id传递给html表单,会话中已经有了它。
如果要更改未经身份验证的用户的密码,则情况完全不同。
现在许多网站通过电子邮件发送http链接来访问“更改密码”页面。在电子邮件中有一个特殊的链接来重置密码;该链接包括为用户所做的特定密码请求生成的临时uuid(在您选择的时间段内过期)。uuid与请求密码重置的用户的用户id一起存储在db中。
当用户单击链接时,该链接将被发送到接收uuid的页面。由于有了uuid,您可以检索请求密码重置的用户\u id并执行该操作,在密码重置后立即删除uuid。
当然,也有其他方法来实现密码重置机制,但是,这是网络上最简单、最常见的方法。

相关问题