javascript - 我正在使用 jquery/ajax 进行登录。发送作品和服务器端返回登录，但这失败了

Question

我已经用 PHP 创建了一个登录系统，但是，我还添加了两因素身份验证。我想无需刷新页面即可登录，这样在询问 2FA 代码时看起来会更好

我这样做的方法是通过 ajax 发送用户名和密码。我的 php 脚本然后检查这个然后它会回显登录或错误

这是我的javascript代码

$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'inc/auth.php',
            data: $(this).serialize(),
            dataType: 'text',
            success: function(data)
            {
                alert(data);
                if (data === 'login') {
                    window.location = '/user-page.php';
                }
                else {
                    alert('Invalid Credentials');
                }
            },
        });
    });
});

这工作正常，当我提醒数据时我得到“登录”(显然没有引号)但是它不会将我发送到 user-page.php，相反，它会给我无效的凭据警报。尽管 php 页面返回登录，javascript 就像“不!” 我究竟做错了什么？ 这是我的表格

<form class="form" id="login-form" name="login-form" method="post" role="form" accept-charset="UTF-8">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Gebruikersnaam</label>
    <input type="username" class="form-control" id="gebruikersnaam" name="gebruikersnaam" placeholder="gebruikersnaam" required>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Wachtwoord</label>
    <input type="password" class="form-control" id="wachtwoord" name="wachtwoord" placeholder="Password" required>
    <div class="help-block text-right"><a href="">Forget the password ?</a></div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">Sign in</button>
  </div>
</form>

我通过 <script src="auth.js"></script> 从这个页面运行 javascript .我也尝试将它直接放在脚本标签中，但也失败了。

Answer 1

这是为了测试目的 我相信您的 dataType 应该是 html 或 json

$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'inc/auth.php',
            data: $(this).serialize(),
            dataType: 'html',
            success: function(data)
            {
                alert(data);
                if (data == 'login') {
                    window.location = '/user-page.php';
                }
                if (data == 'failed') {
                    alert('Invalid Credentials');
                }

            },
        });
    });
});

在没有服务器逻辑的情况下 您的 php inc/auth.php 用于测试目的

//$gebruikersnaam= $_POST['gebruikersnaam'];
//$wachtwoord= $_POST['wachtwoord'];


$gebruikersnaam= 'nancy';
$wachtwoord= 'nancy123';

if($gebruikersnaam=='nancy' && $wachtwoord=='nancy123')
{
    echo "login";
}
else
{
    echo "failed";
}

至于SO Scholar在评论中提到的CSRF攻击。您将需要生成类似 md5 token 的东西，这些 token 将存储在 session 中。您现在将与每个请求一起发送，例如。在隐藏的表单中输入并验证它是否与服务器端的匹配。如果匹配允许登录，否则触发模拟

更新

$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'inc/auth.php',
            data: $(this).serialize(),
            dataType: 'JSON',
            success: function(data)
            {
                alert(data);
                if (data.login == 'success') {
                    window.location = '/user-page.php';
                }
                if (data.login == 'failed') {
                    alert('Invalid Credentials');
                }

            },
        });
    });
});

PHP

<?php
error_reporting(0);
$gebruikersnaam= 'nancy';
$wachtwoord= 'nancy123';

if($gebruikersnaam=='nancy' && $wachtwoord=='nancy123')
{
    $return_arr = array('login'=>'success');
}
else
{
    $return_arr = array('login'=>'failed');
}
echo json_encode($return_arr);