[javascript] AngularJS:在單頁應用程序中使用身份驗證的基本示例


2 Answers

我喜歡這種方法,並在服務器端實現它,而不需要在前端進行任何與認證相關的事情

我的最新應用的'技術'是...客戶端不關心驗證。 應用程序中的每一件事都需要首先登錄,所以服務器總是提供登錄頁面,除非會話中檢測到現有用戶。 如果找到session.user,則服務器只發送index.html。 Bam:-o

尋找“Andrew Joslin”的評論。

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

Question

我是AngularJS的新手,經歷了他們的教程,並對此有所了解。

我為我的項目準備了一個後端,每個REST端點都需要進行身份驗證。

我想做的事
a。)我想為我的項目http://myproject.com提供一個頁面。
b。)一旦用戶點擊瀏覽器中的URL,根據用戶是否登錄,他會在同一個網址http://myproject.com下出現主頁/視圖或登錄頁面/視圖。
c。)如果用戶沒有登錄,則填寫表單並且服務器在會話中設置USER_TOKEN ,因此所有對終端的進一步請求都將基於USER_TOKEN進行認證

我的困惑
a。)如何使用AngularJS處理客戶端身份驗證? 我在herehere看到,但不知道如何使用它們
b。)如何根據用戶是否登錄或不在同一網址http://myproject.com上向用戶展示不同的視圖

我第一次使用angular.js,真正感到困惑的是如何開始。 任何建議和/或資源非常感謝。




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




在angularjs中,您可以創建UI部件,服務,指令以及代表UI的所有angularjs部分。 這是很好的技術。

就像任何一個剛剛進入這項技術並希望認證“用戶”的人一樣,那麼我建議用c#web api的力量去做。 為此,您可以使用OAuth規範來幫助您構建強大的安全機制來驗證用戶身份。 一旦使用OAuth構建WebApi,您需要為令牌調用該API:

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

一旦你獲得了令牌,你就可以在Token的幫助下從angularjs請求資源,並通過OAuth規範訪問web Api中安全的資源。

請查看下面的文章以獲得更多幫助: -

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




Related