Tutorial 2 : Ionic Authentication with Spring Security
Generate a new Ionic Application
|
1 2 3 |
ionic start auth-with-ionic tabs cd auth-with-ionic ionic serve --lab |
If you don’t have Ionic installed on your machine run this command to install ionic npm install -g cordova ionic.
the –lab flag is quite new and shows how your app will look on ios & Android. Epic stuff the guys at ionic are creating!
Modify the template
As we want to display our login page before the tabs you see right now, we must add a new file in the www/templates folder, named login.html with this content:
www/templates/login.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ion-view view-title="Login"> <ion-content class="padding"> <br><br><br> <div class="list list-inset"> <label ng-if="invalidCredentials" style="color:red"><strong>Username or password is invalid</strong></label> <br><br> <label class="item item-input"> <input type="text" placeholder="Enter your username or email " ng-model="credentials.username"> </label> <label class="item item-input"> <input type="password" placeholder=" Enter your password" ng-model="credentials.password"> </label> </div> <button class="button button-block button-calm" ng-click="login()">Login</button> </ion-content> </ion-view> |
For now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:
|
1 2 3 4 5 |
.state('login', { url: '/login', templateUrl: 'templates/login.html', controller: 'LoginCtrl' }) |
As we want to display our profile page before the tabs you see right now, we must add a new file in the www/templates folder, named profile.html with this content:
www/templates/profile.html
|
1 2 3 4 5 |
<ion-view view-title="Profile"> <ion-content class="padding"> <h2>User profile</h2> </ion-content> </ion-view> |
For now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:
|
1 2 3 4 5 6 7 8 9 |
.state('tab.profile', { url: '/profile', views: { 'tab-profile': { templateUrl: 'templates/profile.html', controller: 'ProfileCtrl' } } }) |
As we want to display our device page before the tabs you see right now, we must add a new file in the www/templates folder, named device.html with this content:
www/templates/device.html
|
1 2 3 4 5 |
<ion-view view-title="Devices"> <ion-content class="padding"> <h2>User devices</h2> </ion-content> </ion-view> |
In order to create singleton objects or functions AngularJS supports the concepts using services architecture. These services can be used within any Controller by just declaring them as dependencies.
www/js/services.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
angular.module('starter.services', []) .service('LoginService', function($resource,SERVER_PATH) { return $resource('action:', {}, { authenticate: { method: 'POST', url:SERVER_PATH.path+'/login/authenticate' } } ); }) ; |
Now open up the controllers.js, and add our simple login,profile and device controller and inject LoginService in the login controller.
www/js/controllers.js
|
1 2 3 4 5 6 7 8 9 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 |
angular.module('starter.controllers', []) .controller('LoginCtrl', function($scope,$state,$rootScope,$cookieStore,$http, $ionicLoading,LoginService) { $scope.credentials = { username: '', password: '' } var xAuthTokenHeaderName = 'x-auth-token'; $scope.login = function() { $ionicLoading.show({ template: 'Chargement...' }); $scope.invalidCredentials=false; LoginService.authenticate({username: $scope.credentials.username, password: $scope.credentials.password}) .$promise.then(function(user) { if(user.status=="OK"){ $rootScope.user = user; $http.defaults.headers.common[ xAuthTokenHeaderName ] = user.token; $cookieStore.put('user', user); $state.go('tab.profile'); }else{ $scope.invalidCredentials=true; } $ionicLoading.hide(); }, function(error) { $ionicLoading.hide(); }); } }) .controller('DeviceCtrl', function($scope) { }) .controller('ProfileCtrl', function($scope) { }); |
|
1 2 3 4 5 |
angular.module('starter') .constant('SERVER_PATH', { path: 'http://localhost:8080' }); |
|
1 2 3 4 5 6 7 8 9 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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="manifest" href="manifest.json"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> <script src="js/constants.js"></script> <script src="lib/angular-resource/angular-resource.js"></script> <script src="lib/angular-cookies/angular-cookies.js"></script> </head> <body ng-app="starter"> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </body> </html> |
Run the server application
Downloas the server source code(lab1) from bitbucket:
https://bitbucket.org/intellitech-team/spring-labs/src/da6f67a63d9be72c51a38e516350815ac456e404/Lab1/?at=master
Create database with name and run the script in PostgreSQL database :
|
1 2 3 4 |
INSERT INTO public.role (id, role_name) VALUES (1, 'ROLE_ADMIN'); INSERT INTO public.role (id, role_name) VALUES (2, 'ROLE_USER'); INSERT INTO public.user (id, first_name, last_name, email, password, username, role_id) VALUES (1, 'Nizar', 'Ellouze','nizarellouze@gmail.com', '$2a$10$bpNMKeaQXKpJ4JVxOHWvu.tZdmCLT9nKcZreJ/ELfCgmTCyhC7GPy', 'admin', 1); INSERT INTO public.user (id, first_name, last_name, email, password, username, role_id) VALUES (2, 'Omar', 'Kessemtini','kessemtini.omar@gmail.com', '$2a$10$TA.UfUqLa8uDeGkt95FfLeq7T5Y5vpDpzAtvJrHSLzLliY/PARXUq', 'user', 2); |
Now, run the application using the command mvn spring-boot:run then visit and authenticate with one of the two users:
: username=user, password=user
: username=admin, password=admin
Run the Mobile application
Download Ionic source code from bitbucket and run the following command
https://bitbucket.org/intellitech-team/spring-labs/src/da6f67a63d9be72c51a38e516350815ac456e404/Lab2(IONIC)/?at=master
and run the following command
|
1 2 |
cd auth-with-ionic ionic serve --lab |
