Гибридные мобильные приложения. Часть 2: авторизация пользователей

Дата публикации:

Продолжаем цикл материалов, посвященных разработке гибридных приложений. Этот текст будет целиком и полностью посвящен теме авторизации пользователей. В предыдущей статье мы описали процесс создания простого 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

fxasZlN

Получаем таблицу с полями

  • Username — имя пользователя;
  • Password — пароль;
  • authData — дата авторизации;
  • emailVerified — флаг верификации email;
  • Email — адрес электронной почты.

Прописываем новые маршруты:

В первой статье этого цикла мы нарушали каноны HMVC архитектуры. Теперь настало время их соблюсти. Создаем новый контроллер для авторизации пользователя

Для авторизации используем функцию logIn из Parse SDK. Она затачивается под получение валидной пары из имени пользователя и пароля. Но мы немного усложним задачу и дадим возможность авторизоваться с помощью email адреса. Для этого вводим проверку на наличие символа @ в имени пользователя. При положительном исходе, активируется поиск пользователя, зарегистрированного под этим адресом. Затем его данные передаются на обработку функции logIn.

Создаем шаблон страницы авторизации templates/sign-in.html

Вот и все.

Подведем итоги

  • Мы расширили функционал приложения. Теперь пользователь может авторизоваться и выходить из него.
  • Маршрутизацию и шаблоны стоит хранить в соответствующих директориях. Например, все, что связано с авторизацией следует размещать в директории authentication.
  • На сегодня мы еще не реализовали процедуру регистрации пользователей. Эту тему мы раскроем в одной из следующих статей.
  • Кроме того, в последующих статьях мы затронем тему валидации вводимых значений в формах нашего приложения.

Продолжение следует.

Мы Крым Диджитал

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

Подпишись
на наши новости

Контакты пресс-службы

+ 7 (926) 118-80-32

WhatsApp, Viber, Telegram

Давайте обсудим Ваш проект

или свяжитесь с нами по почте projects@crimeadigital.ru

Нажимая кнопку «Отправить», вы даете согласие на обработку персональных данных

Прошел день карьеры в СевГУ

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая. Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы. Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов — как начать свою карьеру в ИТ? Есть ли возможность совмещать учебу с работой? Кем я смогу стать? Как понять, кем я хочу работать? И многие другие.

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая.

Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы.

Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов - как начать свою карьеру в ИТ?

Есть ли возможность совмещать учебу с работой?

Кем я смогу стать?

Как понять, кем я хочу работать?

И многие другие.

Завершен набор студентов на летнюю практику

Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться — front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.
Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться - front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.

Крым Диджитал приняла участие в стратегической сессии

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня. Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства. Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня.

Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.
Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства.

Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Выпуск курса Software Testing

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing! Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании. Следующий курс намечен на август. Не пропусти анонс записи!

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing!

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

Следующий курс намечен на август. Не пропусти анонс записи!