Создание формы регистрации и авторизации

Создание формы регистрации и авторизации

В этой статье вы узнаете, как создать форму регистрации и авторизации, используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернета магазина и для социальных сетей (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.

Если у Вас сайт на локальном компьютере, то я надеюсь, что у Вас уже установлен и запущен локальный сервер. Без него ничего работать не будет.

Создание таблицы в Базе Данных

Для того чтобы реализовать регистрацию пользователей, в первую очередь нам нужна База Данных. Если она у Вас уже есть, то замечательно, иначе, Вам нужно её создавать. В статье Создание базы данных mysql в phpmyadmin, я подробно объясняю, как сделать это.

И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу users в которой будем добавлять наших зарегистрированных пользователей.

Как создавать таблицу в БД, я также объяснил в статье Создание базы данных mysql в phpmyadmin. Перед тем как создать таблицу, нам необходимо определить какие поля она будет содержать. Эти поля будут соответствовать полям из формы регистрации.

Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу users с такими полями:

  • id - Идентификатор. Поле id должно быть у каждой таблицы из БД.
  • first_name - Для сохранений имени.
  • last_name - Для сохранений фамилии.
  • email - Для сохранений почтового адреса. E-mail мы будем использовать в качестве логина, поэтому это поле должна быть уникальной, то есть иметь индекс UNIQUE.
  • email_status - Поле для указания, подтверждена ли почта или нет. Если почта подтверждена, то оно будет иметь значение 1, иначе значение 0.
  • password - Для сохранений пароля.
Стурктура таблицы users

Если Вы хотите чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.

Всё, наша таблица users готова. Переходим к следующему этапу.

Подключение к Базе Данных

Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.

В папке нашего сайта, создаём файл с именем dbconnect.php, и в нём пишем следующий скрипт:

    <?php
        // Указываем кодировку
        header('Content-Type: text/html; charset=utf-8');

        $server = "localhost"; /* имя хоста (уточняется у провайдера), если работаем на локальном сервере, то указываем localhost */
        $username = "имя_пользователя_бд"; /* Имя пользователя БД */
        $password = "пароль_пользователя_бд"; /* Пароль пользователя, если у пользователя нет пароля то, оставляем пустым */
        $database = "имя_базы_данных"; /* Имя базы данных, которую создали */
        
        // Подключение к базе данный через MySQLi
        $mysqli = new mysqli($server, $username, $password, $database);

        // Проверяем, успешность соединения. 
        if (mysqli_connect_errno()) { 
            echo "<p><strong>Ошибка подключения к БД</strong>. Описание ошибки: ".mysqli_connect_error()."</p>";
            exit(); 
        }

        // Устанавливаем кодировку подключения
        $mysqli->set_charset('utf8');

        //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта
        $address_site = "http://testsite.local";
    ?>
    

Этот файл dbconnect.php нужно будет подключить к обработчикам форм.

Обратите внимание на переменную $address_site, здесь я указали название моего тестового сайта, над которым буду работать. Вы соответственно, укажите название Вашего сайта.

Структура сайта

Теперь давайте разберёмся с HTML структурой нашего сайта.

Шапку и подвал сайта вынесем в отдельные файлы, header.php и footer.php. Их будем подключать на всех страницах. А именно на главной (файл index.php), на страницу с формой регистрации (файл form_register.php) и на страницу с формой авторизации (файл form_auth.php).

Блок с нашими ссылками, регистрация и авторизация, добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на страницу с формой регистрации (файл form_register.php) а другая на страницу с формой авторизации (файл form_auth.php).

Содержимое файла header.php:

        <?php
            //Запускаем сессию
            session_start();
        ?>

        <!DOCTYPE html>
        <html>
            <head>
                Название нашего сайта
                
                <link rel="stylesheet" type="text/css" href="css/styles.css">
            </head>
            <body>

                
    

Содержимое файла footer.php:

                
            </body>
        </html>
    

Подключение файлов header.php и footer.php будем делать с помощью функции require_once("путь_к_файлу").

И так, давайте подключим эти файлы к главному файлу нашего сайта index.php.

        <?php
            //Подключение шапки
            require_once("header.php");
        ?>

        

Контент главной страницы

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<?php //Подключение подвала require_once("footer.php"); ?>

Для оформления вида страницы, в шапке (файл header.php) подключили файл стилей css/styles.css. Код данного файла сейчас нас не особо интересует, поэтому нет смысла его здесь показывать. Вы сможете увидеть его открыв этот файл css/styles.css, из архива с материалами данной статьи.

В итоге, главная страница, у нас выглядит так:

Структура главной страницы

Конечно, у Вас на сайте может быть совсем другая структура, но это для нас сейчас не важно. Главное, чтобы присутствовали ссылки (кнопки) регистрации и авторизации.

Форма регистрации

Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле form_register.php.

Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы users и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.

На сервере, в результате обработки формы регистрации, могут возникнуть различные ошибки, из-за которых пользователь не сможет зарегистрироваться. Поэтому для того чтобы пользователь понимал почему не проходит регистрация, необходимо вывести ему сообщения об этих ошибках.

Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.

И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера адрес_сайта/form_register.php, то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.

В общем, код файла form_register.php у нас получился таким:

        <?php
            //Подключение шапки
            require_once("header.php");
        ?>
        
        
<?php //Если в сессии существуют сообщения об ошибках, то выводим их if(isset($_SESSION["error_messages"]) && !empty($_SESSION["error_messages"])){ echo $_SESSION["error_messages"]; //Уничтожаем чтобы не выводились заново при обновлении страницы unset($_SESSION["error_messages"]); } //Если в сессии существуют радостные сообщения, то выводим их if(isset($_SESSION["success_messages"]) && !empty($_SESSION["success_messages"])){ echo $_SESSION["success_messages"]; //Уничтожаем чтобы не выводились заново при обновлении страницы unset($_SESSION["success_messages"]); } ?>
<?php //Проверяем, если пользователь не авторизован, то выводим форму регистрации, //иначе выводим сообщение о том, что он уже зарегистрирован if(!isset($_SESSION["email"]) && !isset($_SESSION["password"])){ ?>

Форма регистрации

Имя:
Фамилия:
Email:
Пароль:
Введите капчу:

<img src="captcha.php" alt="Капча" />

<?php }else{ ?>

Вы уже зарегистрированы

<?php } //Подключение подвала require_once("footer.php"); ?>

