Вход в личный кабинет Автозаполнение поля «город» на основе почтового индекса
Если вы просите пользователя заполнить домашний адрес, то рассмотрите возможность автозаполнения города и области из введенного почтового индекса. В результате этого ваша форма будет эффективнее, так как пользователю не придется тратить время и силы на то, чтобы впечатывать свой город в поле или выбирать его из длинного выпадающего списка.
Делайте кнопку «подтвердить» такой же ширины, что и поля ввода
Кнопка подтверждения создана не просто для того, чтобы сделать возможным действие — она еще показывает какое именно действие пользователь сейчас совершит. Маленький размер кнопки означает слабую подсказку к манипулированию, из-за чего пользователь может сомневаться в нужности данного действия.
Широкая кнопка придает уверенности, и её трудно не заметить. Название кнопки также становится заметнее, поэтому пользователь лучше понимает действие, которое собирается совершить.
Не ставьте по умолчанию галочку в чекбоксе «подписаться на рассылку», предлагайте сначала посмотреть превью письма
Большинство веб-сайтов по умолчанию подписывают своих свежезарегистрированных посетителей в надежде получить побольше подписчиков своей корпоративной рассылки. Да, такой прием иногда срабатывает, однако подписка бессмысленна, если пользователь просто не заметил опцию ее отключения или не понял назначения этой опции.
Если пользователю неинтересно будет получать вашу рассылку, он все равно отпишется от нее, и в долгосрочной перспективе такой метод вам не поможет. А еще рассылка писем пользователям, не подозревавшим о наличии рассылки, легко может оттолкнуть их от вас.
Более эффективным подходом было бы продемонстрировать превью или отрывок письма из рассылки. В таком случае пользователи смогут наглядно представить что они потеряют, если не подпишутся. А еще вы будете спать спокойно, зная, что вашу рассылку получают только те, кто точно в ней заинтересован.
Авторизируйте пользователя так, чтобы он оставался на той же странице
Авторизация на сайте — это важная функция, и пользователи захотят иметь возможность авторизоваться с любой странички на сайте. Так что не забудьте сделать так, чтобы после входа на сайт пользователь попал на ту же страничку, с которой он авторизовывался. Это сделает процесс проще и поможет пользователю сразу приступить к решению своей задачи на сайте.
Существует два пути реализации такого процесса: выпадающая форма и модальное окно.
Выпадающая форма открывается, не унося пользователя с текущей страницы. Она занимает только небольшую область на странице, что позволяет сделать форму в таком варианте быстрым и ненагруженным решением.
Модальное окно также не уносит пользователя с текущей страницы — оно разворачивается по центру страницы, концентрируя внимание полностью на форме авторизации. Этот вариант дает возможность разместить в форме дополнительную информацию.
Keycloak: настройки
В этой статье я не буду описывать, что такое KeyCloak и как он работает, предполагается что читатель все это знает, и его задача схожая с моей – использовать уже настроенный KeyCloak в своем веб-приложении в качестве решения для авторизации.
В рамках статьи основные исходные настройки KeyCloak следующие:
realm – myproject (Зарегистрированное в KeyCloak имя проекта для которого разрабатывается приложение)
client_id – myproject-app (Зарегистрированное в KeyCloak имя приложения)
Более подробно о этих параметрах – ниже.
Автоматически устанавливайте курсор в первое поле формы
Как только пользователи увидят перед собой форму авторизации, они будут готовы к тому, чтобы войти на сайт. Вы можете облегчить им задачу, размещая курсор в первом поле ввода. Тогда пользователям не придется наводить мышку на поле и кликать по нему. Они смогут держать руки на клавиатуре и сразу же начать вводить необходимые данные.
Автоподстановка в поле «страна»
Обычно пользователя просят выбрать страну проживания из длинного выпадающего списка. Однако разумнее будет использовать автоподстановку названия страны по вводимым в поле символам — пользователь сможет выбрать свою страну, напечатав пару символов ее названия.
Боритесь со спамом, пряча при помощи javascript текстовое поле, вместо использования капчи
Если вы страдаете от обилия спама, вам совсем не обязательно использовать капчу. При использовании капчи в ее традиционном виде пользователю предлагается ввести в поле искаженные символы с картинки. Наличие капчи, к сожалению, негативно сказывается на конверсии, ведь ее заполнение — это дополнительное усилие, затрачиваемое пользователем.
Простой способ побороть спам, при этом не теряя в конверсии — использование скрытого обязательного поля ввода, создаваемого JavaScript на стороне клиента. Спамботы не могут взаимодействовать с объектами Javascript на стороне клиента, это может сделать только пользователь.
Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.
Взаимодействие фронта с микросервисами. axios
Для взаимодействия с микросервисами будем использовать библиотеку AXIOS.
Поскольку у нас будут 2 типа запросов:авторизированные (для работы с микросервисами) и неавторизированные (для самой авторизации и refresh токена) – для каждого типа запроса будем использовать отдельный инстанс axios.
Итак, создадим утилитарный класс с нашими axios – AxiosInstance.js и добавим в него экземпляр axios для авторизированных запросов:
export const axiosInstance = axios.create({
headers: { Authorization: `Bearer ${getToken()}` }
});Здесь мы добавили в заголовок параметр авторизации со значением – bearer-token. Он будет посылаться в каждом запросе.
Кроме того, перед каждым запросом с фронта нам придется проверять валидность токена и, в случае если он невалиден (истек срок действия например) – делать его refresh. После этого в запросе уйдет уже обновленный валидный token.
Итак, добавим вызов метода verifyToken в axios request interceptor:
axiosInstance.interceptors.request.use(request => {
verifyToken().catch(() => refreshToken(getRefreshToken()));
return request;
});В случае, если токен невалиден, метод кидает исключение, в обработке которого вызываем обновление токена методом refreshToken, а в качестве его аргумента передаем refresh_token который хранится в нашем localStorage и доступный через утилитарный метод getRefreshToken.
Теперь осталось только проверить статус ответа в авторизированных запросах. Сделаем это через axios response interceptors:
axiosInstance.interceptors.response.use(response => {
if (response?.headers?.authorization) {
setToken(response.headers.authorization);
}
return response;
}, error => {
if (error?.response?.status === 401) {
logout();
}
return Promise.reject(error);
});Используйте иконку вопроса в качестве ссылки для восстановления пароля
Пользователи не должны испытывть проблем с поиском ссылки восстановления пароля в форме. Вместо того, чтобы использовать слова «Забыли пароль?» в качестве ссылки, достаточно сделать ссылкой маленькую иконку в виде знака вопроса, которая не потеряется среди других ссылок и не занимает много места.
Как сделать авторизацию на php? пишем авторизацию пользователя | otus
Внимание! Данная статья является устаревшей и носит исключительно ознакомительный характер. Если вас интересует авторизация на PHP, рекомендуем прочитать следующий материал по использованию готовых библиотек авторизации.
В этой статье вы узнаете, как сделать PHP-авторизацию (authentication) на сайте с помощью данных, полученных от пользователя при регистрации. Будем использовать таблицу MySQL, а сама PHP-авторизация будет работать с применением сессий и cookie. Материал не следует рассматривать, как пошаговое руководство. Зато он помогает понять, как работает PHP-авторизация в целом.
В первую очередь нужно сверстать главную страницу веб-сайта, поместив её в корне в папку template. Для этого создаём файл index.html с формой ввода логина и пароля, кнопкой «Вход», вот её код:
Мы используем метод передачи post, который необходим. Нам ведь не нужно, чтобы в процессе PHP-авторизации пароль и логин «светились» в адресной строке.
Когда форма готова, создаём главный контроллер — наиболее важный файл сайта, лежащий в корне — index.php. Как раз он и будет запускаться во время входа. Код выглядит следующим образом:
Теперь разберёмся подробнее, как всё работает.
В первых 3 строках просто подключаются файлы с функциями, необходимыми для дальнейшего использования в коде. О них поговорим потом. Далее проверяем, был ли передан get-параметрaction=out. В случае его передачи пользователь нажал на ссылку выхода с веб-сайта. Код ссылки, который нужно добавить в файл, содержащий код формы для входа:
Потом у нас идёт условие, которое проверяет, авторизован ли ты (if (login())). То есть функция возвращает нам true, если юзер вошёл на сайт. В противном случае возвращается false. Когда вернулось true, в переменную $UID записывается id юзера. Что касается переменной $admin, то в неё пишется результат работы функции is_admin($UID). Она определяет, является ли наш юзер админом, возвращая true, если это так и false в обратном случае. Потом эти 2 переменные понадобятся, чтобы вывести определённые элементы на странице.
Итак, форму PHP-авторизации можно вывести следующим условием:
Аналогичная ситуация и с переменной $admin. Последний код тоже можно поместить в файл с формой.
Если функция login() вернёт false (юзер не вошёл на сайт), мы проверим, а нажал ли он вообще на кнопку входа на сайт, которая включена в нашу форму PHP-авторизации:
Если это так, запускается функция enter(), авторизующая пользователя. Если ошибки отсутствуют, а пользователь вошёл успешно, создаём те же две переменные: $UID и $admin. В обратном случае переменные не создаются никакие, ведь пользователь является гостем.
Давайте посмотрим на алгоритм работы:
А теперь рассмотрим все функции, вызываемые в коде. Вот функция входа на сайт:
Сначала функция проверит, а заполнено ли поле для ввода пароля и логина для PHP-аутентификации. Если да, работа программы продолжается, в противном случае в массив $error пишется текст ошибки, и происходит возвращение в основную программу, которая после того, как узнает размерность полученного массива, пользователя не авторизует.
Но если работа функции enter() будет продолжена, мы проверим, а существует ли в базе данных запись с таким ником. Когда записи нет, возвращается массив с ошибкой. Когда есть, введённый пароль сравнивается со значением, которое хранится в БД.
Пароли сравниваются не в чистом виде, т. к. в базе данных они хэшированы функцией md5(). Значит это следующее: прежде чем приступить к сравнению, нужно хэшировать тем же алгоритмом пароль, введённый пользователем при попытке пройти аутентификацию/авторизацию.
Когда хэши совпадают, происходит авторизация с помощью скрипта. При отсутствии совпадений, возвращается ошибка.
Давайте подробно остановимся на том, что значит «авторизироваться». В нашем скрипте информация о PHP-авторизации хранится в cookie и сессии. В сессию записывается id пользователя:
Кроме того, создаются 2 cookie: login и password. Продолжительность жизни — 50 тыс. секунд. В первый пишется логин, во 2-й — хэш пароля.
В данной строке выполняется функция, которая устанавливает время последней активности юзера. Код:
С помощью функции перезаписываются поля online и last_act в базе данных. Здесь, кстати, важно убедиться, что эти поля существуют (оба имеют тип int).
Теперь посмотрим на алгоритм работы функции enter():
Идём дальше. Следующая функция нужна для проверки, авторизирован ли юзер на сайте — login().
functionlogin(){ini_set("session.use_trans_sid",true);session_start();if(isset($_SESSION['id']))//если сесcия есть {if(isset($_COOKIE['login'])&&isset($_COOKIE['password']))//если cookie есть, обновляется время их жизни и возвращается true { SetCookie("login","",time()-1,'/');SetCookie("password","",time()-1,'/');setcookie("login",$_COOKIE['login'],time() 50000,'/');setcookie("password",$_COOKIE['password'],time() 50000,'/');$id=$_SESSION['id'];lastAct($id);returntrue;}else//иначе добавляются cookie с логином и паролем, чтобы после перезапуска браузера сессия не слетала {$rez=mysql_query("SELECT * FROM users WHERE id='{$_SESSION['id']}'");//запрашивается строка с искомым id if(mysql_num_rows($rez)==1)//если получена одна строка { $row=mysql_fetch_assoc($rez);//она записывается в ассоциативный массив setcookie("login",$row['login'],time() 50000,'/');setcookie("password",md5($row['login'].$row['password']),time() 50000,'/');$id=$_SESSION['id'];lastAct($id);returntrue;}elsereturnfalse;}}else//если сессии нет, проверяется существование cookie. Если они существуют, проверяется их валидность по базе данных {if(isset($_COOKIE['login'])&&isset($_COOKIE['password']))//если куки существуют {$rez=mysql_query("SELECT * FROM users WHERE login='{$_COOKIE['login']}'");//запрашивается строка с искомым логином и паролем @$row=mysql_fetch_assoc($rez);if(@mysql_num_rows($rez)==1&&md5($row['login'].$row['password'])==$_COOKIE['password'])//если логин и пароль нашлись в базе данных {$_SESSION['id']=$row['id'];//записываем в сесиию id $id=$_SESSION['id'];lastAct($id);returntrue;}else//если данные из cookie не подошли, эти куки удаляются {SetCookie("login","",time()-360000,'/');SetCookie("password","",time()-360000,'/');returnfalse;}}else//если куки не существуют {returnfalse;}}}Возникает вопрос, почему для авторизации используем и сессию, и cookie? Всё дело в том, что при закрытии браузера сессия «умирает», а пользователь автоматически разлогинивается. А вот cookie хранятся определённое время, задаваемое нами (50 тыс. секунд).
Дальше у нас функция online(). Её нужно запускать первой на всех модулях и страницах будущего сайта. В первую очередь, она проверяет, прошёл ли пользователь PHP-авторизацию/аутентификацию, что важно для дальнейшей работы скрипта. Во вторую очередь, она выполняет обновление времени последней активности, а также помогает в перспективе выводить систему онлайн-пользователей.
Наша функция вернёт true, когда юзер авторизирован, а в обратном случае — false. При этом в процессе работы обновится время жизни cookie или они будут созданы, если вообще не существуют.
Очередной алгоритм работы:
Когда есть сессия и cookie, обновляется время жизни cookie. Чтобы это реализовать, они удаляются, время смерти устанавливается на одну секунду раньше текущего времени, потом устанавливаете заново. Также нужно учесть, что функция lastAct() обновляет время последней активности. Возвращается, разумеется, true.
Когда сессия есть, а cookie почему то нет, то по id юзера мы получаем из базы данных логин и хэш пароля, потом пишем их в cookie. Возвращается true.
Когда сессии нет, проверяем, существуют ли cookie. Традиционный пример — PHP-авторизация после перезапуска браузера, когда сессия слетела, но cookie всё ещё живы. Становится сложнее, ведь нужно проверить, а совпадает ли пара пароль-логин с какой-нибудь строкой из базы данных. Ведь пользователь легко мог сменить cookie в настройках для сайта. Если пара нашлась, создаётся переменная сессии, возвращается true. Если пара не нашлась, возвращается false.
Если у нас самый печальный вариант — ни сессии, ни cookie не оказалось, возвращается false.
Сейчас глянем на функцию is_admin($UID), определяющую является ли user админом. Если вам это не надо, опустите данную функцию и её вызовы в контроллере. Но учтите, что для вывода контента на страницу для админов она бывает полезна. К тому же, она проста и основана на одном столбце в базе данных в таблице users (столбец prava, тип int).
Когда наш юзер обыкновенный пользователь, значению в столбце присваивается 0, иначе — 1. Соответственно, в первом случае вернётся false, во втором — true.
Последняя функция — это out(). Она проста и удаляет все «следы» юзера — и сессию, и cookie.
Код всех наших функций нужно поместить в файл lib/module_global.php, подключаемый в начале работы контроллера.
Итак, мы написали функциональную, но простую PHP-регистрацию/аутентификацию/авторизацию для сайта. Также заложили фундамент для дальнейших возможностей по администрированию и не только. Такая PHP-авторизация не слетит после перезапуска браузера, т. к. мы используем cookie. Предусмотрен и выход с сайта.
Источник: https://true-coder.ru/php/pishem-avtorizaciyu-na-php.html.
Кастом в два клика: «universe site»
Этот готовый сайт уже посерьёзнее. В личном кабинете пользователь легко сможет настроить платформу под свои интересы и нужды:
INTEC: Universe SITE
Решение очень похоже на модули, которые используются в интернет-магазинах – есть даже просмотр истории заказов. Также в личном кабинете можно настроить свои подписки или поменять личные данные. Кабинет минималистичный, но его функций вполне достаточно в рамках задач, возлагаемых на стандартный корпоративный сайт. В личном кабинете есть меню, можно дорабатывать его под свои нужды.
Клиент для auth server
Создадим класс AuthClient.js с методом аутентификации и refresh токена:
Клиент для keycloak
Клиент для KeyCloak будет содержать 2 метода:
Оба метода будут возвращать класс org.keycloak.representations.AccessTokenResponse.class из подключенной ранее библиотеки. Структура класса соответствует спецификации OpenId Connect для Successful Token Response.
Код клиента будет выглядеть так:
Контроллеры
Далее нам нужно создать котроллер с методом для аутентификации AuthenticateController.java:
@RestController
@RequiredArgsConstructor
@RequestMapping("/authenticate")
public class AuthenticateController {
private final KeyCloakClient keyCloakClient;
@PostMapping
public ResponseEntity<AccessTokenResponse> authenticate(@RequestBody AuthRequestDto request) {
return ResponseEntity.ok(keyCloakClient.authenticate(request));
}
}Конфигурация сервиса
Создадим проект auth server и добавим в него необходимые зависимости. Конфигурационный файл pom.xml будет выглядеть так:
Конфигурирование nginx
Поскольку фронт будет обращаться к нескольким микросервисам, нужна единая точка для взаимодействия фронта с ними. В качестве единой точки был выбран nginx.
Для того чтобы наш фронт смог общаться к микросервисами, нужно прописать для каждого из них location. В нашем случае приложение общается с двумя микросервисами:
Лёгкий старт: «alpha – корпоративный сайт» и «bxready: сайт компании»
Если личный кабинет нужен просто как часть имиджевого функционала или просто как факт, без какой-то особой нагрузки, эти два готовых сайта подойдут идеально. В их личном кабинете можно только посмотреть или поменять собственные личные данные:
Alpha – Корпоративный сайт
BXReady – Сайт компании
Фактически, личного кабинета в этих решениях и нет, просто реализована регистрация и авторизация на сайте. Наверное неплохой вариант, если вы предпочитаете завязать всё общение с клиентом на менеджера, а личный кабинет включаете просто «чтобы был», как знак внимания.
Нужен ли вообще личный кабинет, если нет прямых продаж?
С практической точки зрения – не очень, со статусной – более чем. Люди любят дополнительное внимание, и само присутствие ЛК становится ещё одним плюсиком в копилку лояльности к вашей компании.
Позвольте пользователям видеть их пароли
Эта опция полезна при авторизации точно так же, как и при регистрации. Если пользователи не видят символов в поле, они легко могут опечататься, после чего им придется вводить пароль заново до тех пор, пока они не введут его правильно.
Проблема состоит в том, что пользователь не знает, какой именно символ он ввел неправильно, и не может исправить ошибку с первого раза. Это требует больше усилий, и замедляет пользователя. От этой проблемы можно избавиться, включив в форму чекбокс «показать пароль».
Позволяйте пользователям скопировать платежный адрес из адреса доставки
В США и других странах пользователь, желая приобрести что-то в сети, должен указать не только адрес доставки товара, но еще и так называемый адрес оплаты (по нему может быть доставлен чек). В большинстве случаев эти адреса совпадают, так почему бы не разрешить пользователям скопировать их из одного в другой?
Работа с токенами
Полученные от KeyCloak access_token и refresh_token будем хранить в localStorage. Создадим для работы с токенами и localStorage утилитарный класс TokenUtils.js:
Разграничение интерфейса по ролям
Для того чтобы предоставить на фронте доступ к интерфейсу/функционалу соответствующий каждой роли, нам остается вызвать в соответствующих местах ранее созданный метод TokenUtils.hasRole(‘role_name’).
Например, отрисовка элементов Tab будет выглядеть следующим образом:
Разумный максимум – «аспро: корпоративный сайт 2.0» и «аспро: приорити»
Достойный личный кабинет реализован в решениях «Аспро». Выглядит он следующим образом (на примере «Аспро: Корпоративный сайт 2.0»):
Аспро: Корпоративный сайт 2.0
Можно настроить подписку на материалы с сайта
Здесь же легко посмотреть все материалы по интересным категориям, за любой период
И, как вишенка на торте, есть возможность напрямую связаться с директором компании – клиенты это ценят
Именно решения «Аспро: Корпоративный сайт 2.0» и «Аспро: Приорити» мы выбрали для нашего клиента.
Сервис авторизации
Итак, первое что нужно для нашей задачи – сервис авторизации (далее auth server) осуществляющий авторизацию пользователей (предоставление access_token), продление токена (refresh_token) и валидацию токена. Сам сервис будет максимально простым и содержать минимум boilerplate кода, потому что большая его частьбудет переложена на “плечи” KeyCloak.
Поскольку сам auth server будет написан на Spring Boot, для его интеграции с KeyCloak будем использовать Spring Boot KeyCloak Adapter. Данное решение рекомендуют сами разработчики KeyCloak.
Спрашивайте имя пользователя уже после регистрации
Во время заполнения формы регистрации от пользователя требуется придумать и ввести уникальное имя. И если пользователь придумывает и вводит уже кем-то занятое имя, ему приходится думать еще, он тратит свое время и терпение. Вместо того чтобы требовать у посетителей имя в процессе регистрации, вы вполне можете спросить его сразу после этого процесса.
Спрашивайте пароль только один раз
Многие формы регистрации предлагают пользователям ввести пароль в два поля. Причины этого вполне понятны — вводимый пароль в форме прячется за маской из соображений безопасности: так люди за спиной не смогут его увидеть. А два поля в этом случае помогают избежать опечаток.
Однако на практике это приводит к еще большему количеству ошибок, потому что пользователю приходится печатать больше. Он не видит, какие символы вводит, и каждый раз при вводе пароля не уверен в том, что печатает правильный пароль.
Более эффективным подходом было бы просить пользователя заполнить пароль только один раз, и включить в форму чекбокс, галочка в котором снимет маску с поля и позволит пользователю проверить правильность введенного пароля. Такой подход поможет уменьшить количество полей и избавит пользователя от лишней работы.
Страница авторизации
На странице авторизации создадим метод login и повесим его в качестве обработчика на кнопку «Войти».
AuthPage.js:
const login = async () => {
await authenticate(credentials.login, credentials.password)
.then(() => {
window.location.href = '/';
}).catch(() => setError(true));
};Здесь мы вызываем созданный ранее метод authenticate, а в качестве обработчика успешного выполнения метода передаем редирект на корневой маппинг приложения (‘/’). В качестве обработчика ошибки выполнения метода передаем вызов функции setError, в моем случае – это просто установка хука error, означающего, что надо показать сообщение об ошибке.
Упрощаем форму регистрации
Цель любой веб-формы заключается в том, чтобы пользователь легко и правильно ее заполнил.
Если форма слишком длинная и сложная, то впечатление пользователя от сайта может быть испорчено. Ниже представлено несколько приемов, которые помогут сделать так, чтобы пользователи заполняли ваши формы легко и быстро.
Упрощаем формы входа на сайт
Задача любой формы авторизации — пустить пользователя в его аккаунт. Не смотря на такую простую задачу, одни формы авторизации решают ее лучше других. Вот вам несколько простых способов того, как помочь пользователям входить в свой аккаунт легче и быстрее.
Заключение
Ваши формы регистрации и авторизации не должны усложнять жизнь пользователям, ведь заполнение форм — это то еще развлечение. Наши советы помогут вам сделать формы проще и эффективнее, так что путь ваших пользователей к содержимому сайта будет короче и приятней.
.PS от переводчиков:Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста 🙂
В заключение
Для лаконичности статьи я максимально упростил технические решения, пытаясь акцентировать внимание на самом подходе.
Стоит отметить, что в случае взаимодействия фронта только с одним сервисом, стоит пересмотреть решение, исключив nginx, как инструмент для предварительной проверки авторизованности запроса (метод /validate вызываемый каждый раз перед вызовом сервиса). В таком случае весь механизм работы с spring-keycloak-adapter переносится в единственный сервис (back).
Также, возможно, полезно будут следующие материалы: