AngularJS using RESTful web service authentication

Question

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

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

Answer 1

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

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">Welcome {{ 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 :)