В моем предыдущем уроке мы увидели, как начать создавать мобильное приложение с использованием платформы Mootor . Мы реализовали функциональность входа пользователя с использованием платформы Mootor и Firebase .
В этом уроке мы реализуем функциональность регистрации с помощью Firebase в качестве серверной части.
Мы изменим реализацию входа, так как firebase выпустил новую версию, а автономный клиент FirebaseSimpleLogin, который мы использовали в первом руководстве, устарел и добавлен в ядро Firebase.
Исходный код из этого урока доступен на GitHub .
Начиная
Чтобы начать, клонируйте предыдущее руководство от GitHub .
git clone https://github.com/sitepoint-examples/MootorFrameworkApp_Part1 После того, как исходный код был клонирован, перейдите в каталог проекта и установите необходимые зависимости:
cd MootorFrameworkApp_Part1 npm install
Далее запустите сервер
npm start
Откройте http://localhost:8000/examples/BucketApp/ в вашем браузере, и приложение должно быть запущено.
Включить скрипт Firebase
Перейдите к examples/BucketApp/index.html и замените оба существующих сценария examples/BucketApp/index.html более новой версией:
<script src="https://cdn.firebase.com/js/client/2.0.5/firebase.js"></script>
Изменение реализации входа
Поскольку FirebaseSimpleLogin устарел, нам не нужно создавать экземпляр FirebaseSimpleLogin . Откройте examples/BucketApp/views/index/index.js и удалите ссылки на объект auth , в результате приведенный ниже код:
(function($) { "use strict"; m.app.view("index").on("ready", function() { // create the firebase object var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com'); // form on submit event $("#myForm").on("submit", function() { var email = $('#txtEmail').val(); var password = $('#txtPass').val(); firebaseRef.authWithPassword({ "email": email, "password": password }, function(error, authData) { if (error) { console.log("Login Failed!", error); } else { console.log("Authenticated successfully ", authData); window.location.href = "#userhome"; } }); return false; }); }); }(window.$));
Вместо этого, с экземпляром Firebase, firebaseRef , мы можем аутентифицировать адреса электронной почты и пароли, используя метод authWithPassword .
Как видно выше, вызов authWithPassword возвращает authData если проблем нет, и error если таковые имеются. Если ошибок нет, мы перенаправляем пользователя на домашнюю страницу.
Сохраните все изменения, перезапустите сервер, откройте http://localhost:8000/examples/BucketApp/ в своем браузере и попробуйте войти в систему, используя адрес электронной почты sam@sam.com и пароль sam .
Используя новую версию firebase, нам также нужно изменить реализацию выхода из firebase. Откройте examples/BucketApp/views/userhome/userhome.js и удалите объект auth, так как он больше не понадобится. Используя firebaseRef мы unauth метод unauth который выйдет из сеанса текущего пользователя. Результаты в коде ниже:
(function($) { "use strict"; m.app.view("userhome").on("ready", function() { // create the firebase object var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com'); $("#btnLogout").click(function() { firebaseRef.unauth(); window.location.href = ""; }); }); }(window.$));
Создание страницы регистрации
Перед созданием страницы регистрации мы изменим страницу входа, чтобы включить ссылку на страницу регистрации. Откройте BucketApp/views/index/index.html и добавьте следующий HTML-код заголовка.
<header> <h1> Simple Mootor App </h1> <nav> <a target="_blank" href="#signup"> <span class="m-icon-add-circle"></span> </a> </nav> </header>
Сохраните изменения и перезапустите сервер. Откройте http://localhost:8000/examples/BucketApp/ в своем браузере, и у вас должен быть значок плюса в правом верхнем углу приложения.
Теперь давайте создадим страницу регистрации. Откройте examples/BucketApp/views и создайте папку с именем signup . Внутри папки signup создайте signup.html , signup.js и signup.css . Добавьте следующий HTML-код в signup.html :
<header> <h1> User Registration </h1> </header> <form id="myForm" class="m-form m-padding"> <fieldset class="m-form-top-labels"> <div class="m-field"> <input id="txtEmailId" type="text" class="m-text" placeholder="Email Id" /> </div> <div class="m-field"> <input id="txtPassword" type="password" class="m-text" placeholder="Password" /> </div> </fieldset> <button id="btnSignUp" type="button" class="m-button m-button-success m-button-block">Sign Up</button> </form>
Далее мы установим маршрут для добавленного представления signup . Откройте examples/BucketApp/index.js и добавьте маршрут для страницы signup :
app.route("^#signup", app.view("signup"));
Сохраните все изменения и перезапустите сервер. Откройте приложение и на экране входа нажмите значок плюса, чтобы перейти к экрану регистрации. Вот как должен выглядеть экран регистрации:
Реализация функциональности SignUp
Когда загрузится просмотр, мы добавим событие нажатия кнопки « Sign Up . Откройте examples/BucketApp/views/signup/signup.js и объявите функциональный блок onready state, как показано ниже:
(function($) { "use strict"; m.app.view("signup").on("ready", function() { // we'll attach the button click here !! }); }(window.$));
Теперь добавьте вызов события click кнопки регистрации внутри функции ready .
(function($) { "use strict"; m.app.view("signup").on("ready", function() { // on click $("#btnSignUp").on("click", function() { // Sign Up logic will be here }); }); }(window.$));
Firebase предоставляет метод API с именем createUser, который мы будем использовать для регистрации нашего пользователя.
Итак, сначала создайте объект Firebase, используя URL-адрес firebase:
var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');
После нажатия кнопки регистрации мы прочитаем адрес электронной почты и пароль из формы и createUser метод API Firebase createUser для создания нового пользователя.
$("#btnSignUp").on("click", function() { var email = $('#txtEmailId').val(); var password = $('#txtPassword').val(); var ref = new Firebase("https://burning-fire-1723.firebaseio.com"); ref.createUser({ email: email, password: password }, function(error) { if (error) { switch (error.code) { case "EMAIL_TAKEN": console.log("The email is already in use."); break; case "INVALID_EMAIL": console.log("The email is not a valid email."); break; default: console.log("Error creating user:", error); } } else { console.log("User account created successfully!"); } }); });
Как видите, после createUser вызова createUser об createUser выполнении можно увидеть в консоли браузера.
Сохраните все изменения, перезагрузите сервер, откройте http://localhost:8000/examples/BucketApp/#signup в вашем браузере и зарегистрируйте нового пользователя. При успешной регистрации вы увидите сообщение об успехе в консоли браузера.
Давайте добавим редирект на страницу входа при успешной регистрации пользователя. Добавьте следующий код после сообщения консоли, чтобы перенаправить на страницу входа.
window.location.href = "";
Сохраните изменения и перезапустите сервер. Откройте страницу регистрации и попробуйте зарегистрироваться, используя новый адрес электронной почты и пароль. При успешной регистрации пользователя вы будете перенаправлены на страницу входа.
Вывод
В этом руководстве мы использовали новую версию Firebase для повторной реализации функции регистрации в веб-приложении, в котором использовалась платформа Mootor . Мы также изменили функциональность входа в соответствии с новыми API Firebase.
Подробную информацию о структуре можно найти в официальных документах . Дайте мне знать ваши мысли в комментариях ниже!