我的角度应用程序中的错误请求代码400

Question

I am getting a bad request from the api call i'm making and i have no idea why, been searching around for a long time now. the response i get from the call is :

{"error":"invalid_request","error_description":"Missing input parameters"}

So i'll list my code below, first my html form:

    <ion-view view-title="Login" id="login-page">
  <ion-content id="login-page">
    <h1 id="title">Welkom</h1>
    <img src="../img/logo.png" alt="logo" id="logo">
    <form>
      <div class="list list-inset">
          <label class="item item-input">
            <input type="email" ng-model="email" name="email" placeholder="email">
          </label>
          <label class="item item-input">
            <input type="password" ng-model="password" name="password" placeholder="wachtwoord">
          </label>
      </div>

            <button class="button button-block button-balanced" type="submit" id="form-btn" ng-click="login()">Log in</button>
          <button class="button button-block button-stable" type="submit" id="form-btn">Registreer</button>
          <button class="button button-block button-dark" type="submit" id="scan-btn">Scan</button>
          <a href="templates/browse.html">test</a>
    </form>
  </ion-content>
</ion-view>

then my service:

    angular.module('starter.services', [])

.factory('loginFactory',  function($http, $q){        
    return {
        login: function(email, password) {
            var deferred = $q.defer();
            var data = {
            grant_type: 'password',
            username: email,
            password: password,
            client_id: 'GingerwaldUserApp15',
            client_secret: 'mySecretKey'
    };
            var config = {
                headers: {
                    'Content-Type': 'application/json'
            }};
            var url = "https://www.gingerwald.com/community/v2.1/authorization/oauth/token.php";

            $http.post(url, data, config)
                .success(function(respons){
                    deferred.resolve(respons);
                })
                .error(function(respons,status) {
                    deferred.reject(respons);
                })
                return deferred.promise;
        }
    }
})

and last my controller:

angular.module('starter.controllers', [])

.controller('LoginCtrl', function($scope, $location, $localStorage, loginFactory) {
    $scope.login = function() {
      var email = $scope.email;
      var password = $scope.password;
     //test BAD REQUEST 400 console.log(email, password)
      loginFactory.login(email, password)
      .then(function(response){
        console.log(response);
        $localStorage.token = response.access_token;
        $stage.go("app.browse")
      }, function(error) {
          $scope.email = '';
          $scope.password = '';
      } )
    }
});

my app.js is just the routing. so i'm trying to get a token, because i have to use this token in order to execute other api calls.

this is the api info:

 <table> <tr> <th>description</th> <th>parameters</th> <th>response</th> </tr> <tr><td>To request an access token, based on the user's credentials (email and password). The returned access token has to be used in all other API calls in order to get authorization. The webservice needs to called with method "POST"</td> <td>'grant_type="password"</br> username=the user's email address</br> password=the user's password</br> client_id=the app's id</br> client_secret=the app's secret key</td> <td>The access token is a string of 64 characters. The access token also has an expiration time. The token can only be used until the expiration time has passed.</td></tr> </table> 

thank you

Answer 1

For any experiening this problem in the future: after plenty of hours of debugging i found the solution: This was literally the only solution that worked, i tried many many syntaxes of $http. but only this specific one worked

.factory('loginFactory',  function($http, $q, $localStorage){        
    return {
        login: function(email, password) {
            var deferred = $q.defer();
            var config = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
            }};
            var url = "https://www.gingerwald.com/community/v2.1/authorization/oauth/token.php";
            $http.post(url, "username=" + encodeURIComponent(email) + 
                            "&password=" + encodeURIComponent(password) + 
                            "&grant_type=password" +
                            "&client_id=GingerwaldUserApp15" +
                            "&client_secret='secretKey'", config)
                .success(function(respons){
                    deferred.resolve(respons);
                })
                .error(function(respons,status) {
                    deferred.reject(respons);
                    console.log()
                })
                return deferred.promise;
        }
    }
})