AngularJS使用RESTful Web服務身份驗證

Question

我正在嘗試構建一個需要用戶登錄的AngularJS應用程序。

當他們第一次訪問應用程序時，他們將被重定向到登錄頁面（ http://domain.my:3000/login ）。 當用戶輸入他的用戶名和密碼時，將調用web服務（ http://domain.my:4788/WebServices/user/login?username=XXX&password=YYYY ），該服務返回帶有用戶id，名稱等的JSON數據。需要存儲在哪里（cookies / localstorage？）。

我怎么能這樣做呢？ 我是否需要創建一個服務器（可能在nodejs上）來處理對Web服務的請求，或者angularjs服務是否足夠？

app.service("UserService", function($http) {
}

我的想法是創建一個角度服務，可以完成所有工作（在localstorage中創建cookie /條目），而登錄控制器將使用$ http對用戶進行身份驗證。

我已經使用本地策略或像https://github.com/fnakstad/angular-client-side-auth這樣的示例調查了Passport，但我不認為它們涵蓋了我想要實現的目標，或者我不能只是了解它們。

我希望這不是一般問題，並提前感謝任何回復。

Answer 1

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

---

我為UserApp編寫了一個AngularJS模塊 ，可以完成您想要的任務。 你可以：

1. 修改模塊並將函數附加到您自己的API，或
2. 將該模塊與UserApp （基於雲的用戶管理API）一起使用

https://github.com/userapp-io/userapp-angular

它支持受保護/公共路由，在登錄/注銷時重新路由，用於狀態檢查的心跳，將會話令牌存儲在cookie中，事件等。

如果您使用UserApp，則不必為用戶填寫任何服務器端代碼（不僅僅是驗證令牌）。 參加Codecademy課程試試吧。

以下是一些如何工作的示例：

• 登錄表單，錯誤處理：

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

• 如何指定應該公開的路由以及登錄表單的路由：

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

  .otherwise()路由應設置為您希望在登錄后重定向用戶的位置。 例：

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

• 退出鏈接：

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

  （結束會話並重定向到登錄路由）

• 訪問用戶屬性：

  使用user服務訪問用戶屬性，例如： 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 2

試着閱讀這篇文章 。

我使用的方法是考慮不同的身份驗證層（webapp和webservice），並僅考慮Web服務中的真實身份驗證。 在應用身份驗證時，Webapp的行為與用戶期望的一樣。

希望這可以幫助。