javascript - AngularJS using RESTful web service authentication - Stack Overflow

admin管理员组

文章数量:1278691

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

When they first visit the application, they would get redirected to a login page (:3000/login). When the user enters his username and password, a webservice will be called (: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?).

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?

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.

I have looked into things Passport with local strategy or examples like , but I don't think they cover what I'm trying to achieve or I can't simply understand them.

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

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

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?).

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?

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.

I have looked into things Passport with local strategy or examples like https://github./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.

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

• javascript
• rest
• authentication
• angularjs

Share Improve this question Follow asked Jul 8, 2013 at 12:32 XanderXander 41211 gold badge66 silver badges1919 bronze badges 2

• I think you need to learn more about server-side code. Generally what happens is the username and password are sent to the server. The server validates the credentials, and if okay, creates a session and issues a session token back to the client which is stored in a cookie. Requests to "protected" areas are always checked to make sure the user's session is still valid for access, and thus the server has control over which requests are fulfilled and when the session expires. There are security implications that should not be overlooked but that's too much detail for me to go into here. – Hippocrates Commented Jul 8, 2013 at 15:09
• The server already does all that. I get an authentication token from the server. My question was mainly aimed at applying some GUI changes to actually show to the user that he's logged in and preset the interface. I'm aware of the non-existent security that javascript offers, I'm mainly talking about AngularJS. – Xander Commented Jul 11, 2013 at 12:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

---

I've written an AngularJS module for UserApp that does pretty much what you want. You could either:

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)

https://github./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.

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 Codecademy to try it out.

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 user service, 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">Wele {{ user.first_name }}!</div>

• Show an element based on permissions:

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

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

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.

Hope this helps.

本文标签： javascriptAngularJS using RESTful web service authenticationStack Overflow