форма авторизации на простом html с пояснениями / хабр

Начало

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

Аутентификация – это процесс, при котором пользователь подтверждает подлинность своей личности в какой-либо системе. Система предоставляет личные данные только своему владельцу.

Cookies

Наверное вы часто слышали термин Cookies – это маленький фрагмент данных, которые система (сервер) хранит у пользователя. Каждый раз, когда пользователь открывает сайт – серверу отправляются данные Cookies, которые сервер сохранил у пользователя на устройстве.

Вы можете проектировать свои интерфейсы как с сохранением сессий пользователей, так и без сохранения.

Авторизация в локальной сети при помощи звонка, подробно

Пример авторизации на телефоне Asus 550

Для того что бы авторизоваться в сети Free internet (high speed) необходимо включить wi fi, выбрать сеть Free internet (high speed), записать свой номер телефона в появившейся окне, послать на проверку, совершить звонок с записанного в форме номера телефона, на номер 7(499)579-84-60. Вы получите доступ к сети интернет.

Разберем последовательно все действия с использованием телефона Asus 550, операционной системы android 6.01. В других операционных системах и версиях будет очень похожая регистрация.

1. Включаем Wi Fi, для этого нам надо зайти в меню, в настройки, включить Wi Fi

2. Выбрать сеть Free internet (high speed), подключиться к ней.

3. В появившейся форме записать свой номер телефона, послать на проверку и совершить звонок на номер 7(499)579-84-60,  при помощи красной кнопки.

Важно

Если при прохождении регистрации Вам не удается сделать звонок, при нажатии на красную кнопку ( есть разные капризные телефоны, зависит от настроек ) совершите  вызов самостоятельно с номера который Вы записали в форме на номер 7(499)579-84-60.

Порядок регистрации в сети Free internet (high speed) коротко

1. Вызвать форму регистрации

2. Заполнить форму своим номером телефона

3. Нажать на красную кнопку 1. – отправить на проверку номер и 2. совершить звонок

  а) отправить номер своего телефона

  б) сделать звонок с указанного в форме номера телефона

Видео.  авторизация с помощью звонка.

Пример регистрации в видео ролике

Некоторые возможные сложности, которые могут возникнуть при подключении к бесплатному Wi-Fi.

Двухфакторная аутентификация

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

Для кого эта статья

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

Запрос на выполнение звонка в asus 550.

При выполнении звонка телефон спросит какую программу ( приложение ) использовать для выполнения вызова.

Нам нужно использовать номер телефона который мы записали. Выбираем программу (приложение) телефон

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

 Выполняем звонок. После выполнения звонка регистрация произведена. Звонок очень короткий и поэтому бесплатный.

Особенности некоторых систем при авторизации в free wi fi сети

Некоторые операционные системы в частности android 4.2.1 при подключении к сети не открывают форму для регистрации (авторизации).

Если не открылась форма для регистрации или из формы не возможен звонок.  Необходимо открыть интернет браузер при включенном wi fi и подключенной сети Free internet ( high speed ). У меня установлен интернет браузер Chrome я им могу и воспользоваться. Вы можете воспользоваться любым интернет браузером, который установлен у Вас.

Некоторые телефоны с операционной системой android (в старых версиях android) не позволяют совершить звонок из формы открытой без использования полноценного интернет браузера. Поэтому при нажатии на красную кнопку 2. не происходит звонка на наш номер, Ваш телефон не вызывает нужного приложения из формы для авторизации.

Примеры интернет браузеров ( приложения )

google

google chrome

Это стандартный интернет браузер для android .

Так же существует великое множество интернет браузеров которые могут стоять на Вашем телефоне: Mozilla Firefox, и тд. Выбирайте тот к которому привыкли.

Интернет браузер делает попытку входа в интернет через wi fi и сеть Free internet ( high speed ), если нет авторизации устройства в этой сети будет показана форма для авторизации. В данной статье регистрация и авторизация это одно и тоже действие.

Подробно.

Открываю Chrome

Порядок действий, авторизация

1. Включить Wi-Fi.

2. Выбрать сеть Free internet (high speed).

3. В открывшуюся форму записать свой номер телефона.

4. Нажать на кнопку    отправить номер на проверку.

5. Нажать на кнопку      подтвердить номер звонком.     Позвонить на номер 7(499)579-84-60.

Форма для авторизации в сети Free internet (high speed)

Процесс восстановления пароля

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

Процессы аутентификации

Так как наши данные при регистрации в каком либо сервисе хранятся в базе данных – то к процессу аутентификации применяются базовые принципы работы с базами данных (далее БД) – это чтение, запись, обновление и удаление данных. При этом, во время каждого из действий с БД проверяется возможность совершения этих действий пользователем.

  1. Регистрация (CREATE) – создание в системе вашей личной учётной записи

  2. Авторизация (READ) – получение доступа к вашей личной учётной записи

  3. Восстановление доступа к учётной записи (UPDATE) – если вы на пример забыли пароль – то его можно сменить, подтвердив свою личность.

  4. Удаление (DELETE) – удаление вашей учётной записи из системы

