Javascript Login con AngularJs

Stato
Discussione chiusa ad ulteriori risposte.

AlfaWhite

Utente Silver
13 Dicembre 2015
108
21
9
73
Salve a tutti, sto creando un login con AngularJs per una web app. La validazione avviene lato server, dove sto usando C# mentre la logica lato client con Angular. Posterò tutto qui di seguito - ho riscontrato però un problema nella gestione della sessione aperta. a quanto pare usare $rootscope blocca delle altre funzioni quindi pensavo di usare un servizio, ma sono nuovissimo di Angular e non ci sto riuscendo! :nuu:
Per il form di login ho usato bootstrap che si apre con la stringa:
HTML:
<ul class="nav navbar-nav navbar-right" id="btnLogin">
      <li><a data-toggle="modal" data-target="#login-Modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
HTML:
<div class="modal fade" id="login-Modal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="loginModalLabel">
                        Login
                    </h4>
                </div>
                <form name="loginForm" ng-submit="userSearch(userGet)">
                    <div class="modal-body">
                        <div class="container-fluid" style="width: 70%">

                            <div class="form-group">
                                <label for="lbluser">Username: </label>
                                <input type="text" id="lbluser" ng-model="userGet.UserUtente" required />
                            </div>
                            <div class="form-group">
                                <label for="lblpass">Password: </label>
                                <input type="password" id="lblpass" ng-model="userGet.PasswordUtente" required />
                            </div>

                            <div class="alert alert-danger alert-dismissable" id="ErrAlertLogin" hidden>
                                <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                <strong>Errore!</strong> Username o password errati.
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-cyan">Entra</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
Ok, fino a qui tutto bene. Poi c'è il controller (sto seguendo un'ordine che va dal client al server):
JavaScript:
app.controller('loginCtrl', function ($scope, $http) {
   
    var usrSrc = 'http://localhost:12345/api/WebApi/ValidaUtenteApi';

    $scope.userSearch = function (userCtrl) {
        $http({
            method: 'GET', url: usrSrc, params: { User: userCtrl.UserUtente, Passw: userCtrl.PasswordUtente }
        }).success(function (userValid) {
            $scope.userGet = userValid;
            $('#btnLogin').hide();
            $('#navigationLinks').show();
            $('#btnProfilo').show();
            $('#login-Modal').modal('hide');
        }).error(function () {
            $('#ErrAlertLogin').modal();
            $('div').removeClass('modal-backdrop in');
        });
    };

});
Ok, ora veniamo al controller della WebApi (scritto in C#)
C#:
 [HttpGet]
        public IHttpActionResult ValidaUtenteApi(string User, string Passw)
        {
            List<UserDAO> utentiList = logic.SearchUser(User, Passw);
                                 
            UserDAO userValid = logic.ValidaUtente(utentiList);

            // se non ritorna un utente vuoto manda a angular l'utente
            if (userValid.UserUtente == User && userValid.PasswordUtente == Passw)
            {
                return Ok(userValid);
            }
            else
            {
                return NotFound();
            }
        }
Per la validazione dell'utente ho utilizzato una procedura SEARCH sul DB, questo metodo scorre la lista e se trova la coppia user/passw sul DB che corrisponde a quella in input ritorna Ok(userValid) altrimenti Notfound().
Il metodo logic.SearchUser e logic.ValidaUtente sono richiamati dalla logica, che riporto sotto:
C#:
public List<UserDAO> SearchUser(string User, string Passw)
        {
            return userDAL.UserSearchDAL(User, Passw);
        }

        public UserDAO ValidaUtente(List<UserDAO> utentiList)
        {
            UserDAO userType = new UserDAO();

            if (utentiList.Count > 0)
            {
                userType = utentiList[0];
                return userType;
            }
            else
            {
                return new UserDAO();
            }
        }

Qui avviene il ciclo nel metodo ValidaUtente. Questi metodi a loro volta richiamano quelli nel DAL, che si connettono direttamente al DB ed eseguono le stored procedures - che non riporto perché sono troppo lunghe ed è pure inutile.
In tutto questo il login funziona, cioè la validazione è ok. Non so proprio come gestire la sessione, ad esempio se ricarico la pagina esco e devo rifare il login, come anche se cambio pagina. Cosa mi consigliate? Grazie infinite a chi avrà la pazienza!

Un'altra cosa: anche se non c'entra con la sessione mi sta facendo uscire matto, se le credenziali non sono corrette il modal si chiude da solo impedendo così all'utente di vedere l'alert che compare sotto il campo della password e che lo avverte che i dati sono errati. Per vederlo devo ricliccare sul login, si riapre il modal con i campi ancora compilati e con l'alert aperto. E' più fastidioso questo che la storia della sessione ve lo assicuro!
 
Stato
Discussione chiusa ad ulteriori risposte.