[Javascript] AngularJS: esempio di base per l'utilizzo dell'autenticazione nell'applicazione per pagina singola


Answers

Mi piace l'approccio e l'ho implementato sul lato server senza eseguire alcuna operazione di autenticazione sul front-end

La mia "tecnica" sulla mia ultima app è .. il client non si cura di Auth. Ogni singola cosa nell'app richiede prima un accesso, quindi il server serve sempre solo una pagina di accesso a meno che non venga rilevato un utente esistente nella sessione. Se viene trovato session.user, il server invia semplicemente index.html. Bam: -o

Cerca il commento di "Andrew Joslin".

https://groups.google.com/forum/?fromgroups=#!searchin/angular/authentication/angular/POXLTi_JUgg/VwStpoWCPUQJ

Question

Sono nuovo di AngularJS e ho seguito il loro tutorial e ho avuto un'idea per questo.

Ho un back-end per il mio progetto pronto dove ognuno degli endpoint REST deve essere autenticato.

Cosa voglio fare
a.) Voglio avere una singola pagina per il mio progetto http://myproject.com .
b.) Una volta che un utente raggiunge l'URL nel browser, in base a se l'utente è connesso o meno, viene presentato con una home page / vista o pagina di accesso / vista sotto lo stesso url http://myproject.com .
c.) se un utente non ha effettuato l'accesso, compila il modulo e il server imposta USER_TOKEN in sessione, quindi tutte le ulteriori richieste agli endpoint verranno autenticate in base a USER_TOKEN

Le mie confusioni
a.) Come posso gestire l'autenticazione lato client usando AngularJS? Ho visto here e here ma non ho capito come usarli
b.) Come posso presentare diverse visualizzazioni all'utente in base a se l'utente è loggato o meno nello stesso url http://myproject.com

Sto usando angular.js per la prima volta e mi sto davvero confondendo su come iniziare. Qualsiasi consiglio e / o risorsa sono molto apprezzati.




In angularjs puoi creare la parte dell'interfaccia utente, il servizio, le direttive e tutta la parte di angularjs che rappresentano l'interfaccia utente. È una buona tecnologia su cui lavorare.

Come chiunque sia nuovo in questa tecnologia e voglia autenticare l'utente, allora suggerisco di farlo con la potenza di c # web api. per questo è possibile utilizzare la specifica OAuth che ti aiuterà a creare un forte meccanismo di sicurezza per autenticare l'utente. una volta creato il WebApi con OAuth, è necessario chiamare l'API per token:

var _login = function (loginData) {
 
        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
 
        var deferred = $q.defer();
 
        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
 
            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
 
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
 
            deferred.resolve(response);
 
        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });
 
        return deferred.promise;
 
    };
 

e una volta ottenuto il token, si richiedono le risorse di angularjs con l'aiuto di Token e si accede alla risorsa che è stata mantenuta sicura in web Api con le specifiche OAuth.

Si prega di dare un'occhiata nel seguente articolo per ulteriori informazioni: -

http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/




var _login = function (loginData) {
 
        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
 
        var deferred = $q.defer();
 
        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
 
            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
 
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
 
            deferred.resolve(response);
 
        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });
 
        return deferred.promise;
 
    };