Я использую 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>

Я запускаю javascript с этой страницы через <script src="auth.js"></script>. Я также попытался поместить его прямо в теги скрипта, который тоже не удался.

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 FOR Цель тестирования

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


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

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

Что касается CSRF-атаки, упомянутой SO Scholar в комментарии. вам нужно сгенерировать что-то вроде токена md5, которое будет храниться в сеансе. Теперь вы будете отправлять его с каждым запросом, например. в скрытой форме ввода и убедитесь, что он совпадает с тем на стороне сервера. если совпадение разрешает вход в систему, в противном случае инициирует олицетворение

Обновления

$(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);