Registrazione Utenti

7f93e9cd-2a42-41c8-9aaa-a21eb308814e

La nostra prima App prevede la registrazione degli utenti utilizzando ASP.NET Web API.

Prima di passare alla creazione delle view andiamo a configurare le route per la registrazione e la login.

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"
             });
             $urlRouterProvider.otherwise("/login");
         });

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

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

//$http: Libreria per le chiamate http
   //$q: Libreria per le chiamate asincrone tramite promise javascript
   //$ionicLoading: Libreria per visalizzare un messagio a video durante il caricamento dei dati
   angular.module("myapp.services", []).factory("myappService", ["$rootScope", "$http", "$q", "$ionicLoading", function ($rootScope, $http, $q, $ionicLoading) {
       var myappService = {};
       //Url del sito di Back-End Web API
       var apiHost = 'http://localhost:3461/';
       //starts and stops the application waiting indicator
       myappService.wait = function (show) {
           if (show)
               $(".spinner").show();
           else
               $(".spinner").hide();
       };

       //Funzione per la registrazione di un nuovo utente
       myappService.register = function (user) {
           //Url api di registrazione
           var url = apiHost + '/api/account/register';
           //Definizione dell'oggetto utilizzato per le chiamate asincrone
           var deferred = $q.defer();
           //Comando per la visualizzazione del messaggio "Attendere..."
           $ionicLoading.show({
               template: 'Attendere...'
           });
           //Preparazione dei dati per la registrazione
           var postdata = $.param({
               Username: user.username,
              Nome: user.nome,
               Cognome: user.cognome,
               Email: user.email,
               Password: user.password
           });
           //Chiamata HTTP POST dell'url di registrazione e dei dati collegati
           $http({
               method: 'POST',
              url: url,
               data: postdata,
               headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
           }).then(function (response) {
               //Esito 200 OK
               //Nascondo il messaggio "Attendere"
               $ionicLoading.hide();
              //Inoltro il risultato al chiamante
               deferred.resolve(response.data);
           },
           function (response) {
               //Esito diverso da 200
               //Nascondo il messaggio "Attendere"
               $ionicLoading.hide();
               //Inoltro il messaggio di errore al chiamante
               deferred.reject({ message: "Error: " + response.data.Message });
           });
           //Ritorna l'oggetto  al chiamante
           return deferred.promise;
       };         
        
       return myappService;
   }]);

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

All’interno del file andiamo a definire la nostra View con all’interno il nostro form di registrazione che presenterà i seguenti campi:

  • Nome
  • Cognome
  • Email
  • Username
  • Password
<ion-view view-title="registrazione">
     <ion-content class="padding">
         <form class="list" ng-submit="registraUtente(user)">
             <ion-list>
                 <label class="item item-input">
                     <span class="input-label">Nome</span>
                     <input type="text" placeholder="" ng-model="user.nome">
                 </label>
                 <label class="item item-input">
                     <span class="input-label">Cognome</span>
                     <input type="text" placeholder="" ng-model="user.cognome">
                 </label>
                 <label class="item item-input">
                     <span class="input-label">Username</span>
                     <input type="text" placeholder="" ng-model="user.username">
                 </label>
                 <label class="item item-input">
                     <span class="input-label">Email</span>
                     <input type="email" placeholder="" ng-model="user.email">
                 </label>
                 <label class="item item-input">
                     <span class="input-label">Password</span>
                     <input type="password" placeholder="" ng-model="user.password">
                 </label>
             </ion-list>
             <button class="button button-stable button-block " type="submit">Registrami</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 registrazione.

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 registraUtente 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 = {};

     //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 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);
         });
     }
     //Funzione Login
     $scope.login = function(username,password) {
         //Esegue Il Login
     }

}])

Ora, se non l’abbiamo già fatto dobbiamo configurare il nostro back-end seguendo il seguente tutorial:

http://wiki.dotnetcode.it/post/Come-Aggiungere-dei-Campi-Personalizzati-in-ASPNET-Identity-Parte-1

Una volta terminato il tutto possiamo eseguire l’applicazione in Debug (F5) e procedere con il test della nostra applicazione.

Autore:


blog comments powered by Disqus