Регистрация пользователей — это фундамент, который позволяет вам предоставлять персонализированные возможности пользователям ваших мобильных приложений. В этом руководстве по jQuery Mobile мы создадим систему регистрации пользователей для приложения jQuery Mobile.
В предыдущем руководстве jQuery Mobile этой серии мы разработали и создали страницы jQuery Mobile, которые мы будем использовать в приложении, которое является предметом данной статьи. В недавнем руководстве по NodeJ и MongoDB мы также создали бэкэнд, который будет выполнять регистрацию и сохранять профили пользователей.
Теперь мы собираемся соединить две части и создать и сквозную систему, которая позволяет пользователям регистрироваться в приложении. Давайте начнем с создания нескольких вспомогательных файлов.
Пользовательский интерфейс регистрации пользователя
Мы создали структуру каталогов для приложения в предыдущем уроке. Напоминаем, что каталоги проекта выглядят так:
В проекте страницы jQuery Mobile, которые мы будем использовать в процессе регистрации пользователей, размещаются в файлах index.html, sign-up.html и signup-successeded.html.
Создание файла настроек
Мы собираемся использовать файл JavaScript для хранения настроек приложения. В этот файл войдут только те параметры, которые не могут быть изменены пользователем. Давайте продолжим и создадим файл settings.js в каталоге js, как показано ниже.
Теперь мы введем следующий код в файл:
var BookIt = BookIt || {};
BookIt.Settings = BookIt.Settings || {};
BookIt.Settings.signUpUrl = "http://localhost:30000/api/account/register";
Пока мы собираемся сохранить только одну настройку в файле. Параметр — это URL-адрес конечной точки сервера, который будет обрабатывать запросы регистрации пользователей, сделанные из приложения. Помните, что введенное мной значение — это то, что я использую на своей рабочей станции. Вам нужно будет изменить этот URL, чтобы он работал в вашей собственной среде разработки.
Файл index.html должен содержать ссылку на файл settings.js. Давайте перейдем к файлу index.html и добавим ссылку, как показано ниже:
<link href="./css/themes/1/conf-room1.min.css" rel="stylesheet" /> <link href="./css/themes/1/jquery.mobile.icons.min.css" rel="stylesheet" /> <link href="../../../lib/jqm/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" /> <link href="./css/app.css" rel="stylesheet" /> <script src="../../../lib/jquery/2.1.1/jquery-2.1.1.min.js"></script> <script src="js/settings.js" type="text/javascript"></script> <script src="../../../lib/jqm/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Файл сообщений Api
Далее мы собираемся создать файл для хранения кодов сообщений, которые сервер вернет в приложение. Давайте создадим файл api-messages.js в каталоге js:
Мы собираемся ввести следующий код в файл:
var BookIt = BookIt || {};
BookIt.ApiMessages = BookIt.ApiMessages || {};
BookIt.ApiMessages.EMAIL_NOT_FOUND = 0;
BookIt.ApiMessages.INVALID_PWD = 1;
BookIt.ApiMessages.DB_ERROR = 2;
BookIt.ApiMessages.NOT_FOUND = 3;
BookIt.ApiMessages.EMAIL_ALREADY_EXISTS = 4;
BookIt.ApiMessages.COULD_NOT_CREATE_USER = 5;
BookIt.ApiMessages.PASSWORD_RESET_EXPIRED = 6;
BookIt.ApiMessages.PASSWORD_RESET_HASH_MISMATCH = 7;
BookIt.ApiMessages.PASSWORD_RESET_EMAIL_MISMATCH = 8;
BookIt.ApiMessages.COULD_NOT_RESET_PASSWORD = 9;
BookIt.ApiMessages.PASSWORD_CONFIRM_MISMATCH = 10;
Обратите внимание, как имя каждой переменной показывает ее намерение. Если вы уже читали статью, в которой мы создали бэкэнд регистрации пользователей , вы также заметите, что значения в только что созданном классе ApiMessages соответствуют значениям в классе ApiMessages на стороне сервера. Вы можете найти этот класс в файле server / models / api-messages.js.
На файл api-messages.js также необходимо ссылаться из файла index.html. Давайте добавим ссылку, как показано ниже:
<link href="./css/themes/1/conf-room1.min.css" rel="stylesheet" /> <link href="./css/themes/1/jquery.mobile.icons.min.css" rel="stylesheet" /> <link href="../../../lib/jqm/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" /> <link href="./css/app.css" rel="stylesheet" /> <script src="../../../lib/jquery/2.1.1/jquery-2.1.1.min.js"></script> <script src="js/settings.js" type="text/javascript"></script> <script src="js/api-messages.js" type="text/javascript"></script><script src="../../../lib/jqm/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Модуль регистрации
С точки зрения пользовательского интерфейса, процесс регистрации включает в себя регистрацию и успешные регистрации jQuery Mobile:
Модуль регистрации — это место, где мы разместим код, чтобы захватить имя пользователя, адрес электронной почты и пароль и отправить его на сервер. Когда пользователь посещает страницу регистрации и нажимает кнопку «Отправить», модуль регистрации выполняет следующие операции.
Во-первых, он подтвердит имя, адрес электронной почты и пароль, введенные пользователем. Если какое-либо из полей недопустимо, модуль предупредит пользователя. Если поля действительны, модуль отправит запрос на регистрацию пользователя на сервере.
Наконец, модуль обработает ответ сервера и либо активирует страницу успешной регистрации, либо покажет пользователю сообщение об ошибке.
Давайте создадим файл sign-up.js в каталоге js:
Теперь мы добавим пустой файл в файл:
(function () {
})();
Прежде чем перейти к коду модуля, давайте перейдем к файлу index.html и добавим ссылку на файл sign-up.js:
<link href="./css/themes/1/conf-room1.min.css" rel="stylesheet" /> <link href="./css/themes/1/jquery.mobile.icons.min.css" rel="stylesheet" /> <link href="../../../lib/jqm/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" /> <link href="./css/app.css" rel="stylesheet" /> <script src="../../../lib/jquery/2.1.1/jquery-2.1.1.min.js"></script> <script src="js/settings.js" type="text/javascript"></script> <script src="js/api-messages.js" type="text/javascript"></script> <script src="js/sign-up.js" type="text/javascript"></script> <script src="../../../lib/jqm/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Добавление функций проверки
Вернувшись в файл sign-up.js, мы добавим вначале три вспомогательные функции. Первая функция позволит нам проверить формат адреса электронной почты, введенного пользователем, который пытается зарегистрироваться:
var emailAddressIsValid = function (email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
Далее мы добавим функцию, которая проверяет, совпадают ли значения, введенные в полях пароля и подтверждения пароля.
Мы хотим убедиться, что эти значения равны, чтобы мы могли отправить регистрационные данные на сервер.
var passwordsMatch = function (password, passwordConfirm) {
return password === passwordConfirm;
};
Наконец, функция для проверки того, что пароль пользователя достаточно сложен:
var passwordIsComplex = function (password) {
// TODO: implement password complexity rules here. There should be similar rule on the server side.
return true;
};
Я предоставил реализацию без каких-либо правил сложности. Я позволю вам решить, какие правила имеют смысл для вашего конкретного приложения и среды. Например, вы можете проверить, что длина пароля превышает определенное количество символов или что пароль содержит цифры и символы.
Захват метчиков на кнопке «Отправить»
Имея функции проверки на месте, мы можем перейти к получению данных, введенных пользователем. Наша цель — проверить и отправить данные, когда пользователь нажимает кнопку «Отправить». Это означает, что нам нужно создать обработчик касания для кнопки до того, как пользователю будет показана страница jQuery Mobile.
jQuery Mobile предоставляет доступ к событиям в жизненном цикле страницы jQuery Mobile. Мы будем использовать событие beforecreate страницы, чтобы связать наш обработчик нажатий для кнопки отправки. Это событие срабатывает до создания страницы jQuery Mobile. Мы хотим, чтобы обработчик касаний был уже подключен, когда страница создана и показана пользователю.
Давайте добавим следующий код в файл sign-up.js:
$(document).delegate("#page-signup", "pagebeforecreate", function () {
var $signUpPage = $("#page-signup"),
$btnSubmit = $("#btn-submit", $signUpPage);
$btnSubmit.off("tap").on("tap", function () {
});
});
Мы просто настроили функцию-обработчик для события Pagecidate Page Widget jQuery Mobile , которое запускается перед созданием страницы. Поскольку мы хотим перехватить событие beforecreate на странице регистрации, мы используем селектор # page-signup при создании обработчика.
Внутри функции обработчика мы получаем ссылку на кнопку «Отправить» и создаем обработчик для ее события касания. Обратите внимание, как мы сначала используем функцию off в jQuery, чтобы удалить все предыдущие обработчики для события tap.
Далее мы хотим создать некоторые переменные, которые позволят нам собирать данные, введенные пользователем в поля имени, адреса электронной почты и пароля на странице регистрации. Внутри обработчика нажатия кнопки «Отправить» введите следующий код:
var $ctnErr = $("#ctn-err"),
$txtFirstName = $("#txt-first-name"),
$txtLastName = $("#txt-last-name"),
$txtEmailAddress = $("#txt-email-address"),
$txtPassword = $("#txt-password"),
$txtPasswordConfirm = $("#txt-password-confirm");
var firstName = $txtFirstName.val().trim(),
lastName = $txtLastName.val().trim(),
emailAddress = $txtEmailAddress.val().trim(),
password = $txtPassword.val().trim(),
passwordConfirm = $txtPasswordConfirm.val().trim(),
invalidInput = false,
invisibleStyle = "bi-invisible",
invalidInputStyle = "bi-invalid-input";
Первые пять переменных являются ссылками на элемент div, который поможет нам отображать сообщения об ошибках для пользователя, а также на элементы управления вводом, где пользователь будет вводить данные своего профиля.
Переменные firstName, lastName, emailAddress, password и passwordConfirm хранят фактические значения, введенные пользователем.
Переменная invalidInput является вспомогательной переменной, которую мы будем использовать при проверке пользовательского ввода. Переменные invisibleStyle и invalidInputStyle будут содержать имена классов CSS, которые определяют стили невидимых элементов и недопустимых элементов управления соответственно.
Давайте быстро откроем файл app.css и добавим следующие стили:
.bi-invalid-input {
background-color:#fffacd!important;
}
.bi-invisible {
display:none;
}
.bi-ctn-err {
background-color:#ffe1cd;
padding:0 .5em;
margin-bottom:.5em;
border: 1px solid #e9cfbd;
border-radius:3px 3px;
}
Когда эти стили применяются, недопустимые поля будут выглядеть так, как показано ниже.
Сброс стилей
Давайте вернемся к файлу sign-up.js. После объявления наших переменных мы хотим удалить любой из стилей «недопустимого ввода» из контейнера ошибок страницы входа и полей ввода, которые могут остаться на месте с момента последнего открытия страницы пользователем:
// Reset styles. $ctnErr.removeClass().addClass(invisibleStyle); $txtFirstName.removeClass(invalidInputStyle); $txtLastName.removeClass(invalidInputStyle); $txtEmailAddress.removeClass(invalidInputStyle); $txtPassword.removeClass(invalidInputStyle); $txtPasswordConfirm.removeClass(invalidInputStyle);
Подсветка пустых полей
Далее мы хотим проверить, что ни одно из обязательных полей, которые в данном случае являются всеми полями, не являются пустыми. Вот как мы собираемся это сделать:
// Flag each invalid field.
if (firstName.length === 0) {
$txtFirstName.addClass(invalidInputStyle);
invalidInput = true;
}
if (lastName.length === 0) {
$txtLastName.addClass(invalidInputStyle);
invalidInput = true;
}
if (emailAddress.length === 0) {
$txtEmailAddress.addClass(invalidInputStyle);
invalidInput = true;
}
if (password.length === 0) {
$txtPassword.addClass(invalidInputStyle);
invalidInput = true;
}
if (passwordConfirm.length === 0) {
$txtPasswordConfirm.addClass(invalidInputStyle);
invalidInput = true;
}
// Make sure that all the required fields have values.
if (invalidInput) {
$ctnErr.html("<p>Please enter all the required fields.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
return;
}
Если какое-либо обязательное поле пусто, мы применяем стиль «неверный ввод» и устанавливаем для переменной invalidInput значение true. Если после проверки каждого поля для переменной invalidInput задано значение true, мы делаем сообщение об ошибке в верхней части страницы видимым и сообщаем пользователю, что ему необходимо ввести значения для всех полей.
Проверка адреса электронной почты
Следующая проверка применяется к полю адреса электронной почты. В этом случае мы хотим убедиться, что пользователь ввел значение, отформатированное как адрес электронной почты:
if (!emailAddressIsValid(emailAddress)) {
$ctnErr.html("<p>Please enter a valid email address.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
$txtEmailAddress.addClass(invalidInputStyle);
return;
}
В приведенном выше коде мы вызываем функцию emailAddressIsValid, которую мы создали ранее в этой статье, чтобы проверить формат текста в поле адреса электронной почты. Если функция возвращает false, мы активируем сообщение об ошибке в верхней части страницы и выделяем поле адреса электронной почты, используя стиль «неверный ввод».
Подтверждение пароля
Теперь мы собираемся перейти к проверке пароля на стороне клиента, которую мы выполним в два этапа. Во-первых, мы хотим убедиться, что значения в пароле и пароле подтверждают совпадение. Для проверки мы будем использовать созданную ранее функцию passwordsMatch. Давайте добавим следующий код:
if (!passwordsMatch(password, passwordConfirm)) {
$ctnErr.html("<p>Your passwords don't match.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
$txtPassword.addClass(invalidInputStyle);
$txtPasswordConfirm.addClass(invalidInputStyle);
return;
}
Второй шаг — проверка сложности пароля:
if (!passwordIsComplex(password)) {
// TODO: Use error message to explain password rules.
$ctnErr.html("<p>Your password is very easy to guess. Please try a more complex password.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
$txtPassword.addClass(invalidInputStyle);
$txtPasswordConfirm.addClass(invalidInputStyle);
return;
}
Здесь мы выполняем проверку, вызывая функцию passwordIsComplex, которую мы создали ранее. Помните, что я оставил вам реализацию правил проверки внутри функции.
Отправка данных регистрации на сервер
Мы находимся в точке, где мы выполнили все проверки, которые мы намеревались сделать на стороне клиента. Осталось только отправить запрос на регистрацию пользователя на сервере. Давайте добавим следующий код в модуль:
$.ajax({
type: 'POST',
url: BookIt.Settings.signUpUrl,
data: "email=" + emailAddress + "&firstName=" + firstName + "&lastName=" + lastName + "&password=" + password + "&passwordConfirm=" + passwordConfirm,
success: function (resp) {
if (resp.success === true) {
$.mobile.navigate("signup-succeeded.html");
return;
} else {
if (resp.extras.msg) {
switch (resp.extras.msg) {
case BookIt.ApiMessages.DB_ERROR:
case BookIt.ApiMessages.COULD_NOT_CREATE_USER:
// TODO: Use a friendlier error message below.
$ctnErr.html("<p>Oops! BookIt had a problem and could not register you. Please try again in a few minutes.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
break;
case BookIt.ApiMessages.EMAIL_ALREADY_EXISTS:
$ctnErr.html("<p>The email address that you provided is already registered.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
$txtEmailAddress.addClass(invalidInputStyle);
break;
}
}
}
},
error: function (e) {
console.log(e.message);
// TODO: Use a friendlier error message below.
$ctnErr.html("<p>Oops! BookIt had a problem and could not register you. Please try again in a few minutes.</p>");
$ctnErr.addClass("bi-ctn-err").slideDown();
}
});
В коде мы отправляем запрос POST через Ajax на URL, который мы сохранили в переменной Settings.signUpUrl. Это URL-адрес учебника по конечной точке сервера этой серии. Мы используем переменную данных для отправки строки в кодировке URL с атрибутами профиля пользователя, которые необходимы серверу для регистрации пользователя.
В обратном вызове запроса мы проверяем свойство успеха ответа, отправленного сервером. Если для параметра success установлено значение true, то есть регистрация прошла успешно, мы переходим на страницу «регистрация прошла успешно». Мы создадим эту страницу через пару минут.
Если для свойства success не установлено значение true, что означает, что запрос не выполнен, мы проверяем свойство extras.msg ответа. Значение этого свойства описывает причину сбоя запроса.
Мы используем это значение для отображения соответствующего сообщения об ошибке пользователю в верхней части формы. Вы можете обратиться к руководству по конечной точке сервера этой серии для получения более подробной информации о том, как обрабатываются условия ошибки на стороне сервера.
В обратном вызове Ajax-запроса мы показываем пользователю сообщение об ошибке.
Страница успешной регистрации
Последняя часть, которую нам нужно добавить, это страница «регистрация прошла успешно». Первоначально мы не создавали эту страницу в статье, где мы разработали пользовательский интерфейс для процесса регистрации пользователей.
Давайте создадим файл signup-successeded.html в корневом каталоге проекта.
В файле добавьте следующий код.
<!DOCTYPE html> <html> <head> <title>BookIt</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="./css/themes/1/conf-room1.min.css" rel="stylesheet" /> <link href="./css/themes/1/jquery.mobile.icons.min.css" rel="stylesheet" /> <link href="../../../lib/jqm/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" /> <link href="./css/app.css" rel="stylesheet" /> <script src="../../../lib/jquery/2.1.1/jquery-2.1.1.min.js"></script> <script src="js/sign-up.js" type="text/javascript"></script> <script src="../../../lib/jqm/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" data-bookit-page="index"> <div data-role="header" data-theme="c"> <h1>Book It</h1> </div><!-- /header --> <div role="main" class="ui-content"> <h2 class="mc-text-center">Registration Succeeded</h2> <p class="mc-top-margin-1-5">Congratulations! You are now registered with BookIt.</p> <a href="sign-in.html" class="ui-btn ui-btn-b ui-corner-all">Sign In</a> <p></p> </div><!-- /content --> </div><!-- /page --> </body> </html>
Вот как страницы выглядят в браузере:
Теперь вы можете пойти дальше и протестировать приложение. Запустите бэкэнд вашего node.js, откройте приложение в браузере и попробуйте зарегистрироваться в приложении. Обязательно проверьте все условия ошибки.
Резюме и следующие шаги
Многие из современных мобильных приложений не работают, если вы сначала не зарегистрировались в приложении. В этом уроке по jQuery Mobile мы узнали, как создать систему регистрации пользователей в приложении jQuery Mobile.
Система регистрации пользователей состоит из трех отдельных частей:
- Страница jQuery Mobile, где пользователи вводят свои регистрационные данные.
- Модуль JavaScript, который проверяет введенные данные и отправляет их на сервер.
- Конечная точка на стороне сервера, которая получает регистрационные данные и регистрирует пользователя с помощью серверной базы данных.
В этом уроке мы построили первые две части. Мы уже создали третью часть предыдущей статьи из этой серии руководств по разработке мобильных приложений.
В следующей главе этой серии мы узнаем, как использовать Cordova для упаковки и развертывания приложения jQuery Mobile, над которым мы работаем. Обязательно подпишитесь на мою рассылку, чтобы вы были в числе первых, кто узнает, когда появится следующий учебник.
Скачать исходный код
Загрузите исходный код этого руководства здесь: Руководство по регистрации пользователей jQuery Mobile на GitHub
Все главы этой серии
Вы можете найти все опубликованные части этой серии здесь: Учебное пособие по бронированию конференц-зала .
Оставайтесь в курсе
Не пропустите обновления! Получайте новые статьи и обновления MiamiCoder бесплатно на ваш почтовый ящик.