AngularJS Simple Login

Question

I'm a newbie to AngularJS and have a little knowledge of JavaScript.

I'm trying to implement a login page where I have a URL to my server (http://somerandomip/user/get?p=retail123&username=retail123) would give me a JSON response with dummy data upon successful login.

If the username or password is invalid, the JSON response returned will have an error message in it.

I've tried looking for tutorials to do this in the most simple way possible but I can't seem to figure out how to use $http to get this done. I understand this is pretty n00b question but my lack of JavaScript knowledge doesn't help.

If you could direct me towards a basic demo of how to get this done, I'd appreciate it a lot. Thanks in advance.

Edit: I understand that sending password as GET is not safe, I'm just trying to get a working login first.

As an advice, never send password in GET

Trialcoder
– Trialcoder

2014-08-18 04:52:29 +00:00
Commented Aug 18, 2014 at 4:52 — Trialcoder
– Trialcoder, Commented Aug 18, 2014 at 4:52

Trialcoder · Accepted Answer · 2014-08-18 05:05:14Z

1

Firstly you need to inject dependency to use $http like -

myApp.controller("myCtrl", function($scope, $http){
    ......
})

then send data via POST -

var data = {
  username: username,
  password: password 
};

Then you can POST this data to the URL -

    $http.post("/api/login", data).then(function(response){
        if (response.data) {
           // Use it accordingly with the data  
           console.log(respose.data);
        }
        else {                
            ......
        }
    })

For more information - Angular $http Docs

As a tip, explore more about Services in AngularJS.

edited Aug 18, 2014 at 5:05

answered Aug 18, 2014 at 4:58

Trialcoder

6,02411 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mads Over a year ago

Hi @Trialcoder, I have tried this way but so far no luck. I don't get any response whatsoever. Is it possible that CORS might have an impact on this since I'm trying to access an API in another domain? If so, how can I avoid it? Would be grateful if you could provide a basic example. None of the tutorials I found online discuss such a scenario :/

Trialcoder Over a year ago

@MaheshDeSilva It would be g8 if u share some code so that I can have a look at it

Rabi · Accepted Answer · 2014-08-18 05:00:10Z

1

check out this tutorial - https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

Step 1 : Create an angular service(AuthService) to communicate with server and autheticate user using $http

Step 2 : use a controller to invoke the AuthService

Step 3 : Handle session timeout etc..

answered Aug 18, 2014 at 5:00

Rabi

2,23019 silver badges18 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:57:59Z

Trialcoder's solution is fine for beginners,but if u want to know sth more.

Use $httpProvider to deal all of requests and responses,and any response's header should have a new content like appStatus:997 (997 means not logged in).You can get this appStatus from backstage and deal it in public use.

In my project looks like -

$httpProvider.interceptors.push(['$q',function($q) {
  return {
    // optional method
    'request': function(config) {
      return config || $q.when(config);
    },
    // optional method
    'requestError': function(rejection) {
      return $q.reject(rejection);
    },
    response: function (response) {
      // do something on success
      var appstate = response.headers('appStatus');
      if(appstate && appstate != 200){
        if(appstate == 997){
          //997 for not logged in
          window.open('**login page url**','_self')
        }
        else if(appstate == 600){
          //600 for process error
        }
        else if(appstate == 460){
          //460 for parameters cannot be verified
        }
        else if(appstate == 560){
          //560 for unknown error
        }
        else if(appstate == 999){
          //999 for server error
        }
      }

      var reg = /.*(application\/json).*/ig;
      if(reg.test(response.headers()['content-type'])){
        /*
         //Validate response if not ok reject
         // assumes this function is available
         var data = examineJSONResponse(response);
         if(!data)
         return $q.reject(response);
         */
      }
      return response || $q.when(response);
    },
    responseError: function (response) {
      return $q.reject(response);
    }
  };
}]);

Collectives™ on Stack Overflow

AngularJS Simple Login

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related