Autenticazione

898d2165-124e-47bd-bc49-6625d3ea259e

Una delle fasi più importanti è la login di un utente il primo step consiste nella configurazione delle route.

Apriamo il file app.js presente nella cartella www/app/ e modifichiamo gli stati aggiungendo uno stato per la pagina di login ed uno per la registrazione ed impostiamo la view di login come la view predefinita:

.config(function ($stateProvider, $urlRouterProvider) {
     $stateProvider
     .state("login", {
         url: "/login",
         abstract: true,
         templateUrl: "app/templates/login.html",
         controller: "homeCtrl"
     })
     .state("registrazione", {
         url: "/registrazione",
         templateUrl: "app/templates/registrazione.html",
         controller: "homeCtrl"
     })
     .state("homepage", {
         url: "/homepage",
         abstract: true,
         templateUrl: "app/templates/homepage.html",
         controller: "homeCtrl"
     })
     ;
     $urlRouterProvider.otherwise("/login");
 });

      

Una volta configurate le nostre route possiamo procedere con la definizione del nostro servizio di login.

Nella cartella www/app possiamo modificare il file services.js aggiungendo la funzione di login:

myappService.login = function (username, password) {
    //Url api di registrazione
    var url = apiHost + '/token';
    //Definizione dell'oggetto utilizzato per le chiamate asincrone
    var deferred = $q.defer();
    //Visualizza il messaggio di attesa (opzionale)
    $ionicLoading.show({
        template: 'attendere prego...'
    });
    //Prepara i dati per la chiamata HTTP
    var postdata = $.param({
        Username: username,
        Password: password,
        grant_type: 'password'
    });
    //Chiamata HTTP Metodo POST
    $http({
        method: 'POST',
        url: url,
        data: postdata,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function (response) {
        //200 OK
        //Nascondo il messaggio di attesa
        $ionicLoading.hide();
        //Restituisco i dati (token)
        deferred.resolve(response.data);
    },
    function (response) { // optional
        //Nascondo il messaggio di attesa
        $ionicLoading.hide();
        //Restituisco messaggio di errore
        deferred.reject({ error: response.data.error_description });
    });
    return deferred.promise;
};

Nella cartella www/app/templates aggiungiamo un nuovo file e lo chiamiamo login.html  

All’interno del file andiamo a definire la nostra View con all’interno la maschera di login:

<ion-view view-title="Login">
    <ion-header-bar align-title="center" class="bar-stable">
        <div class="buttons">
            
            <button class="button icon-left ion-chevron-left button-clear button-dark" ng-click="goToHomepage()">Indietro</button>
        </div>
        <h1 class="title">Eventi App</h1>
    </ion-header-bar>
    <ion-content padding="'true'" class="has-header has-footer">
        <form class="list" ng-submit="login()">
            <ion-list>
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="text" placeholder="" ng-model="user.username" required>
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" placeholder="" ng-model="user.password" required>
                </label>
            </ion-list>
            <div class="spacer" style="height: 20px;"></div>
              <button class="button button-stable button-block"type="submit">Login</button>
            
        </form>
    </ion-content>
</ion-view>

All’interno del form possiamo notare la direttiva ng-submit che serve ad indicare la funzione che verrà eseguita a seguito del submit del form di login.

Ora non ci rimane che configurare il controller:

All’interno del file controllers.js presente nella cartella www/app/controllers.js andiamo a definire la funzione login nel controller homeCtrl:

    //homeCtrl
    //$State Libreria per recuperare i dati dello stato corrente (route)
    //$ionicPopup Libreria per la visualizzazione a video di un messaggio
    //myappService Riferimento ai servizi definiti nel file services.js
.controller("homeCtrl", ["$scope", "$state", "$ionicPopup", "myappService", function ($scope, $state, $ionicPopup, myappService) {
    //Inizializzazione della variabile user
    $scope.user = {};

    //Variabile locale contenente il token di autenticazione
    $scope.token = {};

    //Funzione refresh
    $scope.refresh = function () {
        //refresh binding
        $scope.$broadcast("scroll.refreshComplete");
    };

    //Funzione che serve a visualizzare a video una finestra con un titolo ed una descrizione
    $scope.showAlert = function (title, text) {
        var alertPopup = $ionicPopup.alert({
            title: title,
            template: text
        });
            alertPopup.then(function (res) {
        });
    };

    //Funzione Login
    $scope.login = function (username, password) {
        
        myappService.getLoginToken(username, password).then(function (data) {
            //OK Recupero il token
            $scope.token = data;
            //Salvo il token sul dispositivo
            window.localStorage['authdata'] = JSON.stringify(data);
            //Inoltro l'utente verso la homepage
            $state.go('homepage');
        },
            function (response) { // optional
                $scope.showAlert('Errore', (response.error) || 'Si  verificato un problema!');
            });
    }

   
    //Funzione registraUtente
    $scope.registraUtente = function (user) {
        var model = user || $scope.user;
        myappService.register(model).then(function (data) {
            //OK Eseguo Il Login
            $scope.login(model.username, model.password);
        },
        function (response) {
            $scope.showAlert('Errore', response.message);
        });
    }

}])

Ora, se non l’abbiamo già fatto possiamo procedere con la registrazione di un nuovo utente seguendo il seguente tutorial: 

http://wiki.dotnetcode.it/post/Ionic-Eventi-App-Passo-Passo-Registrazione-Utenti

Autore:


blog comments powered by Disqus