Authenticating the Ionic app with a backend server - angularjs

Question

I try to create with angularjs based Ionic app an authentication mechanism. The system looks like this:
mobile users are created by administrators on the backend server. The created mobile user can login into the app.
I get an Example and implemented it for my app.
constants.js
angular.module('starter')
.constant('AUTH_EVENTS', {
notAuthenticated: 'auth-not-authenticated',
notAuthorized: 'auth-not-authorized'
})
.constant('USER_ROLES', {
admin: 'admin_role',
public: 'public_role'
});
dashController.js
myApp.controller('DashCtrl', function ($scope, $state, $http, $ionicPopup, AuthService, $location, $window) {
$scope.logout = function () {
AuthService.logout();
$window.location.href = '/index.html';
};
$scope.performValidRequest = function () {
$http.get('http://localhost:8100/valid').then(
function (result) {
$scope.response = result;
});
};
$scope.performUnauthorizedRequest = function () {
$http.get('http://localhost:8100/notauthorized').then(
function (result) {
// No result here..
}, function (err) {
$scope.response = err;
});
};
$scope.performInvalidRequest = function () {
$http.get('http://localhost:8100/notauthenticated').then(
function (result) {
// No result here..
}, function (err) {
$scope.response = err;
});
};
});
loginAppController.js
myApp.controller('LoginAppCtrl', function ($scope, $state, $ionicPopup, AuthService, AUTH_EVENTS, $location, $window) {
$scope.username = AuthService.username();
$scope.$on(AUTH_EVENTS.notAuthorized, function (event) {
var alertPopup = $ionicPopup.alert({
title: 'Unauthorized!',
template: 'You are not allowed to access this resource.'
});
});
$scope.$on(AUTH_EVENTS.notAuthenticated, function (event) {
AuthService.logout();
$window.location.href = '/loginPage.html';
var alertPopup = $ionicPopup.alert({
title: 'Session Lost!',
template: 'Sorry, You have to login again.'
});
});
$scope.setCurrentUsername = function (name) {
$scope.username = name;
};
})
loginController.js
myApp.controller('LoginCtrl', function ($scope, $state, $ionicPopup, AuthService, $location, $window) {
$scope.data = {};
$scope.login = function (data) {
AuthService.login(data.username, data.password).then(function (authenticated) {
$window.location.href = '/index.html';
$scope.setCurrentUsername(data.username);
}, function (err) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
};
})
loginService.js
angular.module('starter')
myApp.service('AuthService', function ($q, $http, USER_ROLES) {
var LOCAL_TOKEN_KEY = 'yourTokenKey';
var username = '';
var isAuthenticated = false;
var role = '';
var authToken;
function loadUserCredentials() {
var token = window.localStorage.getItem(LOCAL_TOKEN_KEY);
if (token) {
useCredentials(token);
}
}
function storeUserCredentials(token) {
window.localStorage.setItem(LOCAL_TOKEN_KEY, token);
useCredentials(token);
}
function useCredentials(token) {
username = token.split('.')[0];
isAuthenticated = true;
authToken = token;
if (username == 'admin') {
role = USER_ROLES.admin
}
if (username == 'user') {
role = USER_ROLES.public
}
// Set the token as header for your requests!
$http.defaults.headers.common['X-Auth-Token'] = token;
}
function destroyUserCredentials() {
authToken = undefined;
username = '';
isAuthenticated = false;
$http.defaults.headers.common['X-Auth-Token'] = undefined;
window.localStorage.removeItem(LOCAL_TOKEN_KEY);
}
var login = function (name, pw) {
return $q(function (resolve, reject) {
if ((name == 'admin' && pw == '1') || (name == 'user' && pw == '1')) {
// Make a request and receive your auth token from your server
storeUserCredentials(name + '.yourServerToken');
resolve('Login success.');
} else {
reject('Login Failed.');
}
});
};
var logout = function () {
destroyUserCredentials();
};
var isAuthorized = function (authorizedRoles) {
if (!angular.isArray(authorizedRoles)) {
authorizedRoles = [authorizedRoles];
}
return (isAuthenticated && authorizedRoles.indexOf(role) !== -1);
};
loadUserCredentials();
return {
login: login,
logout: logout,
isAuthorized: isAuthorized,
isAuthenticated: function () {
return isAuthenticated;
},
username: function () {
return username;
},
role: function () {
return role;
}
};
})
app.js
var myApp = angular.module('starter', ['ionic', 'ngMockE2E'])
.run(function($ionicPlatform, $ionicPopup) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.run(function($httpBackend) {
$httpBackend.whenGET('http://localhost:8100/valid')
.respond({message: 'This is my valid response!'});
$httpBackend.whenGET('http://localhost:8100/notauthenticated')
.respond(401, {message: "Not Authenticated"});
$httpBackend.whenGET('http://localhost:8100/notauthorized')
.respond(403, {message: "Not Authorized"});
$httpBackend.whenGET(/.*/).passThrough();
})
.run(function ($rootScope, $state, AuthService, AUTH_EVENTS, $location, $window) {
$rootScope.$on('$stateChangeStart', function (event,next, nextParams, fromState) {
if ('data' in next && 'authorizedRoles' in next.data) {
var authorizedRoles = next.data.authorizedRoles;
if (!AuthService.isAuthorized(authorizedRoles)) {
event.preventDefault();
$state.go($state.current, {}, {reload: true});
$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
}
}
if (!AuthService.isAuthenticated()) {
if (next.name !== 'login') {
event.preventDefault();
$window.location.href = '/loginPage.html';
}
}
});
})
HTML:
<ion-content style="text-align: left" ng-controller="LoginCtrl">
<span class="item item-input item-stacked-label"
style="font-weight: bold">Name and password:</span>
<label class="item item-input">
<span class="input-label">Name:</span>
<input name="name" placeholder="Name!" autofocus="true" required="true"
type="text"
ng-model="data.username"/>
</label>
<label class="item item-input">
<span class="input-label">Password:</span>
<input name="password" placeholder="Password!" required="true" type="password"
ng-model="data.password"/>
</label>
<button id="button-1" class="button button-block button-positive" ng-click="login(data)">Login</button>
</ion-content>
In a related article I get these steps as an answer:
1) Send username password to server using $http.post();
2) Server authenticates the credentials. and returns a token in return
is credentials are correct.
3) App stores this token locally and passes it to server for later
request as a mean of identification of logged in user.
Ideally you should implement SOAP or REST based services on your
server and consume those services in your app.
The example works localy. But where should change, so that I can authenticate with a user and password which stored on the backen server?