AngularJS：在單頁​​應用程序中使用身份驗證的基本示例

Question

我是AngularJS的新手，並通過他們的教程並瞭解它。

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

我想做什麼
一）。我希望有一個單一頁面爲我的項目http://myproject.com。
b。）一旦用戶點擊瀏覽器中的URL，根據用戶是否登錄，他會在相同的URL http://myproject.com下呈現主頁/視圖或登錄頁面/視圖。
角），如果用戶沒有登錄，則填寫表格，服務器將在會議上USER_TOKEN，所以到端點的所有進一步的請求將根據USER_TOKEN

我的困惑
一個被認證。 ）如何使用AngularJS處理客戶端身份驗證？我看到here和here，但不知道如何使用它們
灣）我怎麼能根據用戶是否在或不符合相同的URL http://myproject.com

我使用angular.js用於記錄呈現不同的意見，用戶這是第一次，真的很困惑如何開始。任何建議和/或資源非常感謝。

Answer 1

我喜歡的方式，並沒有做在前端相關事情的任何身份驗證實現了它在服務器端

我對我的最新應用「技術」是..客戶不關心 驗證。應用程序中的每件事都需要首先登錄，因此 服務器只會始終提供登錄頁面，除非在會話中檢測到現有用戶 。如果找到session.user，則服務器僅發送index.php 。 Bam：-o

查找「Andrew Joslin」的評論。

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

Answer 2

我認爲每個JSON響應應該包含一個屬性（例如{身份驗證：假}）和客戶端必須每次測試：如果爲假，則角控制器/服務將「重定向「到登錄頁面。

如果用戶抓住de JSON並將bool更改爲True，會發生什麼？

我認爲你不應該依賴客戶端來做這些東西。如果用戶未通過身份驗證，則服務器應重定向到登錄/錯誤頁面。

Answer 3

我回答了類似的問題在這裏：AngularJS Authentication + RESTful API

---

我寫的AngularJS module爲UserApp一個支持保護/公共路線，改道上登錄/註銷，心跳進行狀態檢查，存儲會話令牌一個cookie，事件等

你既可以：

1. 修改模塊，並將其安裝到自己的API，或
2. 與UserApp（基於雲的用戶管理API）

一起使用的模塊https://github.com/userapp-io/userapp-angular

如果您使用UserApp，則不必爲用戶填寫任何服務器端代碼（不僅僅是驗證令牌）。拿course on Codecademy來試試。

這裏是它如何工作的一些例子：

• 如何指定應該是公開的哪條路線，其路線，那就是登錄表單：

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); 
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true}); 
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'}); 
  

  的.otherwise()路線應設置爲您希望用戶在登錄後重定向到的位置。例如：

  $routeProvider.otherwise({redirectTo: '/home'});

• 登錄形式與錯誤處理：

  <form ua-login ua-error="error-msg"> 
      <input name="login" placeholder="Username"><br> 
      <input name="password" placeholder="Password" type="password"><br> 
      <button type="submit">Log in</button> 
      <p id="error-msg"></p> 
  </form> 
  

• 註冊表格錯誤處理：

  <form ua-signup ua-error="error-msg"> 
      <input name="first_name" placeholder="Your name"><br> 
      <input name="login" ua-is-email placeholder="Email"><br> 
      <input name="password" placeholder="Password" type="password"><br> 
      <button type="submit">Create account</button> 
      <p id="error-msg"></p> 
  </form> 
  

• 註銷利NK：

  <a href="#" ua-logout>Log Out</a>

  （結束會話和重定向到登錄路線）

• Access用戶屬性：

  用戶屬性是使用user服務，例如訪問。G：user.current.email

  或者模板：<span>{{ user.email }}</span>

• 隱藏元素應該只看到登錄時：

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

• 顯示基於權限的元素：

  <div ua-has-permission="admin">You are an admin</div>

，並驗證您的後端服務，只需使用user.token()獲取會話令牌，並與AJAX請求發送。在後端，使用UserApp API（如果您使用UserApp）檢查令牌是否有效。

如果您需要任何幫助，請讓我知道！

Answer 4

我創建了一個GitHub庫基本上總結了這篇文章：https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-login Github repo

