В первой части этого руководства мы рассмотрели, как приступить к разработке мобильных приложений с использованием пользовательского интерфейса Onsen , проектирования страниц входа и регистрации пользователя. В этом уроке мы сделаем эти страницы функциональными. Мы будем использовать Firebase в качестве бэкэнда для приложения. В пользовательском интерфейсе Onsen мы можем использовать как jQuery, так и AngularJS для разработки. В этом уроке мы будем использовать AngularJS.
Исходный код из этого урока доступен на GitHub .
Начиная
Загрузите или клонируйте исходный код первого учебника. Установите все необходимые зависимости, как показано:
git clone https://github.com/sitepoint-examples/OnsenUI--Part1 cd OnsenUI--Part1 npm install npm install -g gulp gulp serve Укажите в браузере http://localhost:8901/index.html и вы увидите приложение, которое мы разработали в первом уроке. Вы также можете использовать эмулятор Android для запуска приложения, как мы делали в первом уроке.
Реализация входа
Давайте начнем с определения контроллера для нашего приложения. Если вы откроете /OnsenUI--Part1/www/js/app.js вы должны увидеть уже определенный контроллер.
(function() { 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope) { // more to come here }); })();
Сначала мы проверим имя пользователя и пароль для пустых значений. Если есть какие-либо проблемы с проверкой, мы покажем модальное окно с сообщением проверки. В противном случае мы будем аутентифицироваться на базе данных Firebase.
Давайте определим метод с именем SignIn внутри контроллера AppController как показано ниже:
$scope.data = []; $scope.SignIn = function() { var user = $scope.data.username; var pass = $scope.data.password; if (user && pass) { // success logic } else { // failure logic } };
Добавьте директиву ngModel в поля ввода имени пользователя и пароля в index.html как показано ниже:
<input ng-model="data.username" type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" /> <input ng-model="data.password" type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />
Далее мы будем использовать ons-modal компонент Onsen UI, чтобы показать всплывающее окно проверки. Добавьте следующий HTML-код на ons-page входа (должно быть около строки 92).
<ons-modal var="modal"> <br> <br>Invalid Username or Password. <br> </ons-modal>
Теперь добавьте модальный код показа в логику сбоя SignIn , заменив комментарий // failure logic :
modal.show();
Добавьте модальный код скрытия к событию ng-click HTML, который мы только что добавили, как показано ниже:
<ons-modal var="modal" ng-click="modal.hide()"> <br> <br>Invalid Username or Password. <br> </ons-modal>
Добавьте директиву ngClick к кнопке входа, как показано ниже:
<ons-button id="btnSignIn" modifier="large" ng-click="SignIn()"> SignIn </ons-button>
Запустите сервер и нажмите кнопку входа с пустым именем пользователя или паролем. Появится модальное сообщение проверки. Нажмите в любом месте всплывающего окна, и оно исчезнет.
Вот демонстрация приведенного выше кода в действии.
Теперь давайте проверим имя пользователя и пароль по Firebase . Чтобы начать работу с Firebase, вам необходимо зарегистрироваться для бесплатной учетной записи. После регистрации и входа в систему вы получите URL-адрес Firebase, который в моем случае:
https://burning-fire-1723.firebaseio.com/
Включите следующие скрипты в index.html :
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script> <script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>
Во-первых, нам нужно создать экземпляр firebase, используя наш URL-адрес. Затем, используя этот экземпляр firebase, создайте экземпляр FirebaseSimpleLogin . Поместите этот код после определения app.js в app.js :
var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com'); var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) { if (!error) { if (user) { // On success authentication console.log(user); } } });
Внутри функции SignIn мы аутентифицируем имя пользователя и пароль, как показано, заменим текущую функцию на код ниже:
$scope.SignIn = function() { var user = $scope.data.username; var pass = $scope.data.password; if (user && pass) { // success logic auth.login('password', { email: user, password: pass }); } else { // failure logic modal.show(); } };
Мы использовали auth.login для аутентификации имени пользователя и пароля в базе данных firebase. При успешной аутентификации пользователь будет авторизован.
Чтобы включить процесс аутентификации, сначала войдите в firebase и откройте приложение, над которым вы сейчас работаете. В левом меню нажмите « Login & Auth . На вкладке « Email & Password » установите Enable Email & Password Authentication « Enable Email & Password Authentication .
Добавьте нового пользователя в базу данных Firebase с именем пользователя и паролем. Теперь запустите приложение и попробуйте войти, используя новое имя пользователя и пароль. Проверьте консоль браузера, в которой пользователь вошел в систему при успешной аутентификации пользователя.
Вот демонстрация приведенного выше кода в действии. Попробуйте войти, используя имя пользователя [email protected] и пароль sam .
Далее при успешном входе в систему мы перенаправим пользователя на home.html . Создайте новый файл с именем home.html со следующим кодом.
<ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="center">Welcome</div> <div class="right"> <ons-icon icon="ion-log-out" size="40px" title="Logout" style="cursor:pointer;" ng-click="logout()"></ons-icon> </div> </ons-toolbar> <div style="text-align: center"> <br /> <ons-page> <p style="padding-top: 100px; color: #999; text-align: center">Welcome Home {{username}}!!</p> </ons-page> </div> </ons-page> </ons-template>из<ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="center">Welcome</div> <div class="right"> <ons-icon icon="ion-log-out" size="40px" title="Logout" style="cursor:pointer;" ng-click="logout()"></ons-icon> </div> </ons-toolbar> <div style="text-align: center"> <br /> <ons-page> <p style="padding-top: 100px; color: #999; text-align: center">Welcome Home {{username}}!!</p> </ons-page> </div> </ons-page> </ons-template>или<ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="center">Welcome</div> <div class="right"> <ons-icon icon="ion-log-out" size="40px" title="Logout" style="cursor:pointer;" ng-click="logout()"></ons-icon> </div> </ons-toolbar> <div style="text-align: center"> <br /> <ons-page> <p style="padding-top: 100px; color: #999; text-align: center">Welcome Home {{username}}!!</p> </ons-page> </div> </ons-page> </ons-template>
Добавьте новый метод с именем logout как показано ниже:
$scope.logout = function() { auth.logout(); // logging out the firebase $scope.data = []; // clearing user data myNavigator.popPage(); // redirecting to sign in page };
Теперь измените обратный вызов FirebaseSimpleLogin как показано:
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) { if (!error) { if (user) { $scope.username = user.email; myNavigator.pushPage('home.html', { animation: 'slide' }); } } });
Мы использовали ons-navigator для навигации по страницам. myNavigator.pushPage используется для перехода на страницу home.html .
Вот демонстрация приведенного выше кода в действии.
Реализация регистрации
Мы будем реализовывать функциональность регистрации также с использованием Firebase. На странице регистрации у нас есть три поля ввода для регистрации. Мы будем использовать только электронную почту и пароль, так как это все, что требуется для регистрации пользователя Firebase.
Сначала добавьте директиву ngModel в оба поля, как показано:
<ons-list-item> <input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;"> </ons-list-item> <ons-list-item> <input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;"> </ons-list-item>или<ons-list-item> <input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;"> </ons-list-item> <ons-list-item> <input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;"> </ons-list-item>или<ons-list-item> <input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;"> </ons-list-item> <ons-list-item> <input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;"> </ons-list-item>или<ons-list-item> <input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;"> </ons-list-item> <ons-list-item> <input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;"> </ons-list-item>
Создайте метод SignUp в AppController который проверит адрес электронной почты и пароль для пустых значений. Используйте метод auth.create чтобы зарегистрировать нового пользователя, как auth.create ниже:
$scope.reg = []; $scope.SignUp = function() { var email = $scope.reg.email; var password = $scope.reg.pass; auth.createUser(email, password, function(error, user) { if (!error) { myNavigator.popPage(); } else { alert('error'); } }); };
Добавьте директиву ngClick к кнопке регистрации, как показано ниже:
<ons-button modifier="large" ng-click="SignUp()"> Sign Up </ons-button>
Добавьте новый модал на страницу регистрации, который мы покажем, если пользователь не введет адрес электронной почты или пароль. Вот как это выглядит:
<ons-modal ng-click="modal.hide()" var="modal"> <br> <br>Enter Email Address and Password. <br> </ons-modal>
Измените функцию SignUp, как показано ниже:
$scope.SignUp = function() { var email = $scope.reg.email; var password = $scope.reg.pass; if (email && password) { auth.createUser(email, password, function(error, user) { if (!error) { myNavigator.popPage(); } else { alert('error'); } }); } else { modal.show(); // to show validation pop up message } };
Теперь перезапустите приложение и попробуйте зарегистрироваться. При успешной регистрации он перейдет на страницу входа. Попробуйте войти, используя новые учетные данные, и вы должны войти в систему.
Вот демонстрация вышеупомянутых функций входа и регистрации в действии.
Вывод
В этом руководстве мы реализовали функции входа и регистрации, используя инфраструктуру пользовательского интерфейса Onsen и Firebase в качестве серверной части.
Посмотрите на ряд других компонентов, предлагаемых пользовательским интерфейсом Onsen. Для более глубокого изучения структуры пользовательского интерфейса Onsen обратитесь к официальным документам .
Дайте нам знать ваши мысли в комментариях ниже!