Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have AngularJS for front - Node.js(Express.js) for sever side web application and having trouble getting the authentication.

this is login page URL.

http://localhost:3000/#/extra-signin

After I filled email and password, and pushed login button. but still same page displayed.

URL after pushed login button is just like below.

http://localhost:3000/?email=test%40test.com&password=test#/extra-signin

I expected Angular controller would help posting login data to server by post method, but Angular controller seems not working. It seems get method working.

Angular controller:

App.controller('ExtraSigninController', function($scope, $routeParams, $http, $location, $rootScope, $alert, $window) {
    $scope.login = function() {
        $http.post('/auth/login',$scope.user)
        .success(function(data) {
            $window.localStorage.token = data.token;
            var payload = JSON.parse($window.atob(data.token.split('.')[1]));
            $rootScope.currentUser = payload.user;
            $location.path('/');
            $alert({
                title: 'Cheers!',
                content: 'You have successfully logged in.',
                animation: 'fadeZoomFadeDown',
                type: 'material',
                duration: 3
            });
        })
        .error(function() {
            delete $window.localStorage.token;
            $alert({
                title: 'Error!',
                content: 'Invalid username or password.',
                animation: 'fadeZoomFadeDown',
                type: 'material',
                duration: 3
            });
        });
    }
}

Angular config:

App.config(function($routeProvider, $locationProvider) {
    $routeProvider        
    .when('/extra-signup', {
        templateUrl: 'templates/states/extra-signup.html',
        controller: 'ExtraSignupController'
    })
    .when ....
    .when ....
    .otherwise({
        redirectTo: '/'
    });
});

HTML login page:

<div id="signin-page">
  <div class="page-form-wrapper"></div>
  <div class="page-form">

      <div class="header-content">
        <h1>login</h1>
      </div>
      <div class="body-content">
        <p>login:</p>
        <div class="row mbm text-center">
          <div class="col-md-4"><a href="/auth/twitter" target="_self" class="btn btn-sm btn-twitter btn-block"><i class="fa fa-twitter fa-fw"></i>Twitter</a></div>
          <div class="col-md-4"><a href="/auth/facebook" target="_self" class="btn btn-sm btn-facebook btn-block"><i class="fa fa-facebook fa-fw"></i>Facebook</a></div>
          <div class="col-md-4"><a href="/auth/google" target="_self" class="btn btn-sm btn-google-plus btn-block"><i class="fa fa-google-plus fa-fw"></i>Google +</a></div>
        </div>
        <form class="form">
        <div class="form-group">
          <div class="input-icon right"><i class="fa fa-user"></i>
            <input type="text" placeholder="Email" name="email" ng-model="user.email" class="form-control input-lg" required autofocus/>
          </div>
        </div>
        <div class="form-group">
          <div class="input-icon right"><i class="fa fa-key"></i>
            <input type="password" placeholder="password" name="password" mg-model="user.password" class="form-control input-lg" required/>
          </div>
        </div>
        <div class="form-group pull-right">
          <input type="submit" class="btn btn-success" ng-click="login()" value="login">
        </div>
        </form>
      </div>
  </div>
</div>

this is server side code:

app.post('/users/session', passport.authenticate('local'));

//passport local strategy
passport.use(new LocalStrategy({
    usernameField: 'email',
    passwordField: 'password'
  },
  function(email, password, done) {
    db.User.find({ where: { email: email }}).success(function(user) {
      if (!user) {
        // done(null, false, { message: 'Unknown user' });
        res.send(401, 'User does not exist');
      } else if (!user.authenticate(password)) {
        // done(null, false, { message: 'Invalid password'});
        res.send(401, 'Invalid email and/or password');
      } else {
        logger.debug('Login (local) : { id: ' + user.id + ', username: ' + user.username + ' }');
        // done(null, user);
        var token = createJwtToken(user);
        res.send({ token: token });
      }
    }).error(function(err){
      done(err);
    });
  }
));

I don't know why Angular Controller's post method doesn't work. and I don't understand why returned url is like that. Position of get parameter is something wrong.

Not sure what I am doing wrong?

Any advice would be great

share|improve this question
    
Could you please add some detail to the question explaining what do you mean by "Url after pushed login button on login page is like this. Screen never change." so people can try to understand what is going on? –  José Luis Oct 3 at 10:39
    
thank you for reply Jose. I want to try authentication using Angular $http.post method not html form's post method, but login form data seems sent by get method. so I want to fix this. –  user3744647 Oct 3 at 10:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.