Plunker

我會盡力解釋儘可能好，希望我幫你出些有：

（1）app.js：在應用程序定義上創建身份驗證常量

var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap']) 
/*Constants regarding user login defined here*/ 
.constant('USER_ROLES', { 
    all : '*', 
    admin : 'admin', 
    editor : 'editor', 
    guest : 'guest' 
}).constant('AUTH_EVENTS', { 
    loginSuccess : 'auth-login-success', 
    loginFailed : 'auth-login-failed', 
    logoutSuccess : 'auth-logout-success', 
    sessionTimeout : 'auth-session-timeout', 
    notAuthenticated : 'auth-not-authenticated', 
    notAuthorized : 'auth-not-authorized' 
}) 

（2）認證服務：以下所有功能都在auth.js服務中實現。 $ http服務用於與服務器通信以進行認證過程。還包含授權功能，即允許用戶執行特定操作。

angular.module('loginApp') 
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS', 
function($http, $rootScope, $window, Session, AUTH_EVENTS) { 

authService.login() = [...] 
authService.isAuthenticated() = [...] 
authService.isAuthorized() = [...] 
authService.logout() = [...] 

return authService; 
} ]); 

（3）會話：一個Singleton保持的用戶數據。這裏的實現取決於你。

angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) { 

    this.create = function(user) { 
     this.user = user; 
     this.userRole = user.userRole; 
    }; 
    this.destroy = function() { 
     this.user = null; 
     this.userRole = null; 
    }; 
    return this; 
}); 

（4）家長控制：認爲這是你的應用程序的「主要」功能，所有控制器從該控制器繼承，這是這個應用程序的認證的中堅力量。

<body ng-controller="ParentController"> 
[...] 
</body> 

（5）訪問控制：要拒絕向某些航線2個步驟必須實現訪問：

一）加入允許訪問每條路線的角色數據，對UI路由器的$ stateProvider服務可以在下面看到（同樣可以爲ngRoute工作）。

.config(function ($stateProvider, USER_ROLES) { 
    $stateProvider.state('dashboard', { 
    url: '/dashboard', 
    templateUrl: 'dashboard/index.html', 
    data: { 
     authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor] 
    } 
    }); 
}) 

二）在$ rootScope。在$（ '$ stateChangeStart'）添加到阻止狀態改變，如果用戶沒有被授權的功能。

$rootScope.$on('$stateChangeStart', function (event, next) { 
    var authorizedRoles = next.data.authorizedRoles; 
    if (!Auth.isAuthorized(authorizedRoles)) { 
     event.preventDefault(); 
     if (Auth.isAuthenticated()) { 
     // user is not allowed 
     $rootScope.$broadcast(AUTH_EVENTS.notAuthorized); 
     } else { 
     // user is not logged in 
     $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated); 
     } 
    } 
}); 

（6）驗證攔截：實現此方法，但不能在此代碼的範圍檢查。在每個$ http請求之後，這個攔截器檢查狀態碼，如果返回下面的一個，那麼它會廣播一個事件來強制用戶重新登錄。

angular.module('loginApp') 
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS', 
function($rootScope, $q, Session, AUTH_EVENTS) { 
    return { 
     responseError : function(response) { 
      $rootScope.$broadcast({ 
       401 : AUTH_EVENTS.notAuthenticated, 
       403 : AUTH_EVENTS.notAuthorized, 
       419 : AUTH_EVENTS.sessionTimeout, 
       440 : AUTH_EVENTS.sessionTimeout 
      }[response.status], response); 
      return $q.reject(response); 
     } 
    }; 
} ]); 

P.S.通過添加directives.js中包含的指令，可以輕鬆避免第1條中所述的表單數據自動填充錯誤。

P.S.2該代碼可以很容易地由用戶調整，以允許看到不同的路線，或顯示不打算顯示的內容。邏輯必須在服務器端實現，這只是在ng-app上正確顯示內容的一種方式。

Answer 5

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

，一旦你得到了令牌，那麼你從angularjs請求資源，令牌的幫助和訪問使用OAuth規範在web API中保持安全的資源。

請看看到下面的文章以獲得更多幫助： -

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

Answer 6

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