Not sure what AngularJS $http.post is expecting from PHP

Question

I following the authentication guide from Jason Watmore: http://www.jasonwatmore.com/post/2014/05/26/AngularJS-Basic-HTTP-Authentication-Example.aspx

I am able to send a $http.post and get success back in my console(response) . But for some reason this is not triggering the controller to redirect the page and keep me logged in. I feel like I am not returning what the system is expecting.

Here is the $http.post

  /* Dummy authentication for testing, uses $timeout to simulate api call
   ----------------------------------------------*/
  //$timeout(function(){
  //      var response = { success: username === 'test' && password === 'test' };
  //      if(!response.success) {
  //          response.message = 'Username or password is incorrect';
  //      }
  //      callback(response);
  //  }, 1000);


  /* Use this for real authentication
   ----------------------------------------------*/
  $http.post('./Scripts/login.php', {
      'Myusername': username,
      'Mypassword': password
    })
    .success(function(response) {
      console.log(response);    //THIS RETURNS SUCCESS WHEN RIGHT
      callback(response);
    });
};

Here is the Controller

'use strict';

angular.module('Authentication')

.controller('LoginController',
    ['$scope', '$rootScope', '$location', 'AuthenticationService',
    function ($scope, $rootScope, $location, AuthenticationService) {
        // reset login status
        AuthenticationService.ClearCredentials();

        $scope.login = function () {
            $scope.dataLoading = true;
            AuthenticationService.Login($scope.username, $scope.password, function(response) {
                if(response.success) {
                    AuthenticationService.SetCredentials($scope.username, $scope.password);
                    $location.path('/');
                    console.log("success");
                } else {
                    $scope.error = 'Username or password is incorrect';
                    $scope.dataLoading = false;
                    console.log("error");
                }
            });
        };
    }]);

Here is my PHP

<?php

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

$data = json_decode( file_get_contents('php://input') );
$username = $data->Myusername;
$userpassword = $data->Mypassword;

if (isset($data->Myusername)) {
  if (isset($data->Mypassword)) {

    $query=mysqli_query($conn,"SELECT * FROM UserTable WHERE username='$username' && password='$userpassword'");
    $count=mysqli_num_rows($query);
    $row=mysqli_fetch_array($query);

    if ($count==1)
    {
      echo $response = 'success';
    }
    else
    {
      echo $response = 'error';
    }

  } else {
    echo "password wrong";
  }
} else {
  echo "userID match";
}


mysqli_close($conn);
?>

Answer 1

Austin you might be running into the common issue with AngularJS's $http POST. It's handled differently than jQuery for example.

You'll need a few things, to set a different Content-Type, and also to serialize your data before sending it.

First modify your default headers:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8"; 

Then use JQuery's $.param method, serialize your data before sending it.

$http.post(targetURL, $.param(yourObjectHere));

There are other options like making it do this by default using $httpProvider.defaults.transformRequest as well.

$httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? $.param(data) : data;
}];