В браузере, страница с формой регистрации выглядит так:

Форма регистрации

С помощью атрибута required, мы сделали все поля обязательными к заполнению.

Обратите внимание на код формы регистрации где выводится капча:

        <img src="captcha.php" alt="Вывод капчи" /> 

Мы в значение атрибута src для изображения, указали путь к файлу captcha.php, который генерирует данную капчу.

Посмотрим на код файла captcha.php:

        <?php
            session_start();
            // Генерируем случайное число.
            $rand = mt_rand(1000, 9999);

            // Сохраняем значение переменной  $rand ( капчи ) в сессию
            $_SESSION["rand"] = $rand;

            //создаём новое черно-белое изображение
            $im = imageCreateTrueColor(90,50);

            // Указываем белый цвет для текста
            $c = imageColorAllocate($im, 255, 255, 255);

            // Записываем полученное случайное число на изображение
            imageTtfText($im, 20, -10, 10, 30, $c, "fonts/verdana.ttf", $rand);

            header("Content-type: image/png");

            // Выводим изображение
            imagePng($im);

            //Освобождаем ресурсы
            imageDestroy($im);
        ?>
    

Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.

Внутри функции imageTtfText(), указан путь к шрифту verdana.ttf. Так вот для корректной работы капчи, мы должны создать папку fonts, и поместить туда файл шрифта verdana.ttf. Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи.

С HTML структурой мы закончили, пора двигаться дальше.

Проверка email на валидность с помощью jQuery

Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента ( с помощью JavaScript, jQuery), так и на стороне сервера.

Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.

Для данного поля input, мы задали тип email ( type="email" ), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута type с email на text, и всё, наша проверка будет уже недействительна.

Изменение типа поля input с помощью инспектора кода

И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.

Для подключения библиотеки jQuery, в файле header.php между тегами <head></head>, перед закрывающего тега </head>, добавляем эту строчку:

        
    

Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.

        
    

