AngularJS Basic example to use authentication in Single Page Application

Question

I am new to AngularJS and gone through their tutorial and got a feel for it   I have a backend for my project ready where each of the REST endpoints needs to be authenticated   What I want to do a   I want to have a single page for my project http   myproject com  b   Once a user hits the URL in browser  based on if user is logged in or not  he is presented with a home page view or login page view under the same url http   myproject com  c   if a user is not logged in  it fills out the form and server sets a USER TOKEN in session  so all further requests to endpoints will be authenticated based on USER TOKEN    My Confusions a   How can I handle client-side authentication using AngularJS  I saw here and here but did not understand how to use them b   How can I present different views to user based on if user is logged in or not under same url http   myproject com    I am using angular js for the very first time and really getting confused as to how to start  Any advices and or resources are very much appreciated

User · Accepted Answer

I like the approach and implemented it on server-side without doing any authentication related thing on front-end

My 'technique' on my latest app is.. the client doesn't care about Auth. Every single thing in the app requires a login first, so the server just always serves a login page unless an existing user is detected in the session. If session.user is found, the server just sends index.html. Bam :-o

Look for the comment by "Andrew Joslin".

https://groups.google.com/forum/?fromgroups=#!searchin/angular/authentication/angular/POXLTi_JUgg/VwStpoWCPUQJ

User · Answer

I answered a similar question here  AngularJS Authentication   RESTful API    I ve written an AngularJS module for UserApp that supports protected public routes  rerouting on login logout  heartbeats for status checks  stores the session token in a cookie  events  etc   You could either    Modify the module and attach it to your own API  or  Use the module together with UserApp  a cloud-based user management API    https   github com userapp-io userapp-angular  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    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     routeProvider when   home    templateUrl   partials home html       The  otherwise   route should be set to where you want your users to be redirected after login  Example    routeProvider otherwise  redirectTo    home     Login form with error handling    lt form ua-login ua-error  error-msg  gt       lt input name  login  placeholder  Username  gt  lt br gt       lt input name  password  placeholder  Password  type  password  gt  lt br gt       lt button type  submit  gt Log in lt  button gt       lt p id  error-msg  gt  lt  p gt   lt  form gt   Signup form with error handling    lt form ua-signup ua-error  error-msg  gt     lt input name  first name  placeholder  Your name  gt  lt br gt     lt input name  login  ua-is-email placeholder  Email  gt  lt br gt     lt input name  password  placeholder  Password  type  password  gt  lt br gt     lt button type  submit  gt Create account lt  button gt     lt p id  error-msg  gt  lt  p gt   lt  form gt   Log out link    lt a href     ua-logout gt Log Out lt  a gt    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   lt span gt    user email    lt  span gt  Hide elements that should only be visible when logged in    lt div ng-show  user authorized  gt Welcome    user first name     lt  div gt  Show an element based on permissions    lt div ua-has-permission  admin  gt You are an admin lt  div gt    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

User · Answer

x000D   x000D  var  login   function  loginData    x000D    x000D          var data    grant type password amp username     loginData userName     amp password     loginData password  x000D    x000D          var deferred    q defer    x000D    x000D           http post serviceBase    token   data    headers     Content-Type    application x-www-form-urlencoded       success function  response    x000D    x000D              localStorageService set  authorizationData     token  response access token  userName  loginData userName     x000D    x000D               authentication isAuth   true  x000D               authentication userName   loginData userName  x000D    x000D              deferred resolve response   x000D    x000D             error function  err  status    x000D               logOut    x000D              deferred reject err   x000D              x000D    x000D          return deferred promise  x000D    x000D         x000D    x000D   x000D   x000D

User · Answer

