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）检查令牌是否有效。

如果您需要任何帮助，请告诉我:)