Способ регистрации используя интернет браузер

1. Включить Wi Fi

2. Подключиться к сети Free internet (high speed)

Упрощённое объяснение термина “сессия”

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

Для того что бы различать входы с различных устройств – каждой сессии присваивается свой уникальный для каждой авторизации номер (Токен), который хранится в Cookies. Это нужно для того, что бы при выходе (закрытии сессии) с одного из устройств вы не выходили из своей учёной записи во всех остальных устройствах.

Форма авторизации на простом html с пояснениями

Добрый день. Конечно всем эта тема знакома уже много лет, но она будет кому то полезна особенно новичкам, которые ищут форму авторизации. Формы бывают разные и я буду добавлять новые, чтобы кто то не тратил много времени на поиски готовых решений. Это будут формы авторизации из двух полей, форма авторизации по номеру телефона, форма авторизации с “галочкой” запомнить, а так же формы авторизации с капчей от гугл. Еще добавлю, что все формы будут иметь уникальные классы блоков, что позволит их использовать на любых проектах, чтобы не ломать действующие возможные стили и пересечения классов блоков.

Базовая разметка HTML для простой формы авторизации:

<div class="form_auth_block">
  <div class="form_auth_block_content">
    <p class="form_auth_block_head_text">Авторизация</p>
    <form class="form_auth_style" action="#" method="post">
      <label>Введите Ваш имейл</label>
      <input type="email" name="auth_email" placeholder="Введите Ваш имейл" required >
      <label>Введите Ваш пароль</label>
      <input type="password" name="auth_pass" placeholder="Введите пароль" required >
      <button class="form_auth_button" type="submit" name="form_auth_submit">Войти</button>
    </form>
  </div>
</div>

В данной разметке мы создали простой блок родитель в котором будут храниться все остальные блоки, как видно их не так много. Блоки названы одноименными классами, так легче понять о чем идет суть и какие стили к чему относятся в структуре. Обратите внимание на type для двух input, поскольку первый является полем для ввода имейл адреса его тип выбран как email это позволит пользователю в простой проверке браузера избежать ошибки к примеру в отсутствии @ или попросту точки перед доменной зоной.

Второй input имеет тип password это скрывает пароль от глаз в виде точек. Это не так критично, многие предпочитают тип text, но правильнее все же будет использовать тип password, о других нюансах выбора типа поля input будет рассказано в другой статье.

Placeholder — простым словом “тег подсказка”, он дает возможность указать для пользователя что ему требуется сделать, что разрешено, а что нет. Можно указать любое значение. Обратите внимание что тег placeholder можно изменить с помощью стилей CSS.

Обратите внимание что в input так же задано свойство name, оно необходимо для последующей работы с формой, когда дело доходит до ее обработки на сервере. Это значение нужно делать уникальным и желательно схожим по названию отражающем его сущность. Если это форма авторизации, то логичнее всего задать name=”auth_email”, таким образом мы будем понимать что это свойство отвечает за передачу email адреса из формы авторизации. Многие новички в последующем делают частую ошибку работая с обработкой этих данных на сервере, особенно работая по паттерну MVC, когда в контроллере срабатывает событие к примеру submit а данные свойства name остаются везде одинаковые к примеру name=”email”.

Простые стили к форме авторизации без адаптации под мобильные устройства:

.form_auth_block{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background: url(http://www.dailycompass.org/wp-content/uploads/2022/01/Bubbles.jpg);
    background-size: cover;
    border-radius: 4px;
}
.form_auth_block_content{
  padding-top: 15%;
}
.form_auth_block_head_text{
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    background: #ffffff;
    opacity: 0.7;
}
.form_auth_block label{
    display: block;
    text-align: center;
    padding: 10px;
    background: #ffffff;
    opacity: 0.7;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 10px;
}
.form_auth_block input{
  display: block;
  margin: 0 auto;
  width: 80%;
  height: 45px;
  border-radius: 10px;  
  border:none;
  outline: none;
}
input:focus {
  color: #000000;
  border-radius: 10px;
  border: 2px solid #436fea;
}
.form_auth_button{
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 10px;
    height: 35px;
    border: none;
    cursor: pointer;
}
::-webkit-input-placeholder {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
::-moz-placeholder          {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
:-moz-placeholder           {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
:-ms-input-placeholder      {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder

И вот что у нас получилось в итоге:

image

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

Заключение

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

Надеюсь вам было полезно, и хоть немного интересно.

Похожее:  ЛИЧНЫЙ КАБИНЕТ РУССКОГО СТАНДАРТА АВТОРИЗУЙТЕСЬ В ИНТЕРНЕТ БАНКЕ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *