-1

Я хочу сделать на сайте простую форму авторизации, которая будет при нажатии на кнопку, сравнивать данные введённые в 2 формочки <input>(пароль и логин) с таблицей из базы данных MySQL .
Подскажите пожалуйста, что мне изучать ?
Для программирования кнопки, использую Javascript, для подключения к базе данных MySQL и получения данных из таблицы использую php.
Не могу понять как связать php и javascript, пробовал читать про использование AJAX и Node.js, но там все запутанно и не понятно.

php: connect.php:

<?php
    $host = ' ';
    $user = ' ';
    $pass = ' '; //
    $db_name = ' ';   // Имя базы данных

    $link = mysqli_connect($host, $user, $pass, $db_name); // Соединяемся с базой

    $login = mysqli_query($link, 'SELECT username FROM `users`');
    $password = mysqli_query($link, 'SELECT pass FROM `users`');

    
?>

javascript: script.js:

function onclickLogin() {
    var login = document.getElementById('login')
    var password = document.getElementById('password')
    
    
}

html: index.html:

<head>

      <script src="js/script.js"></script>

</head>

<form method="get" action="connect.php">
      <div class="panel" style="display: block;">
          <h1>Авторизация</h1>
          <input id="login" class="login" name="logim" type="text" placeholder="Введите логин">
          <input id="password" name="password" class="password" type="password" placeholder="Введите пароль">
          <button type="sumbit" name="submit" onclick="onclickLogin()" class="loginButton">Авторизоваться</button>
      </div>
</form>
1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Grundy
    23 окт 2022 в 17:04

2 ответа 2

1

Мне кажется, что информации по подобным задачам полно с хорошими примерами, сделать это можно несколькими способами, можно через ajax можно через submit формы.

Опишу вкратце, что нужно делать во втором случае:

  1. Создаем скрипт php, к примеру auth.php, он должен возвращать страницу с формой и скриптом, например для валидации полей перед отправкой формы, а так же будет возвращать защищенное содержимое, либо делать редирект на другие защищенные страницы.

  2. В теге формы авторизации в аттрибуте "action" нужно указать auth.php и выбрать method="post" в качестве метода отправки (method предпочтительней все делать через post - у него меньше ограничений и он безопаснее)

  3. при нажатии submit можно сделать предварительную валидацию, для этого необходимо передать функцию обработчик атрибуту формы onsubmit таким образом: onsubmit="submitHandler(event)" именно указание event в скобках позволит сделать event.preventDefault() что пригодится для отмены отправки формы и предотвратит перезагрузку страницы с потерей уже введенных данных.

  4. Если проверка пройдена идет оправка формы где скрипт auth.php вызывается снова, проверяя в самом начале наличие переменной в сессии например $_SESSION['user_id'] при наличиии которой можно смело отрисовывать защищенный контент, или делать редирект на другие страницы.

  5. При отстутсвии переменной сессии мы должны извлечь поля переданные методом post в соответсвующем массиве $_POST, сделать запрос в базу данных, при успешном прохождении проверок можем вывести защищенный контент страницы или сделать редирект на другие страницы, заодно задавая $_SESSION['user_id'], чтобы при перезагрузке страницы не выводить форму авторизации снова.

  6. Если авторизация была провалена выводим снова форму для авторизации.

Перед тем как вы соберетесь хранить пароли в БД советую ознакомиться c Безопасное хеширование паролей

файл ниже демонстрирует:

  • валидацию полей до отправки на сервер (на заполнение и т.п.)
  • авторизацию (для входа пароль и логин admin)
  • разлогирование

код прокомментирован

файл auth.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<?php
  php session_start(); // начинаем сессию (чтобы использовать массив сессии) 
  // функция выводит содержимое страницы для авторизовавшися пользователей
  function getAuthContent(){
    echo '<h1>Авторизация пройдена успешно</h1>';
    $form = <<<EOD
      <form id="auth" method="post" action="auth.php">
        <input type="text" name="logout" value="logout" hidden>
        <button type="sumbit">Выйти</button>
      </form>
    EOD;
    echo "$form";  
    exit(); 
  }

  // разлогирование
  if (isset($_POST['logout'])){ 
    unset($_SESSION['user_id']); 
  }
    
  // если есть id пользователь уже залогинился  
  if (isset($_SESSION['user_id'])){ 
    getAuthContent(); 
  }  

  // проверка на валидность логина и пароля
  // тут самое время использовать базу данных
  if (isset($_POST['login']) && isset($_POST['password'] )){
    $user = $_POST['login'];
    $pass = $_POST['password']; 
    if ($user == 'admin' && $pass == 'admin'){
      // запоминаем id пользователя или что-то другое
      $_SESSION['user_id'] = 42; 
      getAuthContent();

    }
  }
  // иначе выводим форму авторизации
    $form = <<<EOD
      <script>
        function onclickLogin(event) {
            const  login = document.getElementById('login')
            const  password = document.getElementById('password')
            const  form = document.getElementById('auth')
            if ( login.value.trim() === '' || password.value.trim() === ''){
              event.preventDefault()
              alert('Заполните все поля!')
            }
        }
      </script>
      <form id="auth" method="post" action="auth.php" onsubmit="onclickLogin(event)">
        <div class="panel" style="display: block;">
          <h1>Авторизация</h1>
          <input id="login" class="login" name="login" type="text" placeholder="Введите логин">
          <input id="password" name="password" class="password" type="password" placeholder="Введите пароль">
          <button type="sumbit">Авторизоваться</button>
        </div>
      </form>
    EOD;
    echo "$form";
?>
</body>
</html>
4
  • 1
    Да, зачем нам сессии, если всё можно хранить в кукисах.
    – InDevX
    23 окт 2022 в 12:39
  • Что значит рисовать форму авторизации? 23 окт 2022 в 12:40
  • @NastyStuffy echo "<form>" 23 окт 2022 в 12:42
  • @InDevX, можно и сессиями, было бы желание) 23 окт 2022 в 12:44
1

При объявлении формы на странице мы указываем вот такие вот штуки, метод, которым будет отправляться форма либо get либо post, и action - место куда будет вся эта форма передаваться <form method = "get/post" action ="php файл в котором будет происходить обработка данных и работа с бд"> Вот мы форму заполнили и отправили. Затем в файле, который мы указали в action, в зависимости от метода, который мы указали, мы достаем наши данные из массива(либо $_GET либо $_POST) и что-то с ними делаем(проверяем, сохраняем в бд и.т.д)

2
  • А если у меня отдельная кнопка которая проверяет input с помощью js скрипта, мне создавать форму для кнопки или для всего div (в div находится: кнопка, заголовок, и input`ы ? 23 окт 2022 в 13:18
  • Вот так вот форма должна выглядеть <form method ="" action = ""> <input> <input> <input type="submit">//кнопка </form>
    – evgeni2306
    23 окт 2022 в 17:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.