AngularJs + php authentication

Question

Hi i started learning AngularJs and now im trying to do my Login module using angular and php, but i have some issues. I have watched alot tutorials but none of them was helpful in my case, so here is what i have: controllers.js:

var controllers = angular.module('controllers', []);     

controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
scope.main = [
    {username: '', password: ''}
]

scope.login = function(){
    var config = {
        url: '../auth/login.php',
        method: 'POST',
        data: {
            username: scope.main.username,
            password: scope.main.password
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }

    $http(config)
    .success(function(data,status,headers,config){
        if(data.status){
            //succefull login
            User.isLogged = true;
            User.username = data.username;
        }
        else{
            User.isLogged = false;
            User.username = '';
        }
    })
    .error(function(data,status,headers,config){
        User.isLogged = false;
        User.username = '';
    });
}
}])

auth.js:

var services = angular.module('services', []);

services.factory('UserService', [function(){
    var sdo = {
        isLogged: false,
        username: ''
    };
    return sdo;
}]);

login.php:

$username = $_POST['username'];
if($username){
    return "Logged";
}else{
    return false;
}

and the html:

<div class="col-xs-12" id="loginCol" ng-controller="loginController">
   <form ng-submit='login()' name="form" novalidate>
      <div class="form-group">
         <label for="username" class="sr-only">Username</label>
         <input type="text" ng-model="scope.main.username" class="form-control" id="username" placeholder="Име..." />
         <label for="password" class="sr-only">Password</label>
         <input type="password" ng-model="scope.main.password" class="form-control" id="password" placeholder="Парола..." />
      </div>

      <div class="form-group pull-right">
         <button type="button" class="btn btn-primary">Login</button>
         <button type="button" class="btn btn-default">Register</button>
      </div>
   </form>
</div>

In this case i want just if user type something in the username input and hit the login button and on successful call of login.php to return some message. The problem is that code written like that got error "'loginController' is not a function, got undefined" how to fix it?

Answer 1

(Disclosure: I'm one of the developers of UserApp)

You could try the third-party service UserApp, together with the AngularJS module.

Check out the getting started guide, or take the course on Codecademy. 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>
  

  ua-is-email means that the username is the same as the email.

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

• Access user properties:

  User info is 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 with the PHP library to check if the token is valid or not.

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

Answer 2

You have created the application

var controllers = angular.module('controllers', []);   

but didn't use it in the html code, add ng-app attribute to the wrapper div

<div class="col-xs-12" ng-app="controllers" id="loginCol" ng-controller="loginController">

the second issue, that you try to catch submit event, but don't submit the form, use submit type instead button

<button type="submit" class="btn btn-primary">Login</button>

or add ng-click="login()" attribute to the button and remove ng-submit='login()' from the form