В предыдущей части этой серии мы создали страницу регистрации, настроили маршруты, а также выполнили некоторые проверки форм с помощью AngularJS . В этом руководстве мы реализуем функциональность регистрации, подключив AngularJS и последнюю версию Firebase . Мы также изменим код входа в соответствии с более новым API Firebase.
Начиная
Давайте начнем с клонирования второй части урока от GitHub .
|
1
|
git clone https://github.com/jay3dec/AngularJS_Firebase_Part2.git
|
После клонирования исходного кода перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd AngularJS_Firebase_Part2
npm install
|
Как только зависимости установлены, запустите сервер.
|
1
|
npm start
|
Укажите в браузере http: // localhost: 8000 / app /, и приложение должно быть запущено.
Ссылки на Firebase Script
Firebase недавно выпустила более новую версию, и клиент FirebaseSimpleLogin, который мы использовали в нашем первом руководстве для входа в систему, устарел и включен в основную библиотеку Firebase. Поэтому откройте app/index.html и удалите существующие ссылки Firebase и включите следующие ссылки на сценарии:
|
1
2
|
<script src=»https://cdn.firebase.com/js/client/2.0.4/firebase.js»></script>
<script src=»https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js»></script>
|
Изменение реализации входа
Перейдите в app/home и откройте home.js Удалите введенный $simplefirebaselogin из контроллера и введите $firebaseAuth . Используйте его для создания loginObj как показано.
|
1
2
3
4
|
.controller(‘HomeCtrl’, [‘$scope’, ‘$firebaseAuth’, function($scope, $firebaseAuth) {
var firebaseObj = new Firebase(«https://blistering-heat-2473.firebaseio.com»);
var loginObj = $firebaseAuth(firebaseObj);
}));
|
Новый Firebase предоставляет метод API с именем $authWithPassword для аутентификации с использованием адреса электронной почты и пароля. Замените метод входа на $authWithPassword в функции SignIn как показано ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
$scope.SignIn = function(e) {
e.preventDefault();
var username = $scope.user.email;
var password = $scope.user.password;
loginObj.$authWithPassword({
email: username,
password: password
})
.then(function(user) {
//Success callback
console.log(‘Authentication successful’);
}, function(error) {
//Failure callback
console.log(‘Authentication failure’);
});
}
|
Сохраните изменения, перезапустите сервер и попробуйте войти, используя действующий адрес электронной почты и пароль. Вы должны получить сообщение об успехе в консоли браузера.
Реализация функциональности регистрации
Мы будем использовать метод createUser Firebase для создания нового пользователя, используя адрес электронной почты и пароль. Поскольку мы уже проверили данные в нашем предыдущем уроке, мы свяжем вызов функции регистрации нажатием кнопки регистрации. Добавьте директиву ngClick к кнопке регистрации, как показано ниже:
|
1
|
<button type=»button» ng-click=»signUp();»
|
Откройте signUp register.js и внутри контроллера RegisterCtrl создайте новую функцию с именем signUp .
|
1
2
3
4
5
6
7
|
.controller(‘RegisterCtrl’, [‘$scope’, function($scope) {
$scope.signUp = function() {
// Sign up implementation would be here !!
};
}]);
|
В функции signUp мы просто проверим правильность нашей формы:
|
1
2
3
4
5
|
$scope.signUp = function() {
if (!$scope.regForm.$invalid) {
console.log(‘Valid form submission’);
}
};
|
Добавьте директиву ngController к тегу body в register.html .
|
1
|
<body ng-controller=»RegisterCtrl»>
|
Перезагрузите сервер и попробуйте перейти на страницу регистрации. Нажмите кнопку Register после ввода адреса электронной почты и пароля. Теперь, если вы проверите консоль браузера, вы должны увидеть сообщение о Valid form submission .
Поэтому, прежде чем вызывать API-интерфейс Firebase для создания нового пользователя, нам нужно внедрить firebase в наше приложение. Откройте файл register.js и добавьте модуль firebase .
|
1
|
angular.module(‘myApp.register’, [‘ngRoute’,’firebase’])
|
Далее нам также нужно вставить $firebaseAuth в наш контроллер регистров.
|
1
|
.controller(‘RegisterCtrl’, [‘$scope’,’$firebaseAuth’, function($scope,$firebaseAuth) {
|
Используя наш URL Firebase, мы создадим экземпляр Firebase, а с помощью этого экземпляра Firebase создадим объект $firebaseAuth . Мы будем использовать этот объект $firebaseAuth для вызова нашего API. Добавьте следующий код в register.js , внутри контроллера регистров.
|
1
2
|
var firebaseObj = new Firebase(«https://blistering-heat-2473.firebaseio.com»);
var auth = $firebaseAuth(firebaseObj);
|
Теперь мы получим адрес электронной почты и пароль из $scope и createUser метод createUser Firebase. Вот модифицированный метод регистрации.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
$scope.signUp = function() {
if (!$scope.regForm.$invalid) {
var email = $scope.user.email;
var password = $scope.user.password;
if (email && password) {
auth.$createUser(email, password)
.then(function() {
// do things if success
console.log(‘User creation success’);
}, function(error) {
// do things if failure
console.log(error);
});
}
}
};
|
Как вы можете видеть в приведенной выше функции signUp , мы вызвали метод $createUser для создания нового пользователя. При успешном создании пользователя мы будем регистрировать сообщение об успешном завершении в createUser функции createUser .
Перезапустите сервер и укажите в браузере адрес http: // localhost: 8000 / app / # / register и попробуйте зарегистрировать новую учетную запись пользователя, используя адрес электронной почты и пароль. Проверьте консоль браузера после нажатия кнопки регистрации пользователя. В случае успеха у вас должно появиться сообщение об успешном создании пользователя в консоли браузера.
Затем укажите в браузере адрес http: // localhost: 8000 / app / # / home и попробуйте войти, используя учетные данные нового пользователя.
Обработка обратных вызовов при регистрации пользователя
Создать успешный обратный вызов пользователя
Если регистрация пользователя прошла успешно, нам нужно перенаправить пользователя на страницу входа. Чтобы перенаправить пользователя, нам нужно внедрить службу AngularJS $ location в наш контроллер. Итак, введите $location как показано:
|
1
|
.controller(‘RegisterCtrl’, [‘$scope’,’$location’,’$firebaseAuth’, function($scope,$location,$firebaseAuth) {
|
Добавьте следующий код к auth.$createUser функции auth.$createUser чтобы перенаправить пользователя на страницу входа при успешной регистрации пользователя.
|
1
|
$location.path(‘/home’);
|
Сохраните изменения, перезапустите сервер и попробуйте зарегистрироваться для другой учетной записи пользователя. При успешной регистрации пользователя вы должны быть перенаправлены на страницу входа.
Создать обратный вызов пользователя
Регистрация пользователя может быть неудачной из-за некоторых проблем, например, если адрес электронной почты пользователя уже существует. Поэтому, когда возникает ошибка во время регистрации пользователя, мы должны показать ее пользователю. Мы добавим еще одно сообщение об ошибке ниже поля пароля и настроим его отображение так, чтобы оно отображалось при возникновении ошибки. Вот сообщение об ошибке:
|
1
|
<p style=»color:red;»
|
Как видно из приведенного выше кода, мы использовали директиву ngShow чтобы показать указанное выше сообщение об ошибке, когда regError имеет значение true. Сообщение отображается с помощью переменной $scope regErrorMessage . В createUser ошибки createUser добавьте следующий код для отображения сообщения об ошибке.
|
1
2
|
$scope.regError = true;
$scope.regErrorMessage = error.message;
|
Вот модифицированная функция signUp :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
$scope.signUp = function() {
if (!$scope.regForm.$invalid) {
var email = $scope.user.email;
var password = $scope.user.password;
if (email && password) {
auth.$createUser(email, password)
.then(function() {
// do things if success
console.log(‘User creation success’);
$location.path(‘/home’);
}, function(error) {
// do things if failure
console.log(error);
$scope.regError = true;
$scope.regErrorMessage = error.message;
});
}
}
};
|
Сохраните изменения, перезапустите сервер и попробуйте зарегистрироваться, используя адрес электронной почты и пароль, которые вы уже использовали. При этом на экране должно появиться сообщение об ошибке, как показано ниже:
Создание главного экрана
Когда пользователь успешно войдет в приложение, мы перенаправим пользователя на домашнюю страницу. На домашней странице будут отображаться сообщения, созданные пользователем, а также будет возможность создавать новые сообщения. Итак, давайте создадим домашнюю страницу.
Перейдите в папку приложения в каталоге приложения и создайте новую папку с именем welcome . Эта папка будет содержать шаблоны и файлы, связанные с домашней страницей. Внутри папки welcome создайте страницы с welcome.html и welcome.js . Добавьте следующий код в welcome.html .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<link rel=»icon» href=»http://getbootstrap.com/favicon.ico»>
<title>AngularJS & Firebase Web App</title>
<link href=»http://getbootstrap.com/dist/css/bootstrap.min.css» rel=»stylesheet»>
<link href=»blog.css» rel=»stylesheet»>
</head>
<body ng-controller=»WelcomeCtrl»>
<div class=»blog-masthead»>
<div class=»container»>
<nav class=»blog-nav»>
<a class=»blog-nav-item active» href=»#»>Home</a>
<a class=»blog-nav-item » href=»addPost.html»>Add Post</a>
</nav>
</div>
</div>
<div class=»container»>
<div class=»page-header»>
<h1>AngularJS & Firebase App</h1>
</div>
<p class=»lead»>Welcome home !!</p>
</div>
<footer class=»footer»>
<div class=»container»>
<p class=»text-muted»></p>
</div>
</footer>
</body>
</html>
|
Внутри welcome.js мы определим маршруты для приложения на странице приветствия. Мы будем использовать $routeProvider для создания маршрута для вида welcome . При определении нового маршрута мы установим templateUrl который будет отображаться в index.html . Наряду с этим мы также установим controller (контроллер — это логика, управляющая конкретным представлением) для вновь созданной области $scope представления приветствия. Вот как выглядит welcome.js:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
‘use strict’;
angular.module(‘myApp.welcome’, [‘ngRoute’])
.config([‘$routeProvider’, function($routeProvider) {
$routeProvider.when(‘/welcome’, {
templateUrl: ‘welcome/welcome.html’,
controller: ‘WelcomeCtrl’
});
}])
.controller(‘WelcomeCtrl’, [‘$scope’, function($scope) {
}]);
|
Теперь откройте app/app.js и app/app.js недавно добавленный модуль.
|
1
2
3
4
5
6
|
angular.module(‘myApp’, [
‘ngRoute’,
‘myApp.home’,
‘myApp.register’,
‘myApp.welcome’ // Newly added module
])
|
Также откройте app/index.html и app/index.html недавно добавленный скрипт register.js .
|
1
|
<script src=»welcome/welcome.js»></script>
|
Когда пользователь успешно войдет в систему, мы перенаправим его на страницу приветствия. Откройте app/home/home.js и введите $location в HomeCtrl .
|
1
|
.controller(‘HomeCtrl’, [‘$scope’,’$location’,’$firebaseAuth’,function($scope,$location,$firebaseAuth) {
|
Мы будем использовать $location чтобы перенаправить пользователя на страницу приветствия. В home.js , внутри функции home.js , при SignIn добавьте следующий код:
|
1
|
$location.path(‘/welcome’);
|
Сохраните изменения, перезапустите сервер и попробуйте войти в приложение. При успешном входе в систему вы должны увидеть экран, как показано ниже:
Доступ к $ scope между контроллерами
Теперь давайте отобразим адрес электронной почты вошедшего в систему пользователя на странице приветствия. Но есть проблема. Во время входа в систему у нас есть данные пользователя в HomeCtrl , но когда мы перенаправляем на представление приветствия, $scope of HomeCtrl не доступен внутри WelcomeCtrl . Поэтому, чтобы сделать это возможным, мы будем использовать сервисы AngularJS .
Угловые сервисы — это заменяемые объекты, которые соединены вместе с помощью внедрения зависимостей (DI) . Вы можете использовать службы для организации и совместного использования кода в вашем приложении.
Используя сервисы, мы можем обмениваться данными между различными контроллерами. Поэтому в home.js мы создадим наш сервис с именем CommonProp .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
.service(‘CommonProp’, function() {
var user = »;
return {
getUser: function() {
return user;
},
setUser: function(value) {
user = value;
}
};
});
|
В сервисе CommonProp мы создали переменную с именем user, в которой мы установим адрес электронной почты вошедшего в систему пользователя. Поскольку доступ к службе возможен со всех контроллеров, можно было бы обмениваться данными между контроллерами, используя службу CommonProp .
CommonProp сервис CommonProp в HomeCtrl как показано:
|
1
|
.controller(‘HomeCtrl’, [‘$scope’,’$location’,’CommonProp’,’$firebaseAuth’,function($scope,$location,CommonProp,$firebaseAuth) {
|
При успешной аутентификации пользователя установите переменную user в службе CommonProp как показано ниже.
|
1
|
CommonProp.setUser(user.password.email);
|
Также CommonProp службу WelcomeCtrl в WelcomeCtrl в WelcomeCtrl .
|
1
|
.controller(‘WelcomeCtrl’, [‘$scope’,’CommonProp’, function($scope,CommonProp) {
|
В welcome.html измените приветственное сообщение, $scope переменную $scope как показано.
|
1
|
<p class=»lead»>Welcome home <b>{{username}}</b> !!</p>
|
Теперь в WelcomeCtrl установите значение $scope.username из CommonProp сервисов getUser .
|
1
|
$scope.username = CommonProp.getUser();
|
Сохраните все изменения, перезапустите браузер и попробуйте войти в систему, используя любой адрес электронной почты и пароль. При успешном входе в систему вы должны увидеть свой адрес электронной почты на странице приветствия.
Завершение
В этом руководстве мы подняли наш учебник по разработке приложений для блогов с использованием AngularJS и Firebase на новый уровень. Мы реализовали функцию регистрации, а также увидели, как делиться данными между двумя контроллерами.
В следующей части этой серии мы увидим, как начать реализацию страницы «Создать запись в блоге».
Исходный код из этого урока доступен в GitHub .
Дайте нам знать ваши мысли в комментариях ниже!