Error Calling "GETTING TOKENS FROM USER CREDENTIALS"

How-To
1

Hello, I’m trying to make a call via API to fetch the user’s TOKEN as described in the documentation in the “GETTING TOKENS FROM USER CREDENTIALS” section, but I always receive the message: “401 - Unauthorized” - “‘grant_type’ field is missing”. Can anyone help me with this subject?

I’m making the call via AngularJS.

Here is the code I use to make the call:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : 'POST',
    url : 'https://api.thinger.io/oauth/token',
    data: {grant_type: 'password', username: 'myusername', password: 'mypassword'},
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},

  }).then(function mySuccess(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      debugger;
        $scope.myWelcome = response.statusText;
  });
});
</script>

</body>
</html>
2

As you are using the browser for issuing such call, can you please debug the API request made? Please, use the Chrome developer tools to debug your request.

I suppose that the problem is that the body (data) is not properly formatted as form-url-encoded, so the server cannot find the grant_type parameter.

Best.

3

Hello, alvarolb.

Thank you for the tip. There was actually an error in the call that was fixed by including a property with a function for transforming the data.

I have included the following complete code and it is now working correctly.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : 'POST',
    url : 'https://api.thinger.io/oauth/token',
    data: {grant_type: 'password', username: 'myusername', password: 'mypassword'},
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
  }).then(function mySuccess(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      debugger;
        $scope.myWelcome = response.statusText;
  });
});
</script>

</body>
</html>

Note that it was necessary to include the “transformRequest” property with a function call to handle the data. It is now working properly.

Thank you one more time.