javascript - 使用 RESTful Web 服务身份验证的 AngularJS

Question

我正在尝试构建一个需要用户登录的 AngularJS 应用程序。

当他们第一次访问该应用程序时，他们将被重定向到登录页面 ( http://domain.my:3000/login )。当用户输入他的用户名和密码时，将调用网络服务 ( http://domain.my:4788/WebServices/user/login?username=XXX&password=YYYY )，它返回包含用户 ID、名称等的 JSON 数据，这些数据需要存储在某个地方(cookies/localstorage？)。

我该怎么做呢？我是否需要创建一个服务器(可能在 nodejs 上)来处理对 Web 服务的请求，或者一个 angularjs 服务就足够了吗？

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

我的想法是创建一个 Angular 服务来完成所有工作(在本地存储中创建 cookie/条目)，而登录 Controller 将使用 $http 对用户进行身份验证。

我已经通过本地策略或类似 https://github.com/fnakstad/angular-client-side-auth 的示例研究了 Passport。 ，但我不认为它们涵盖了我想要实现的目标，或者我不能简单地理解它们。

我希望这不是一个太笼统的问题，在此先感谢您的任何答复。

Answer 1

我在这里回答了一个类似的问题:AngularJS Authentication + RESTful API

---

我写了一个AngularJS module对于UserApp几乎可以满足您的需求。您可以:

1. 修改模块并将函数附加到您自己的 API，或者
2. 将模块与UserApp一起使用(基于云的用户管理 API)

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

它支持 protected /公共(public)路由、登录/注销时的重新路由、用于状态检查的心跳、将 session token 存储在 cookie 中、事件等。

如果您使用 UserApp，则无需为用户内容编写任何服务器端代码(除了验证 token 之外)。乘坐course on 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>

  (结束 session 并重定向到登录路由)

• 访问用户属性:

  使用 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()获取 session token 并将其与 AJAX 请求一起发送。在后端，使用 UserApp API (如果您使用 UserApp)检查 token 是否有效。

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