AngularJS 400 bad request when trying to get token

Question

I'm trying to get a token from an external API, this works when I try to log into the web application and when I try to send a request via postman. For this request I need to set the content-type to x-www-form-urlencoded. I know how to do this but it always seems to return a 400 bad request and tell me that the grant_type is invalid. so to kick this quest off, here's the code that works, which will be called at the login:

Code is as below:-

var _login = function (loginData) {
    var data = ["grant_type=password&username=", loginData.userName, "&password=", loginData.password].join('');

var deferred = $q.defer();
$http.post([serviceBase, "token"].join(''), data, { headers: { "Content-Type": "application/x-www-form-urlencoded" } }).success(function (response) {
    console.log("login response", response);
    localStorageService.set(_keyAuthorizationData, { token: response.access_token, userName: loginData.userName });
    _authentication.isAuth = true;
    _authentication.userName = loginData.userName;
    deferred.resolve(response);
}).error(function (err, status) {
    _logOut();
    deferred.reject(err);
});
return deferred.promise;
};

loginData will be filled by the data from the login form.

and here's my other call to the external API which returns a 400 bad request

var _transferPersoon = function (portal, data) {
    var externalAPI = "";
    if (portal == "portal1") {
        externalAPI = "https://urltoportal/webapi/";
    } else if (portal == "portal2") {
        externalAPI = "https://urltoportal/webapi/";
    } else if (portal == "portal3") {
        externalAPI = "https://urltoportal/webapi/";
    } else if (portal == "portal4") {
        externalAPI = "https://urltoportal/webapi/";
    } else {
        externalAPI = serviceBase;
    }

    var tokenData = {
        username: "cactustransfer",
        password: "bbbbbb",
        grant_type: "password"
    };
    var data = ["grant_type=password&username=", "transferaccount", "&password=", "password"].join('');

    $http.post([externalAPI, "token"].join(''), data, { headers: { "Content-Type": "application/x-www-form-urlencoded" } }).success(function (response) {
        return response.access_token;
    })
}

this is the error returned and shown in google chrome:

{error: "unsupported_grant_type"}

this request is being send and passed through this authentication middleware in my ASP.NET web api:

    public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
    {
        Cactus.Business.DataModel.GEBRUIKER gebruiker = null;
        context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] {"*"});

        var identity = new ClaimsIdentity(context.Options.AuthenticationType);

        /*
         * Authenticatie methode voor het verplaatsen van personeel
         * Deze kan niet uitgevoerd worden als het request IP niet in het lijstje van hosts staat.
         * Dit is een extra beveiliging.
         */
        if (context.UserName == "cactustransfer")
        {
            if (!hostVerify.IsValidHost(context.Request.RemoteIpAddress))
            {
                using (UnitOfWork work = new UnitOfWork())
                {
                    gebruiker = work.GebruikerRepository.ValidateUser("transferaccount", "password");
                }
            }
        }

        if (gebruiker == null)
        {
            using (UnitOfWork work = new UnitOfWork())
            {
                gebruiker = work.GebruikerRepository.ValidateUser(context.UserName, context.Password);
                if (gebruiker == null)
                {
                    context.SetError("invalid_grant",
                        "The username or password is incorrect, or you have insufficient rights", context.Request.RemoteIpAddress);
                    return;
                }
            }
        }

        identity.AddClaim(new Claim("sub", context.UserName));
        identity.AddClaim(new Claim("role", "user"));
        identity.AddClaim(new Claim("providerID", gebruiker.gebruikerId.ToString()));
        //identity.AddClaim(new Claim("providerID", gebruiker.persoon.ToString()));

        context.Validated(identity);
    }

and here is my request that I'm testing in postman and its result:

I have checked and tried these following solutions:

How do I POST urlencoded form data with $http without jQuery?

https://github.com/thephpleague/oauth2-server/issues/261

NOTE the username I use in Postman is actually the same as the transferaccount username

EDIT:

Here are the request headers shown in google chrome, first one is the login, which communicates to the local API, the second on is trying to send a request to the external API

UPDATE:

All functionality regarding handling data wit external API's have been moved to the local ASP.NET WEB API's. This way I know how to make it work. But this is not really a solution but rather a work around.

Answer 1

Try this:

$http.post([externalAPI, "token", "?", data].join(''), {}, { headers: { "Content-Type": "application/x-www-form-urlencoded" } }).success(function (response) {
      return response.access_token;
  })