Автор оригинала: Aaron Saunders.
В этом руководстве показана интеграция угловой метеор с Ионные рамки Для создания учетных записей пользователей и войти с ними. Это может быть началом вашего полного стека, кроссплатформенного мобильного решения
Создать пустой ионный проект
ionic start meteorIonic2 blank
Теперь давайте изменим index.html Чтобы поддержать мнения, которые мы будем создавать. Заменить весь Тело Тег с кодом ниже. Это где шаблоны, идентифицированные в UI-роутер будет отображаться на основе указанного маршрута.
Создать страницу входа в систему/создать учетную запись
Мы собираемся сохранить этот простой с базовым экраном входа в систему и базовый экран профиля. Сосредоточенность здесь действительно на интеграции с метером и менее на спецификах ионных и HTML шаблонов в Angularjs.
Создайте новый каталог под названием взгляды
Создайте новый файл в Виды каталог с именем login.html ; Добавьте следующий код
Еще раз для простоты мы создаем и учетную запись используя именно имя пользователя и пароль. Таким образом, мы можем использовать только одну HTML-страницу и один контроллер для поддержки усилий.
Мы создали $ Scope Объект для удержания учетных данных и включенных функций, которые будут называться, когда пользователь нажимает на кнопку входа или создания учетной записи. Дологификация и DocreateAccountaction Отказ Вы увидите код для этих функций в Lancktrl который будет создан в предстоящем разделе.
Создать страницу информации о пользователе
Страница «Домашняя/пользовательская страница» будет видна, когда пользователь вошел только в систему. Он покажет информацию о пользователе и имеет кнопку выхода для пользователя для завершения текущего сеанса
Мы создали $ Scope Объект для удержания учетных данных и включенных функций, которые будут называться, когда пользователь нажимает на кнопку «Выход», домутакция . Вы увидите код для этой функции в Homectrl который будет создан в предстоящем разделе.
Создать базовую маршрутизацию
Внутри app.js Файл Добавьте блок конфигурации для маршрутизации. У нас здесь два состояния, один для страницы входа в систему и один для домашней страницы. На данный момент нет аутентификации, просто определенные маршруты для доступа.
.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /login
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: '/login',
// loaded into ui-view of parent's template
templateUrl: 'views/login.html',
controller : 'LoginCtrl'
})
.state('home', {
url: '/home',
// loaded into ui-view of parent's template
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
});
Создайте контроллеры
Мы создадим новый файл под названием Controllers.js В файле добавьте код для двух контроллеров, указанных выше. Чтобы проверить поток приложений из событий Click, мы сделаем кнопки вызывать соответствующие функции и предупредить пользователям по поведению.
angular
.module('starter')
.controller('LoginCtrl', LoginCtrl)
.controller('HomeCtrl', HomeCtrl);
function LoginCtrl($scope, $state) {
$scope.doLoginAction = function($scope) {
alert("in doLoginAction");
setTimeout(function() {
$state.go('home');
}, 1000);
}
$scope.doCreateAccountAction = function() {
alert("in doCreateAccountAction");
setTimeout(function() {
$state.go('home');
}, 1000);
}
}
function HomeCtrl($scope, $state) {
$scope.doLogoutAction = function() {
alert("in doLogoutAction");
setTimeout(function() {
$state.go('login');
}, 1000);
}
}
Мы добавили простые оповещения, чтобы указать, что соответствующая функция была вызвана с небольшой задержкой перед переходом в правильное состояние.
Теперь давайте изменим index.html Для поддержки контроллеров мы только что добавили. Включите новый тег скрипта, чтобы добавить контроллеры в приложение.
// <== ADD THIS LINE
В этот момент приложение должно работать и показать поток между состояниями. Следующие шаги начнут добавлять пользовательские функции Meteor к приложению.
Создайте метеорную часть приложения
Добавьте необходимые пакеты Meteor Bower
bower install meteor-client-side angular-meteor accounts-base-client-side accounts-password-client-side --save-dev
Сделайте изменения в index.html Чтобы включить файлы библиотеки JavaScript из углового метера и поддерживать пакет учетных записей для создания учетных записей пользователей и входа в приложение
Создайте Meteor Server
Создайте каталог сервера Meteor, запустив команду в корневом каталоге проекта
meteor create server cd server del server.*
Изменения в клиентском приложении
Добавьте Директиву на app.js.
angular.module('starter', ['ionic','angular-meteor'])
Теперь давайте введем $ METEOR Объект в контроллеры, добавить в начало Lancktrl функция
LoginCtrl.$inject = ['$scope', '$state', '$meteor'];
Затем добавьте в начало Homectrl функция
HomeCtrl.$inject = ['$scope', '$state', '$meteor'];
Загрузите все боковые пакеты Meteor клиента
Перейдите в каталог сервера и запустите следующую команду
meteor add accounts-base accounts-password
Теперь поддерживаемые пакеты добавляются на ваш сервер, вы можете перезагрузить свой сервер, запустив команду METEOR
meteor
Пересмотр маршрутизатора для проверки аутентификации
Что нам нужно будет сделать, это проверить действительный объект пользователя при попытке доступа к указанному маршруту. Мы можем использовать маршрутизаторы решить Функциональность здесь, чтобы проверить, существует ли пользователь. Если пользователь не существует, A StateChangeError Обращается, и мы можем перенаправлять на состояние входа в систему.
Добавьте проверку пользователя на маршруте, используя Тревоектор Метод от Угловой метеор API. Изменить Главная состояние, чтобы выглядеть так
.state('home', {
url: '/home',
// loaded into ui-view of parent's template
templateUrl: 'views/home.html',
controller: 'HomeCtrl',
resolve: {
"currentUser": function($meteor) {
return $meteor.requireUser();
}
}
})
Когда этот код работает, если нет вошедших в систему пользователей, $ meteor.requireUser () Вызов отклонит обещание и StateChangeError будет брошен. Мы можем поймать ошибку, добавив следующий код в функцию запуска в app.js Отказ
Сначала обновите функцию, чтобы включить $ rootscope
.run(function($ionicPlatform, $rootScope) {
Затем добавьте слушателя на $ StatechangeError.
// checking for errors in state change
$rootScope.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error) {
// We can catch when the $requireUser promise is rejected and redirect to login state
if (error === 'AUTH_REQUIRED') {
event.preventDefault();
console.log("no user");
$state.go('login');
}
});
Это должно заставить пользователю Вход состояние, когда нет пользователя; Теперь давайте использовать Meteor и пакет счетов, чтобы добавить пользователя. Meteor Документация по созданию пользователя
Исходный код, чтобы добавить в DocreateAccountaction В Lancktrl позвонит функцию Meteor, чтобы создать пользователь, а затем перенаправлять обратно к Главная государственный. Если это все разработано нормально, следует присутствовать пользователю, а домашнее государство должно быть оказано.
$scope.doCreateAccountAction = function() {
alert("in doCreateAccountAction");
$meteor.createUser({
username: $scope.credentials.username,
email: $scope.credentials.username,
password: $scope.credentials.password,
profile: {
createdOn: new Date()
}
}).then(function(_response) {
console.log('doCreateAccountAction success');
alert("user created: " + $scope.credentials.username );
$state.go('home');
}, function(_error) {
console.log('Login error - ', _error);
alert("Error: " + _error.reason);
});
return false;
}
Теперь, чтобы войти в систему созданного пользователя, давайте добавим следующий исходный код для Дологификация В Lancktrl позвонит функцию Meteor, чтобы войти пользователю, а затем перенаправить обратно в Главная государственный. Если это все разработано нормально, следует присутствовать пользователю, а домашнее государство должно быть оказано.
Meteor Документация для регистрации пользователя с паролем
$scope.doLoginAction = function() {
$meteor.loginWithPassword($scope.credentials.username, $scope.credentials.password)
.then(function() {
console.log('Login success ');
alert("logged in: " + $scope.credentials.username);
$state.go('home');
}, function(_error) {
console.log('Login error - ', _error);
alert("Error: " + _error.reason);
});
return false;
}
Давайте обновим home.html Чтобы показать информацию о пользователе, создаваемой или вошедшей в систему
You Are Logged Into the Application:
{{currentUser | json}}
Теперь, когда у нас есть Meteor Integrated, и мы можем войти в систему пользователей, давайте закончим функцию выхода из системы для Homectrl Отказ
Meteor Документация по выходу
Вот код, чтобы добавить в Homectrl В файле Контроллеры
$scope.doLogoutAction = function() {
alert("in doLogoutAction");
$meteor.logout().then(function(_response) {
$state.go('login');
});
};