Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:adaptive_registration_form_sample [2026/01/27 01:47] – [Динамическое подключение страниц] VladPolskiy
+++ software:development:demo:adaptive_registration_form_sample [2026/02/01 19:39] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 1: / Строка 1: @@
 ====== Простая адаптивная форма регистрации и авторизации ======
 Данная форма написана на 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?|}}
@@ Строка 236: / Строка 242: @@
   * confirm.php - Форма подтверждения электронной почты (Email Confirmation Form)
   * reset.php - Форма сброса пароля (Password Reset Form)
-  * 2af.php - Форма 2х уровневой авторизации (2-Level Authorization Form)
+  * 2fa.php - Форма 2х уровневой авторизации (2-Level Authorization Form)
   * logout.php - Выход из системы (logout)
 ==== login.php ====
@@ Строка 247: / Строка 253: @@
 <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'
 </code>
@@ Строка 305: / Строка 311: @@
 \\
 Ссылка "Есть аккаунт? Войдите здесь." вернет на форму "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 |Скачать архив с примерами}}