С помощью данного скрипта, мы проверяем введённого почтового адреса на валидность. Если пользователь ввёл неправильный Email, то мы выводим ему ошибку об этом и дезактивируем кнопку отправки формы. Если всё хорошо, то мы убираем ошибку и активируем кнопку отправки формы.

И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.

Регистрация пользователя

Форму мы отправляем на обработку файлу register.php, через метод POST. Название данного файла обработчика, указано в значение атрибута action. А метод отправки указано в значение атрибута method.

Открываем этот файл register.php и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл dbconnect.php (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки error_messages и success_messages в глобальном массиве сессии. В error_mesages будем записывать все сообщения об ошибках возникающие при обработке формы, а в succes_messages, будем записывать радостные сообщения.

    <?php
        //Запускаем сессию
        session_start();

        //Добавляем файл подключения к БД
        require_once("dbconnect.php");

        //Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы.
        $_SESSION["error_messages"] = '';

        //Объявляем ячейку для добавления успешных сообщений
        $_SESSION["success_messages"] = '';
    ?>
    

Перед тем как продолжить, мы должны проверить, была ли вообще отправлена форма. Злоумышленник, может посмотреть на значение атрибута action из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: http://арес_сайта/register.php

Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки "Зарегистрироваться" из формы. Таким образом мы проверяем была ли нажата кнопка "Зарегистрироваться" или нет.

Если злоумышленник попытается перейти напрямую в этот файл, то он получить сообщение об ошибке. Напоминаю, что переменная $address_site содержит название сайта и оно было объявлено в файле dbconnect.php.

    <?php
        /*
            Проверяем была ли отправлена форма, то есть была ли нажата кнопка зарегистрироваться. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую.
        */
        if(isset($_POST["btn_submit_register"]) && !empty($_POST["btn_submit_register"])){

            // (1) Место для следующего куска кода
        
        }else{

            exit("<p><strong>Ошибка!</strong> Вы зашли на эту страницу напрямую, поэтому нет данных для обработки. Вы можете перейти на <a href=".$address_site."> главную страницу </a>.</p>");
        }
    ?>
    

Далее, нам необходимо проверить введённую капчу. То есть сравнивать полученное значение от пользователя со значением которая есть в сессии.

Значение капчи в сессии было добавлено при её генерации, в файле captcha.php. Для напоминания покажу ещё раз этот кусок кода из файла captcha.php, где добавляется значение капчи в сессию:

    <?php
        session_start();
        // Генерируем случайное число.
        $rand = mt_rand(1000, 9999);

        // Сохраняем значение переменной  $rand ( капчи ) в сессию
        $_SESSION["rand"] = $rand;
    ?>
    

Теперь приступим к самой проверке. В файле register.php, внутри блока if, где проверяем была ли нажата кнопка "Зарегистрироваться", а точнее где указан комментарий " // (1) Место для следующего куска кода" пишем:

        //Проверяем полученную капчу
        //Обрезаем пробелы с начала и с конца строки
        $captcha = trim($_POST["captcha"]);

        if(isset($_POST["captcha"]) && !empty($captcha)){

            //Сравниваем полученное значение с значением из сессии. 
            if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){
                
                // Если капча не верна, то возвращаем пользователя на страницу регистрации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу.
                $error_message = "<p class='mesage_error'><strong>Ошибка!</strong> Вы ввели неправильную капчу </p>";

                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] = $error_message;

                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");

                //Останавливаем скрипт
                exit();
            }

            // (2) Место для следующего куска кода

        }else{
            //Если капча не передана либо оно является пустой
            exit("<p><strong>Ошибка!</strong> Отсутствует проверечный код, то есть код капчи. Вы можете перейти на <a href=".$address_site."> главную страницу </a>.</p>");
        }
    

Далее, нам нужно обрабатывать полученные данные, из массива POST. Первым делом, нам нужно проверить содержимое глобального массива POST, то есть находится ли там ячейки, имена которых соответствуют именам полей input из нашей формы.

Если ячейка существует, то обрезаем пробелы с начала и с конца строки из этой ячейки, иначе, перенаправляем пользователя обратно на страницу с формой регистрации.

Далее, после того как обрезали пробелы, добавляем строку в переменную и проверяем эту переменную на пустоту, если она не является пустой, то идём дальше, иначе перенаправляем пользователя обратно на страницу с формой регистрации.

