Comment s'authentifier en Ionic avec Spring Security

12 Avr

Comment s’authentifier en Ionic avec Spring Security

Générer une nouvelle application Ionic

ionic start auth-with-ionic tabs
cd auth-with-ionic 
ionic serve --lab

ionic start auth-with-ionic tabs

cd auth-with-ionic

ionic serve --lab

Si Ionic n’est pas installé sur votre machine, exécutez cette commande pour installer Ionic npm install -g cordova ionic.

Le flag –-lab est tout à fait nouveau et indique l’apparence de votre application sur iOS et Android. Des trucs épiques que les développeurs d’ionic créent!

Modifier la template

Comme nous voulons afficher notre page de connexion avant les onglets que vous voyez maintenant, nous devons ajouter un nouveau fichier dans le dossier www / templates, nommé login.html avec ce contenu: www/templates/login.html

<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>

<ion-view view-title="Login">

<ion-content class="padding">

<label ng-if="invalidCredentials" style="color:red"><strong>Username or password is invalid</strong></label>

</label>

</label>

</div>

<button class="button button-block button-calm" ng-click="login()">Login</button>

</ion-content>

</ion-view>

Pour l’instant, ajoutons notre itinéraire afin que nous puissions voir notre vue la première fois.

Par conséquent, ouvrez le fichier app.js et ajoutez cet état aux états déjà existants:

.state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
  })

.state('login', {

url: '/login',

templateUrl: 'templates/login.html',

controller: 'LoginCtrl'

})

Comme nous voulons afficher notre page de profil avant les onglets que vous voyez actuellement, nous devons ajouter un nouveau fichier dans le dossier www / templates, nommé profile.html, avec ce contenu: www/templates/profile.html

<ion-view view-title="Profile">
  <ion-content class="padding">
    <h2>User profile</h2>
  </ion-content>
</ion-view>

<ion-view view-title="Profile">

<ion-content class="padding">

<h2>User profile</h2>

</ion-content>

</ion-view>

Pour l’instant, ajoutons notre itinéraire afin que nous puissions voir notre vue la première fois. Par conséquent, ouvrez le fichier app.js et ajoutez cet état aux états déjà existants:

  .state('tab.profile', {
    url: '/profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/profile.html',
        controller: 'ProfileCtrl'
      }
    }
  })

.state('tab.profile', {

url: '/profile',

views: {

'tab-profile': {

templateUrl: 'templates/profile.html',

controller: 'ProfileCtrl'

}

})

Comme nous voulons afficher notre page de périphérique avant les onglets que vous voyez maintenant, nous devons ajouter un nouveau fichier dans le dossier www / templates, nommé device.html avec ce contenu: www/templates/device.html

<ion-view view-title="Devices">
  <ion-content class="padding">
    <h2>User devices</h2>
  </ion-content>
</ion-view>

<ion-view view-title="Devices">

<ion-content class="padding">

<h2>User devices</h2>

</ion-content>

</ion-view>

Afin de créer des objets ou des fonctions uniques, AngularJS prend en charge les concepts utilisant l’architecture de services.

Ces services peuvent être utilisés dans n’importe quel contrôleur en les déclarant simplement comme des dépendances.

www/js/services.js

angular.module('starter.services', [])

.service('LoginService', function($resource,SERVER_PATH) {
  return $resource('action:', {},
      {
        authenticate: {
          method: 'POST',
          url:SERVER_PATH.path+'/login/authenticate'
        }
      }
    );
})
;

angular.module('starter.services', [])

.service('LoginService', function($resource,SERVER_PATH) {

return $resource('action:', {},

{

authenticate: {

method: 'POST',

url:SERVER_PATH.path+'/login/authenticate'

}

);

})

;

Ouvrez maintenant le fichier controllers.js, ajoutez notre simple login, profil et device controller et injectez LoginService dans le LoginController.

www/js/controllers.js

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) {
  
});

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) {

});

www/js/constants.js

angular.module('starter')
 
.constant('SERVER_PATH', {
  path: 'http://localhost:8080'
});

angular.module('starter')

.constant('SERVER_PATH', {

path: 'http://localhost:8080'

});

www/index.html

 <!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>

<!DOCTYPE html>

<html>

<head>

</head>

<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>

Exécuter l’application serveur

Téléchargez le code source du serveur (labo 1) à partir de ce lien

Créez une base de données avec le nom springlabs et exécutez le script dans la base de données PostgreSQL:

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);

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);

Maintenant, exécutez l’application à l’aide de la commande mvn spring-boot: exécutez puis visitez localhost: 8080 et authentifiez-vous auprès de l’un des deux utilisateurs suivant :

USER1: username=user, password=user
USER2: username=admin, password=admin