| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:adaptive_registration_form_sample [2026/01/27 01:24] – [Динамическое подключение страниц] VladPolskiy | software:development:demo:adaptive_registration_form_sample [2026/02/01 19:39] (текущий) – [Дополнения и Файлы] VladPolskiy |
|---|
| ====== Простая адаптивная форма регистрации и авторизации ====== | ====== Простая адаптивная форма регистрации и авторизации ====== |
| Данная форма написана на PHP и CSS. Адаптивность ей придает медиа-запрос ''@media screen and (max-width: 480px)'' Это правило адаптивного дизайна, которое применяет определенные стили, когда ширина окна браузера составляет 480 пикселей или меньше , а устройство — экран (например, настольный компьютер, смартфон или планшет). | Данная форма написана на PHP и CSS. Адаптивность ей придает медиа-запрос ''@media screen and (max-width: 480px)'' Это правило адаптивного дизайна, которое применяет определенные стили, когда ширина окна браузера составляет 480 пикселей или меньше , а устройство — экран (например, настольный компьютер, смартфон или планшет). |
| | \\ |
| | * <fc #22b14c>Windows 10 Pro</fc> |
| | * [[https://www.apachefriends.org/download.html|XAMPP]] <fc #22b14c>- полностью бесплатный и простой в установке дистрибутив Apache, содержащий MariaDB, PHP и Perl. Работая в среде MS Windows, его использование регулируется</fc> [[https://ru.wikipedia.org/wiki/GNU_General_Public_License|GNU General Public License]]. |
| | * <fc #22b14c>Google Chrome — браузер, разрабатываемый на основе свободного браузера Chromium и движка Blink.</fc> |
| | * [[https://notepad-plus-plus.org/|Notepad++]] <fc #22b14c>- бесплатный текстовой редактор исходного кода. Работая в среде MS Windows, его использование регулируется</fc> [[https://ru.wikipedia.org/wiki/GNU_General_Public_License|GNU General Public License]]. |
| | |
| \\ | \\ |
| {{:software:development:demo:adaptiv_form-activ_sample_php_css_1.png?|}} | {{:software:development:demo:adaptiv_form-activ_sample_php_css_1.png?|}} |
| * confirm.php - Форма подтверждения электронной почты (Email Confirmation Form) | * confirm.php - Форма подтверждения электронной почты (Email Confirmation Form) |
| * reset.php - Форма сброса пароля (Password Reset Form) | * reset.php - Форма сброса пароля (Password Reset Form) |
| * 2af.php - Форма 2х уровневой авторизации (2-Level Authorization Form) | * 2fa.php - Форма 2х уровневой авторизации (2-Level Authorization Form) |
| * logout.php - Выход из системы (logout) | * logout.php - Выход из системы (logout) |
| | ==== login.php ==== |
| Переименуем, находящийся в корне директории наш шаблон ''sample.php'' в ''auth.php'', а так же создадим файл ''login.php'' в директории ''pages''.\\ | Переименуем, находящийся в корне директории наш шаблон ''sample.php'' в ''auth.php'', а так же создадим файл ''login.php'' в директории ''pages''.\\ |
| Из файла ''auth.php'' удалим весь код из %%<div class="container">%% и запишем это в файл ''login.php'', при этом изменив адреса ссылок на ''auth.php'' | Из файла ''auth.php'' удалим весь код из %%<div class="container">%% и запишем это в файл ''login.php'', при этом изменив адреса ссылок на ''auth.php'' |
| <code php auth.php> | <code php auth.php> |
| // Определяем список разрешенных страниц | // Определяем список разрешенных страниц |
| $allowed_pages = array('login', 'register', 'confirm', 'reset', '2af'); | $allowed_pages = array('login', 'register', 'confirm', 'reset', '2fa'); |
| $page = $_GET['page'] ?? 'login'; // По умолчанию 'login' | $page = $_GET['page'] ?? 'login'; // По умолчанию 'login' |
| </code> | </code> |
| {{:software:development:demo:adaptiv_form-activ_sample_php_css_18.png?|}} | {{:software:development:demo:adaptiv_form-activ_sample_php_css_18.png?|}} |
| \\ | \\ |
| | ==== reset.php ==== |
| | Cоздадим файл ''reset.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php reset.php> |
| | <form method="post" action="#"> |
| | <h2>Форма сброса пароля</h2> |
| | <input type="email" id="email" required placeholder="Введите свой адрес электронной почты"> |
| | <p>Отменить? <a href="auth.php?page=login">Войдите здесь.</a></p> |
| | <button type="submit">Сбросить пароль</button> |
| | </form> |
| | </code> |
| | Обновим страница браузера и нажмем на ссылку "Восстановить?" |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_19.png?|}} |
| | \\ |
| | Ссылка "Отменить? Войдите здесь." вернет на форму "login" |
| |
| | ==== register.php ==== |
| | Cоздадим файл формы регистрации ''register.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php register.php> |
| | <form method="post" action="#"> |
| | <h2>Форма регистрации</h2> |
| | <input type="text" id="user_login" name="user_login" required placeholder="Введите ваше полное имя"> |
| | <input type="email" id="user_email" name="user_email" required placeholder="Введите свой адрес электронной почты"> |
| | <input type="password" id="user_pass" name="user_pass" required placeholder="Придумайте сложный пароль"> |
| | <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="Повторите введенный пароль"> |
| | <p title="Пароль должен содержать не менее 8 символов и содержать не менее: одной строчной буквы, одной заглавной буквы, одной цифры и одного символа.">*Примечание</p> |
| | <button type="submit">Зарегистрироваться</button> |
| | <p>Есть аккаунт? <a href="auth.php?page=login" >Войдите здесь.</a></p> |
| | </form> |
| | </code> |
| | Обновим страница браузера и нажмем на ссылку "Зарегистрируйтесь." |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_20.png?|}} |
| | \\ |
| | Ссылка "Есть аккаунт? Войдите здесь." вернет на форму "login" |
| | |
| | ==== confirm.php ==== |
| | Cоздадим файл формы верификации ''confirm.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php confirm.php> |
| | <form method="post" action="#"> |
| | <h2>Форма верификации</h2> |
| | <input type="email" id="user_email" name="user_email" required placeholder="Введите свой адрес электронной почты"> |
| | <input type="password" id="user_activation_email_key" name="user_activation_email_key" required placeholder="Введите код, отправленный на ваш email"> |
| | <p>*Необходимо подтвердить ваш email.</p> |
| | <button type="submit">Отправить полученный код</button> |
| | </form> |
| | </code> |
| | На эту форму не кнопки (ссылки) перехода, она откроется после формы регистрации. Так же эта форма будет открываться, если пользователь выбирет 2х факторную защиту аккаунта по электронной почте. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_21.png?|}} |
| | \\ |
| | ==== 2fa.php ==== |
| | Cоздадим файл формы 2х факторной аутентификации через мобильное приложение ''2fa.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php index.php> |
| | <form method="post" action="#"> |
| | <h2>Форма аутентификация 2FA</h2> |
| | <input type="number" id="user_activation_2fa" name="user_activation_2fa" pattern="\d{6}" required placeholder="Введите OTP код"> |
| | <p>*OTP код из мобильного приложения </p> |
| | <button type="submit">Подтвердить одноразовый код</button> |
| | </form> |
| | </code> |
| | На эту форму нет кнопки (ссылки) перехода, она откроется после формы аутентификации, если пользователь выбирет 2х факторную защиту аккаунта в мобильном приложении. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_22.png?|}} |
| | \\ |
| | ==== OTP.php ==== |
| | Cоздадим файл формы получения кода 2х факторной аутентификации через мобильное приложение ''OTP.php'' в директории ''pages'' и запишем в него следующий код-заглушку |
| | <code php OTP.php> |
| | <form method="post" action="#"> |
| | <h2>Форма 2FA</h2> |
| | <p>*Отсканируйте в приложении QR code: </p> |
| | <!-- echo $tfa->getQRCodeImageAsDataUri('Demo', $secret);--> |
| | <img src="css/qr_code.png" /> |
| | <p>*Введите код вручную: </p> |
| | <h5>I4BQ P7MB TBG6 LW5I ID5O JY2E SQSV EWX4</h5> |
| | <p>*Подтвердите код на мобильном устройстве </p> |
| | </form> |
| | </code> |
| | Эта форма единожды будет доступна при включении пользователем двухфакторной авторизации после регистрации. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_24.png?|}} |
| | \\ |
| | ==== logout.php ==== |
| | Последний файл ''logout.php'' не доступен для просмотра и будет служить для кода выхода из системы. |
| | ===== Дополнения и Файлы ===== |
| | * См.так же |
| | * [[software:development:demo:adaptive_registration_form_block|Блочная адаптивная форма регистрации и авторизации]] |
| | * [[software:development:demo:adaptive_registration_form_complex_block|Блочная полная адаптивная форма регистрации и авторизации]] |
| | * {{ :software:development:demo:htdocs.zip |Скачать архив с примерами}} |
