Аутентификация, PHP, HTML, JS. Вопрос по аутентификации на стороне сервера

Question

Доброго времени суток!

Подскажите, пожалуйста: есть задание по визуализации погодных данных. Необходимо было выполнить добавление возможности аутентификации.

При проверке был получен комментарий, что необходимо, чтобы аунтентификация осуществлялась на стороне сервера (в JS-коде нельзя светить пароль). Хотелось бы услышать мнение:

"Светится" ли он тут где-нибудь сейчас?
И если да, как это можно исправить?

Я новичок во всем этом, поэтому заранее большое спасибо за любую помощь! :)

Поправленный код прикладываю ниже (в данном случае интересует форма authForm и функция authenticate):

HTML-файл

<html lang="ru">
<head>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></$
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel='stylesheet' href='https://cdn.datatables.net/1.11.5/css/jquery.data$
    <title>Погода</title>
 <style>
        #mainForm {
            display: none; /* Скрываем основную форму по умолчанию */
    </style>
</head>
<body>

<h1>Погодные данные</h1>
<form id="authForm">
    <h1>Аутентификация пользователя</h1>
    <label for="username">Логин:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required>
    <input type="button" value="Войти" id="loginButton">
</form>

<form id="mainForm">
    <label for="city">Выберите город:</label>
    <select name="city" id="city">
 <option value="ala_t">Алатырь</option>
//прочие варианты городов
  </select>
    <br><br>
    <label for="start_date">Дата начала:</label>
    <input type="date" id="start_date" name="start_date" required>
    <br>
    <label for="end_date">Дата окончания:</label>
    <input type="date" id="end_date" name="end_date" required>
    <br><br>
    <input type="button" value="Получить данные" id="searchButton">
    <table id='weatherTable'>
        <thead>
            <tr>
                <th>Дата</th>
                <th>Температура</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</form>

<script>

function authenticate() {
var username = $('#username').val();
var password = $('#password').val();

        $.ajax({
            method: 'POST',
            url: "auth.php",
            data: { username: username, password: password },
            dataType: 'json',
            success: function(response) {
                if (response.authenticated) {
                    // Пользователь аутентифицирован, отображаем основную форму
                    $('#authForm').hide();
                    $('#mainForm').show();
                } else {
                    alert('Неверный логин или пароль');
                }
            }
        });
    }

function sendRequest() {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    var city = $('#city').val();

    $.ajax({
        method: 'POST',
        url: "main.php",
        data: { start_date: start_date, end_date: end_date, city: city },
        dataType: 'json',
        success: function(response) {
            var table = $('#weatherTable').DataTable();
                         success: function(response) {
            var table = $('#weatherTable').DataTable();
            table.clear().draw();

            response.data.forEach(function(entry) {
                table.row.add([
                    entry[0], // Дата
                    entry[1]  // Значение
                ]).draw();
            });

        }
    });
}

$(document).ready(function() {
  //  $('#loginButton').click(function() {
  //      authenticate();
  //  });

    $('#weatherTable').DataTable();

    $('#searchButton').click(function() {
        sendRequest();
    });
});
</script>
</body>
</html>

PHP-файл (auth.php):

session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];

    if ($username === 'admin' && $password === 'password') {
        $response['authenticated'] = true;
    } else {
        $response['authenticated'] = false;
    }

    echo json_encode($response);
}
?>

Answer 1

Запоминайте результат аутентификации в сессии.

auth.php:

<?
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];

    // findUser - функция, которая по таблице логинов и паролей (а лучше - хэшей паролей) ищет номер пользователя
    if (($userId = findUser($username, $password)) > 0) {
        $response['authenticated'] = true;
    } else {
        $response['authenticated'] = false;
    }
    $_SESSION['userId'] = $userId;

    echo json_encode($response);
}

main.php:

<?
session_start();
if ($_SESSION['userId'] <= 0) die();
// А здесь уже выдаём полезную информацию.
...

В основной файл вносим следующие изменения:

<?
session_start();
$userId = $_SESSION['userId'] ?? 0;
?>
<html lang="ru">
<head>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></$
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel='stylesheet' href='https://cdn.datatables.net/1.11.5/css/jquery.data$
    <title>Погода</title>
</head>
<body>

<h1>Погодные данные</h1>
<form id="authForm" style="display: <?= $userId != 0 ? 'none' : 'block' ?>">
    <h1>Аутентификация пользователя</h1>
    <label for="username">Логин:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required>
    <input type="button" value="Войти" id="loginButton">
</form>

<form id="mainForm" style="display: <?= $userId == 0 ? 'none' : 'block' ?>">
    <label for="city">Выберите город:</label>
    <select name="city" id="city">
 <option value="ala_t">Алатырь</option>
//прочие варианты городов

...

БЛОГ НА HUSL

Аутентификация, PHP, HTML, JS. Вопрос по аутентификации на стороне сервера

Ответы (1 шт):