I ve created a github repo summing up this article basically  https   medium com opinionated-angularjs techniques-for-authentication-in-angularjs-applications-7bbf0346acec  ng-login Github repo  Plunker  I ll try to explain as good as possible  hope I help some of you out there    1  app js  Creation of authentication constants on app definition  var loginApp   angular module  loginApp     ui router    ui bootstrap      Constants regarding user login defined here    constant  USER ROLES         all            admin    admin       editor    editor       guest    guest     constant  AUTH EVENTS         loginSuccess    auth-login-success       loginFailed    auth-login-failed       logoutSuccess    auth-logout-success       sessionTimeout    auth-session-timeout       notAuthenticated    auth-not-authenticated       notAuthorized    auth-not-authorized        2  Auth Service  All following functions are implemented in auth js service  The  http service is used to communicate with the server for the authentication procedures  Also contains functions on authorization  that is if the user is allowed to perform a certain action   angular module  loginApp    factory  Auth       http     rootScope     window    Session    AUTH EVENTS    function  http   rootScope   window  Session  AUTH EVENTS     authService login           authService isAuthenticated           authService isAuthorized           authService logout            return authService           3  Session  A singleton to keep user data  The implementation here depends on you    angular module  loginApp   service  Session   function  rootScope  USER ROLES         this create   function user            this user   user          this userRole   user userRole             this destroy   function             this user   null          this userRole   null             return this         4  Parent controller  Consider this as the  main  function of your application  all controllers inherit from this controller  and it s the backbone of the authentication of this app     lt body ng-controller  ParentController  gt         lt  body gt     5  Access control  To deny access on certain routes 2 steps have to be implemented   a  Add data of the roles allowed to access each route  on ui router s  stateProvider service as can be seen below  same can work for ngRoute      config function   stateProvider  USER ROLES       stateProvider state  dashboard         url    dashboard       templateUrl   dashboard index html       data          authorizedRoles   USER ROLES admin  USER ROLES editor                   b  On  rootScope  on   stateChangeStart   add the function to prevent state change if the user is not authorized     rootScope  on   stateChangeStart   function  event  next        var authorizedRoles   next data authorizedRoles      if   Auth isAuthorized authorizedRoles           event preventDefault          if  Auth isAuthenticated                 user is not allowed          rootScope  broadcast AUTH EVENTS notAuthorized           else              user is not logged in          rootScope  broadcast AUTH EVENTS notAuthenticated                        6  Auth interceptor  This is implemented  but can t be checked on the scope of this code  After each  http request  this interceptor checks the status code  if one of the below is returned  then it broadcasts an event to force the user to log-in again   angular module  loginApp    factory  AuthInterceptor       rootScope     q    Session    AUTH EVENTS   function  rootScope   q  Session  AUTH EVENTS        return           responseError   function response                 rootScope  broadcast                   401   AUTH EVENTS notAuthenticated                  403   AUTH EVENTS notAuthorized                  419   AUTH EVENTS sessionTimeout                  440   AUTH EVENTS sessionTimeout               response status   response               return  q reject response                            P S  A bug with the form data autofill as stated on the 1st article can be easily avoided by adding the directive that is included in directives js    P S 2 This code can be easily tweaked by the user  to allow different routes to be seen  or display content that was not meant to be displayed  The logic MUST be implemented server-side  this is just a way to show things properly on your ng-app

User · Answer

In angularjs you can create the UI part  service  Directives and all the part of angularjs which represent the UI  It is nice technology to work on   As any one who new into this technology and want to authenticate the  User  then i suggest to do it with the power of c  web api  for that you can use the OAuth specification which will help you to built  a strong security mechanism to authenticate the user  once you build the WebApi with OAuth you need to call that api for token    x000D   x000D  var  login   function  loginData    x000D    x000D          var data    grant type password amp username     loginData userName     amp password     loginData password  x000D    x000D          var deferred    q defer    x000D    x000D           http post serviceBase    token   data    headers     Content-Type    application x-www-form-urlencoded       success function  response    x000D    x000D              localStorageService set  authorizationData     token  response access token  userName  loginData userName     x000D    x000D               authentication isAuth   true  x000D               authentication userName   loginData userName  x000D    x000D              deferred resolve response   x000D    x000D             error function  err  status    x000D               logOut    x000D              deferred reject err   x000D              x000D    x000D          return deferred promise  x000D    x000D         x000D    x000D   x000D   x000D    and once you get the token then you request the resources from angularjs with the help of Token and access the resource which kept secure in web Api with OAuth specification   Please have a look into the below article for more help -   http   bitoftech net 2014 06 09 angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity

User · Answer

I think that every JSON response should contain a property  e g   authenticated  false   and the client has to test it everytime  if false  then the Angular controller service will  redirect  to the login page    And what happen if the user catch de JSON and change the bool to True    I think you should never rely on client side to do these kind of stuff  If the user is not authenticated  the server should just redirect to a login error page

[javascript] AngularJS: Basic example to use authentication in Single Page Application

Examples related to javascript

Examples related to angularjs

Examples related to authentication

[javascript] AngularJS: Basic example to use authentication in Single Page Application

Examples related to javascript

Examples related to angularjs

Examples related to authentication

Examples related to login