Идеальная форма авторизации — как делать не нужно (ошибки и советы) – Блог Mobios School

Требования к системе авторизации

При проектировании расширения я руководствовался следующими принципами:

  1. Необходимость абстрагироваться от тонкостей авторизации через различные типы сервисов, использование адаптеров для каждого сервиса.
  2. Получение уникального идентификатора авторизации, который можно использовать для регистрации пользователя в нашем приложении.
  3. Возможность расширения стандартных классов авторизации для получения дополнительных данных о пользователе.
  4. Возможность работать с API социальных сетей путем расширения класса авторизации необходимого сервиса.
  5. Возможность настраивать список поддерживаемых сайтом сервисов, переопределять внешний вид виджета авторизации. Возможность использовать popup окно для авторизации без закрытия нашего приложения.

Расширение EAuth

В результате реализации всех требований выше на свет появилось расширение EAuth.


На данный момент расширение содержит:

Установка

Для начала необходимо

1 Зависимости

Расширение использует

2 Настройка


В конфигурацию

`main.php`

необходимо добавить:

Использование

В качестве примера возьмем стандартное приложение Yii, сгенерированное командой

`yiic webapp create`

, и добавим возможность авторизации через Google и Яндекс (OAuth провайдеров подключать не будем, чтобы не возиться с ключами). Посмотреть готовую

2 Редактирование SiteContoller


Вторым шагом будет изменение действия

`site/login`

. Добавим следующий код в начало действия:

3 Редактируем представление `protected/views/site/login.php`

Для использования стандартного виджета достаточно добавить пару строк после основной формы:

Для изменения внешнего вида виджета можно скопировать файл

`protected/extensions/eauth/views/auth.php``[theme_name]/views/EAuthWidget/auth.php`

4 Результат


После всех проделанных действий мы можем открыть наш сайт и перейти на страницу Login. После стандартной формы авторизации появятся иконки сервисов авторизации:

При клике, например, по иконке Google откроется popup окно: Popup окно авторизации

Какие ошибки часто допускают веб-дизайнеры и верстальщики

Самая распространенная ошибка в пользовательском интерфейсе — это спрятанная форма авторизации. Обычно ее вставляют по ссылке в окне регистрации. Например, чтобы ввести свои данные и открыть личный кабинет пользователю приходится искать форму ввода, переходить по гиперссылке (совершать 2-3 действия вместо 1).

Похожее:  Риалком — войти по номеру договора, аккаунту

Какой должна быть идеальная форма для авторизации

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

Настройка smtp-авторизации в microsoft outlook

  1. В меню “Сервис->Учетные записи” выбрать Вашу учетную запись, нажать кнопку“Свойства”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  2. На закладке “Серверы” поставить галочку “Проверка подлинности пользователя”. Нажать кнопку “Настройка”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  3. Выбрать пункт “Как на сервер входящей почты”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  4. Нажать “OK”, нажать “OK”, нажать “Закрыть”. Программа настроена.

Проверено на версии MS Outlook 2000 v.9.0.0.3011

Настройка smtp-авторизации в microsoft outlook express

  1. В меню “Сервис->Учетные записи” выбрать Вашу учетную запись, нажать кнопку“Свойства”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  2. На закладке “Серверы” поставить галочку “Проверка подлинности пользователя”. Нажать кнопку “Настройка”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  3. Выбрать пункт “Как на сервер входящей почты”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  4. Нажать “OK”, нажать “OK”, нажать “Закрыть”. Программа настроена.

Проверено на версии MS Outlook Express v.6.0.0.2900.5512

Настройка smtp-авторизации в the bat!

  1. В меню “Ящик->Свойства почтового ящика” выбрать закладку “Транспорт”.
  2. В секции “Отправка почты” нажать кнопку “Аутентификация”.

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  3. В открывшемся окне выбирать “Аутентификация SMTP (RFC-2554)”, выбирать “Использовать
    параметры получения почты (POP3/IMAP)”
    .

    Результат должен выглядеть так:

    Идеальная форма авторизации — как делать не нужно (ошибки и советы) - Блог Mobios School
  4. Нажать “OK”, нажать “OK”. Программа настроена.

Проверено на The Bat! v.3.65

Ссылки

UPDATE:

в пункте «3.2 Настройка» не хватало расширения loid, добавил.

UPDATE 2:

Актуальная версия и инструкция по настройке доступны на

Форма авторизации на простом 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”.

Похожее:  ВИРО 36 аттестация педработников: вход в ЛК, регистрация, официальный сайт

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

.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

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

Заключение

Вот и все, система авторизации готова к работе. Что еще можно делать с расширением:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

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

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

Adblock
detector