Этот код вставляем в указанное место "// (2) Место для следующего куска кода".

        /* Проверяем если в глобальном массиве $_POST существуют данные отправленные из формы и заключаем переданные данные в обычные переменные.*/

        if(isset($_POST["first_name"])){
            
            //Обрезаем пробелы с начала и с конца строки
            $first_name = trim($_POST["first_name"]);

            //Проверяем переменную на пустоту
            if(!empty($first_name)){
                // Для безопасности, преобразуем специальные символы в HTML-сущности
                $first_name = htmlspecialchars($first_name, ENT_QUOTES);
            }else{
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error'>Укажите Ваше имя</p>";

                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");

                //Останавливаем скрипт
                exit();
            }

            
        }else{
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error'>Отсутствует поле с именем</p>";

            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_register.php");

            //Останавливаем скрипт
            exit();
        }

        
        if(isset($_POST["last_name"])){

            //Обрезаем пробелы с начала и с конца строки
            $last_name = trim($_POST["last_name"]);

            if(!empty($last_name)){
                // Для безопасности, преобразуем специальные символы в HTML-сущности
                $last_name = htmlspecialchars($last_name, ENT_QUOTES);
            }else{

                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error'>Укажите Вашу фамилию</p>";
                
                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");

                //Останавливаем  скрипт
                exit();
            }

            
        }else{

            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error'>Отсутствует поле с фамилией</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_register.php");

            //Останавливаем  скрипт
            exit();
        }

        
        if(isset($_POST["email"])){

            //Обрезаем пробелы с начала и с конца строки
            $email = trim($_POST["email"]);

            if(!empty($email)){

                $email = htmlspecialchars($email, ENT_QUOTES);

                // (3) Место кода для проверки формата почтового адреса и его уникальности

            }else{
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error'>Укажите Ваш email</p>";
                
                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");

                //Останавливаем  скрипт
                exit();
            }

        }else{
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error'>Отсутствует поле для ввода Email</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_register.php");

            //Останавливаем  скрипт
            exit();
        }

        
        if(isset($_POST["password"])){

            //Обрезаем пробелы с начала и с конца строки
            $password = trim($_POST["password"]);

            if(!empty($password)){
                $password = htmlspecialchars($password, ENT_QUOTES);

                //Шифруем папроль
                $password = md5($password."top_secret"); 
            }else{
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error'>Укажите Ваш пароль</p>";
                
                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");

                //Останавливаем  скрипт
                exit();
            }

        }else{
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error'>Отсутствует поле для ввода пароля</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_register.php");

            //Останавливаем  скрипт
            exit();
        }

        // (4) Место для кода добавления пользователя в БД
    

Особенную важность имеет поле email. Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.

