Продолжаем цикл материалов, посвященных разработке гибридных приложений. Этот текст будет целиком и полностью посвящен теме авторизации пользователей. В предыдущей статье мы описали процесс создания простого TODO приложения без авторизации. В результате у нас возник один глобальный список задач для всех пользователей. А это не есть хорошо. Для устранения возникшей проблемы мы сохраним отдельный список задач для каждого пользователя и введем авторизацию.
Исходные коды примера можно найти на GitHub:
https://github.com/c3gdlk/ionic_parse_todo
Как гласит народная мудрость, нормальные герои всегда идут в обход. Мы считаем себя вполне нормальными героями и неожиданно начинаем с выхода из приложения (Sign Out, Logout). Сперва нам предстоит разобраться с его размещением. В процессе же решения этой проблемы — ознакомиться с практикой использования боковых панелей (Sidebar) в Ionic.
Первое, что нам нужно — глобальный контроллер
Приступим. Добавляем глобальный контроллер. Его задача — обработка нажатия на кнопку Sign Out. Изменяем маршрутизацию и добавляем контроллер для состояния по умолчанию.
Созданный глобальный контроллер помещаем в файл js/controllers.js
Краткий комментарий к коду
$ionicSideMenuDelegate используется для управления боковой панелью. На страницах и экранах она нам не понадобится. Однако нам понадобится метод, который определит необходимость показа боковой панели. По факту она будет присутствовать на странице, но не будет открываться. На тех же страницах, где боковая панель вообще не нужна, мы просто не будем отображать ее иконку и реагировать на прокрутку влево.
Такова логика работы кнопки выхода из приложения:
- сбросить авторизацию в Parse;
- закрыть боковую панель;
- перейти на страницу/экран авторизации.
Теперь вносим изменения в верстку нашего приложения. Как уже было сказано, боковая панель определяется для всего приложения, а не для конкретных страниц/экранов. В коде приложения мы всего лишь ограничиваем ее доступность в зависимости от статуса пользователя:
Объявляем ion-side-menus главным контейнером нашего приложения. Объявляем состав меню в левой боковой панели.
side, width, is-enabled — параметры, которые принимает директива.
Как любое стандартное view, наше view должно содержать директиву <ion-content>. В нее помещается разметка меню приложения и кнопка выхода (Sign Out, событие на клик по этой кнопке будет прописано в MainController)
Объявляем главный контейнер для контента (не забываем о том, что сюда же нужно перенести код nav-bar):
Остается лишь добавить кнопку открытия меню в дополнение к реакции на горизонтальную прокрутку экрана.
Следующий шаг — создание таблицы в Parse с предопределенным типом User
Получаем таблицу с полями
- Username — имя пользователя;
- Password — пароль;
- authData — дата авторизации;
- emailVerified — флаг верификации email;
- Email — адрес электронной почты.
Прописываем новые маршруты:
В первой статье этого цикла мы нарушали каноны HMVC архитектуры. Теперь настало время их соблюсти. Создаем новый контроллер для авторизации пользователя
Для авторизации используем функцию logIn из Parse SDK. Она затачивается под получение валидной пары из имени пользователя и пароля. Но мы немного усложним задачу и дадим возможность авторизоваться с помощью email адреса. Для этого вводим проверку на наличие символа @ в имени пользователя. При положительном исходе, активируется поиск пользователя, зарегистрированного под этим адресом. Затем его данные передаются на обработку функции logIn.
Создаем шаблон страницы авторизации templates/sign-in.html
Вот и все.
Подведем итоги
- Мы расширили функционал приложения. Теперь пользователь может авторизоваться и выходить из него.
- Маршрутизацию и шаблоны стоит хранить в соответствующих директориях. Например, все, что связано с авторизацией следует размещать в директории authentication.
- На сегодня мы еще не реализовали процедуру регистрации пользователей. Эту тему мы раскроем в одной из следующих статей.
- Кроме того, в последующих статьях мы затронем тему валидации вводимых значений в формах нашего приложения.
