javascript AngularJS 使用 RESTful Web 服务认证

AngularJS using RESTful web service authentication

提问by Xander

I am trying to build an AngularJS app that would require users to login.

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

When they first visit the application, they would get redirected to a login page (http://domain.my:3000/login). When the user enters his username and password, a webservice will be called (http://domain.my:4788/WebServices/user/login?username=XXX&password=YYYY) which returns JSON data with the user's id, name, etc. that would need to be stored somewhere (cookies/localstorage?).

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

How could I go about doing that? Would I need to create a server (on nodejs perhaps) to handle the requests to the web service or would an angularjs service suffice?

我怎么能这样做呢？我是否需要创建一个服务器（可能在 nodejs 上）来处理对 Web 服务的请求，还是 angularjs 服务就足够了？

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

My idea was to create a service in angular that would do all the work (create cookie/entry in localstorage) while the login controller would authenticate the user using $http.

我的想法是在 angular 中创建一个服务来完成所有工作（在 localstorage 中创建 cookie/条目），而登录控制器将使用 $http 对用户进行身份验证。

I have looked into things Passport with local strategy or examples like https://github.com/fnakstad/angular-client-side-auth, but I don't think they cover what I'm trying to achieve or I can't simply understand them.

我已经使用本地策略或示例（例如https://github.com/fnakstad/angular-client-side-auth ）研究了 Passport 的内容，但我认为它们没有涵盖我想要实现的目标，或者我无法实现简单地了解他们。

I hope this is not too general of a question and thanks in advance for any replies.

我希望这不是一个太笼统的问题，并提前感谢您的任何答复。

采纳答案by Timothy E. Johansson

I answered a similar question here: AngularJS Authentication + RESTful API

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

---

---

I've written an AngularJS modulefor UserAppthat does pretty much what you want. You could either:

我为UserApp编写了一个AngularJS 模块，它几乎可以满足您的需求。你可以：

1. Modify the module and attach the functions to your own API, or
2. Use the module together with UserApp(a cloud-based user management API)

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

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

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

It supports protected/public routes, rerouting on login/logout, heartbeats for status checks, stores the session token in a cookie, events, etc.

它支持受保护/公共路由、登录/注销时重新路由、状态检查的心跳、将会话令牌存储在 cookie、事件等中。

If you use UserApp, you won't have to write any server-side code for the user stuff (more than validating a token). Take the course on Codecademyto try it out.

如果您使用 UserApp，您将不必为用户内容编写任何服务器端代码（不仅仅是验证令牌）。参加Codecademy的课程尝试一下。

Here's some examples of how it works:

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

• Login form with error handling:

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

• Signup form with error handling:

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

• How to specify which routes that should be public, and which route that is the login form:

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

  The .otherwise()route should be set to where you want your users to be redirected after login. Example:

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

• Log out link:

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

  (Ends the session and redirects to the login route)

• Access user properties:

  User properties are accessed using the userservice, e.g: user.current.email

  Or in the template: <span>{{ user.email }}</span>

• Hide elements that should only be visible when logged in:

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

• Show an element based on permissions:

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

• 带有错误处理的登录表单：

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

And to authenticate to your back-end services, just use user.token()to get the session token and send it with the AJAX request. At the back-end, use the UserApp API(if you use UserApp) to check if the token is valid or not.

并且要对您的后端服务进行身份验证，只需使用user.token()获取会话令牌并将其与 AJAX 请求一起发送。在后端，使用UserApp API（如果您使用 UserApp）来检查令牌是否有效。

If you need any help, just let me know :)

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

回答by GlueLabs

Try reading this article.

尝试阅读这篇文章。

The approach I used is to consider different layers of authentication (webapp and webservice), and to consider the real authentication only in the webservice. Webapp just behave as the user expect in case of authentication.

我采用的做法是考虑不同层的认证（webapp和webservice），只在webservice中考虑真正的认证。在身份验证的情况下，Webapp 的行为就像用户期望的那样。

Hope this helps.

希望这可以帮助。