В указанном месте "// (3) Место кода для проверки формата почтового адреса и его уникальности" добавляем следующий код:

        //Проверяем формат полученного почтового адреса с помощью регулярного выражения
        $reg_email = "/^[a-z0-9][a-z0-9\._-]*[a-z0-9]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+/i";

        //Если формат полученного почтового адреса не соответствует регулярному выражению
        if( !preg_match($reg_email, $email)){
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error' >Вы ввели неправельный email</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_register.php");

            //Останавливаем  скрипт
            exit();
        }

        //Проверяем нет ли уже такого адреса в БД.
        $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`='".$email."'");
        
        //Если кол-во полученных строк ровно единице, значит пользователь с таким почтовым адресом уже зарегистрирован
        if($result_query->num_rows == 1){

            //Если полученный результат не равен false
            if(($row = $result_query->fetch_assoc()) != false){
                
                    // Сохраняем в сессию сообщение об ошибке. 
                    $_SESSION["error_messages"] .= "<p class='mesage_error' >Пользователь с таким почтовым адресом уже зарегистрирован</p>";
                    
                    //Возвращаем пользователя на страницу регистрации
                    header("HTTP/1.1 301 Moved Permanently");
                    header("Location: ".$address_site."/form_register.php");
                
            }else{
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error' >Ошибка в запросе к БД</p>";
                
                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");
            }

            /* закрытие выборки */
            $result_query->close();

            //Останавливаем  скрипт
            exit();
        }

        /* закрытие выборки */
        $result_query->close();
    

И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте " // (4) Место для кода добавления пользователя в БД " добавляем следующий код:

        //Запрос на добавления пользователя в БД
        $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ('".$first_name."', '".$last_name."', '".$email."', '".$password."')");

        if(!$result_query_insert){
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error' >Ошибка запроса на добавления пользователя в БД</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_register.php");

            //Останавливаем  скрипт
            exit();
        }else{

            $_SESSION["success_messages"] = "<p class='success_message'>Регистрация прошла успешно!!! <br />Теперь Вы можете авторизоваться используя Ваш логин и пароль.</p>";

            //Отправляем пользователя на страницу авторизации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_auth.php");
        }

        /* Завершение запроса */
        $result_query_insert->close();

        //Закрываем подключение к БД
        $mysqli->close();
    

Если в запросе на добавления пользователя в БД произошла ошибка, мы добавляем сообщение об этой ошибке в сессию и возвращаем пользователя на страницу регистрации.

Иначе, если все прошло хорошо, в сессию мы также добавляем сообщение, но уже более приятна, а именно говорим пользователю что регистрация прошла успешно. И перенаправляем его уже на страницу с формой авторизации.

С регистрацией мы закончили. Двигаемся дальше.

Форма авторизации

Форма авторизации находится у нас в файле form_auth.php. Она имеет поля для ввода почтового адреса, пароля и капчи.

Скрипт для проверки формата почтового адреса и длины пароля находится в файле header.php, поэтому он будет действовать и на поля из этой формы.

Запуск сессии также происходит в файле header.php, поэтому в файле form_auth.php сессию запускать не нужно, потому что получим ошибку.

Код формы авторизации ( файл form_auth.php ):

        <?php
            //Подключение шапки
            require_once("header.php");
        ?>

        
        
<?php if(isset($_SESSION["error_messages"]) && !empty($_SESSION["error_messages"])){ echo $_SESSION["error_messages"]; //Уничтожаем чтобы не появилось заново при обновлении страницы unset($_SESSION["error_messages"]); } if(isset($_SESSION["success_messages"]) && !empty($_SESSION["success_messages"])){ echo $_SESSION["success_messages"]; //Уничтожаем чтобы не появилось заново при обновлении страницы unset($_SESSION["success_messages"]); } ?>
<?php //Проверяем, если пользователь не авторизован, то выводим форму авторизации, //иначе выводим сообщение о том, что он уже авторизован if(!isset($_SESSION["email"]) && !isset($_SESSION["password"])){ ?>

Форма авторизации

Email:
Пароль:
Введите капчу:

<img src="captcha.php" alt="Изображение капчи" />

<?php }else{ ?>

Вы уже авторизованы

<?php } ?> <?php //Подключение подвала require_once("footer.php"); ?>

В браузере, форма авторизации выглядит следующем образом:

Форма авторизации

Как я уже сказал, скрипт проверки формата почтового адреса и длины пароля здесь также действует. Поэтому если пользователь введёт неправильный почтовый адрес или короткий пароль, то он сразу же получить сообщение об ошибке. А кнопка войти станет не активной.

Проверка формы авторизации

После устранения ошибок кнопка войти становится активной, и пользователь сможет отправить форму на сервер, где она будет обрабатываться.

Авторизация пользователя

В значение атрибута action у форы авторизации указан файл auth.php, это значит, что форма будет обрабатываться именно в этом файле.

И так, открываем файл auth.php и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл dbconnect.php для соединения с БД.

    <?php
            //Запускаем сессию
            session_start();

            //Добавляем файл подключения к БД
            require_once("dbconnect.php");
    

Дальше нам нужно объявить ячейки для хранения сообщений в глобальном массиве $_SESSION.

        //Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы.
        $_SESSION["error_messages"] = '';

        //Объявляем ячейку для добавления успешных сообщений
        $_SESSION["success_messages"] = '';
    

Дальше нам нужно проверить была ли нажата кнопка отправки формы (кнопка войти). То есть проверяем не зашёл ли злоумышленник напрямую в файл auth.php.

        /*
            Проверяем была ли отправлена форма, то есть была ли нажата кнопка Войти. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую.
        */
        if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"])){

            //(1) Место для следующего куска кода

        }else{
            exit("<p><strong>Ошибка!</strong> Вы зашли на эту страницу напрямую, поэтому нет данных для обработки. Вы можете перейти на <a href=".$address_site."> главную страницу </a>.</p>");
        }
    

Дальше, в указанное место "//(1) Место для следующего куска кода", пишем код для проверки капчи.

        //Проверяем полученную капчу
        if(isset($_POST["captcha"])){

            //Обрезаем пробелы с начала и с конца строки
            $captcha = trim($_POST["captcha"]);

            if(!empty($captcha)){

                //Сравниваем полученное значение с значением из сессии. 
                if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){
                    
                    // Если капча не верна, то возвращаем пользователя на страницу авторизации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу.

                    $error_message = "<p class='mesage_error'><strong>Ошибка!</strong> Вы ввели неправильную капчу </p>";

                    // Сохраняем в сессию сообщение об ошибке. 
                    $_SESSION["error_messages"] = $error_message;

                    //Возвращаем пользователя на страницу авторизации
                    header("HTTP/1.1 301 Moved Permanently");
                    header("Location: ".$address_site."/form_auth.php");

                    //Останавливаем скрипт
                    exit();
                }

            }else{

                $error_message = "<p class='mesage_error'><strong>Ошибка!</strong> Поле для ввода капчи не должна быть пустой. </p>";

                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] = $error_message;

                //Возвращаем пользователя на страницу авторизации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_auth.php");

                //Останавливаем скрипт
                exit();

            }

            //(2) Место для обработки почтового адреса
            //(3) Место для обработки пароля
            //(4) Место для составления запроса к БД
        }else{
            //Если капча не передана
            exit("<p><strong>Ошибка!</strong> Отсутствует проверочный код, то есть код капчи. Вы можете перейти на <a href=".$address_site."> главную страницу </a>.</p>");
        }
    

Если пользователь ввёл проверочный код правильно, то идём дальше, иначе возвращаем его на страницу авторизации.

Проверка почтового адреса

Дальше, проверяем формат полученного почтового адреса. В указанное место "//(2) Место для обработки почтового адреса" пишем:


        //Обрезаем пробелы с начала и с конца строки
        $email = trim($_POST["email"]);
        if(isset($_POST["email"])){

            if(!empty($email)){
                $email = htmlspecialchars($email, ENT_QUOTES);

                //Проверяем формат полученного почтового адреса с помощью регулярного выражения
                $reg_email = "/^[a-z0-9][a-z0-9\._-]*[a-z0-9]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+/i";

                //Если формат полученного почтового адреса не соответствует регулярному выражению
                if( !preg_match($reg_email, $email)){
                    // Сохраняем в сессию сообщение об ошибке. 
                    $_SESSION["error_messages"] .= "<p class='mesage_error' >Вы ввели неправильный email</p>";
                    
                    //Возвращаем пользователя на страницу авторизации
                    header("HTTP/1.1 301 Moved Permanently");
                    header("Location: ".$address_site."/form_auth.php");

                    //Останавливаем скрипт
                    exit();
                }
            }else{
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error' >Поле для ввода почтового адреса(email) не должна быть пустой.</p>";
                
                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_register.php");

                //Останавливаем скрипт
                exit();
            }
            

        }else{
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error' >Отсутствует поле для ввода Email</p>";
            
            //Возвращаем пользователя на страницу авторизации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_auth.php");

            //Останавливаем скрипт
            exit();
        }

        //(3) Место для обработки пароля
    

Если пользователь ввёл почтовый адрес в неправильном формате или значение поля почтового адреса является пустой, то мы возвращаем его на страницу авторизации где выводим ему сообщение об этом.

Проверка пароля

Следующее поле для обработки, это поле с паролем. В указанное место "//(3) Место для обработки пароля", пишем:

        if(isset($_POST["password"])){

            //Обрезаем пробелы с начала и с конца строки
            $password = trim($_POST["password"]);

            if(!empty($password)){
                $password = htmlspecialchars($password, ENT_QUOTES);

                //Шифруем пароль
                $password = md5($password."top_secret");
            }else{
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error' >Укажите Ваш пароль</p>";
                
                //Возвращаем пользователя на страницу регистрации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_auth.php");

                //Останавливаем скрипт
                exit();
            }
            
        }else{
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error' >Отсутствует поле для ввода пароля</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_auth.php");

            //Останавливаем скрипт
            exit();
        }
    

Здесь мы с помощью функции md5() шифруем полученный пароль, так как в БД пароли у нас находятся именно в зашифрованном виде. Дополнительное секретное слово в шифровании, в нашем случае "top_secret" должна быть та которая использовалась и при регистрации пользователя.

Теперь необходимо сделать запрос к БД на выборке пользователя у которого почтовый адрес равен полученному почтовому адресу и пароль равен полученному паролю.

        //Запрос в БД на выборке пользователя.
        $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = '".$email."' AND password = '".$password."'");

        if(!$result_query_select){
            // Сохраняем в сессию сообщение об ошибке. 
            $_SESSION["error_messages"] .= "<p class='mesage_error' >Ошибка запроса на выборке пользователя из БД</p>";
            
            //Возвращаем пользователя на страницу регистрации
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: ".$address_site."/form_auth.php");

            //Останавливаем скрипт
            exit();
        }else{

            //Проверяем, если в базе нет пользователя с такими данными, то выводим сообщение об ошибке
            if($result_query_select->num_rows == 1){
                
                // Если введенные данные совпадают с данными из базы, то сохраняем логин и пароль в массив сессий.
                $_SESSION['email'] = $email;
                $_SESSION['password'] = $password;

                //Возвращаем пользователя на главную страницу
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/index.php");

            }else{
                
                // Сохраняем в сессию сообщение об ошибке. 
                $_SESSION["error_messages"] .= "<p class='mesage_error' >Неправильный логин и/или пароль</p>";
                
                //Возвращаем пользователя на страницу авторизации
                header("HTTP/1.1 301 Moved Permanently");
                header("Location: ".$address_site."/form_auth.php");

                //Останавливаем скрипт
                exit();
            }
        }
    

Выход с сайта

И последнее что мы реализуем, это процедура выхода с сайта. На данный момент в шапке у нас выводятся ссылки на страницу авторизации и на страницу регистрации.

После того как пользователь прошёл авторизацию успешно, необходимо убрать эти ссылки и вместо них вывести ссылку выхода с сайта. Эта ссылка будет ввести на файл logout.php, где мы и произведём выход.

В шапке сайта (файл header.php), с помощью сессии мы проверяем, авторизован ли уже пользователь. Если нет, то выводим ссылки регистрации и авторизации, в противном случае (если он авторизован ) то вместо ссылок регистрации и авторизации выводим ссылку Выход.

Модифицированный кусок кода из файла header.php:


        
<?php //Проверяем авторизован ли пользователь if(!isset($_SESSION['email']) && !isset($_SESSION['password'])){ // если нет, то выводим блок с ссылками на страницу регистрации и авторизации ?> <?php }else{ //Если пользователь авторизован, то выводим ссылку Выход ?> <?php } ?>

При нажатии на ссылку выхода с сайта, мы попадаем в файл logout.php, где просто уничтожаем ячейки с почтовым адресом и паролем из сессии. После этого возвращаем пользователя обратно на ту страницу, на которой была нажата ссылка выход.

Код файла logout.php:

    <?php
        //Запускаем сессию
        session_start();

        unset($_SESSION["email"]);
        unset($_SESSION["password"]);
        
        // Возвращаем пользователя на ту страницу, на которой он нажал на кнопку выход.
        header("HTTP/1.1 301 Moved Permanently");
        header("Location: ".$_SERVER["HTTP_REFERER"]);
    ?>
    

На этом всё. Теперь Вы знаете как реализовать и обрабатывать формы регистрации и авторизации пользователя на своём сайте. Эти формы встречаются почти на каждом сайте, поэтому каждый программист должен знать, как их создавать.

Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery ) так и на стороне сервера ( с помощью языка PHP ). Также мы научились реализовать процедуру выхода с сайта.

Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке.

В будущем я напишу статью где опишу как реализовать подтверждение почты. И ещё планирую написать статью где объясню, как отправить данные из формы на сервер с помощью технологии Ajax (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.

При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

<< Предыдущая статья

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2014-07-04 07:31:01