Basic authentication using http$ in Angular - Passing Username/Password and grant_type

Question

I am trying to use Angular to authenticate against an authorization endpoint that I know works using Postman.

<script type="text/javascript">
    var tokenGeneratorApp = angular.module('myApp', []);

    myApp.controller('AuthenticationController', function ($scope, $http) {
        var ac = this;
        ac.authorizationToken = null;

        ac.getAuthorizationToken = function () {
            $http({
                method : 'POST',
                url: 'https://api.myserver.net/oauth/token',
                data: {
                    grant_type: 'password',
                    username: 'theUserName', 
                    password: 'thePassword'
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(_authenticationSuccess, _authenticationError);
        };

        // Private methods to handle promise results

        function _authenticationSuccess(response) {
            ac.authorizationToken = response.data;
            ac.resultsDisplay = ac.authorizationToken;
        };

        function _authenticationError(response) {
            ac.resultsDisplay = 'An error occured: ' + response.data;
        };
    });
</script>

When I call getAuthorizationToken()I get an Http 400 back. When I look into the response.data object there is an error saying error:"unsupported_grant_type". This is confusing to me because in the Postman client I specify that the grant_type as password and all works as expected.

I must be doing something wrong in the Angular code.

Answer 1

Had a very similar problem recently. Try removing the 'headers' and insert 'dataType' instead, as follows:

        $http({
            method : 'POST',
            url: 'https://api.myserver.net/oauth/token',
            dataType: "json",
            data: {
                grant_type: 'password',
                username: 'theUserName', 
                password: 'thePassword'
            }

EDIT

        $http({
            method : 'POST',
            url: 'https://api.myserver.net/oauth/token',
            data: {
                "username=" + theUserName + "&password=" +   
                thePassword + "&grant_type=thePassword"
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

Answer 2

//resolving => error:"unsupported_grant_type"

vm.BtnLogin = function () {

    $scope.txtUsernamee;
    $scope.txtPasswordd;

    var client_credentials =  $scope.txtUsernamee +   $scope.txtPasswordd;
    var auth = 'username=' + $scope.txtUsernamee + '&' + 'password=' + $scope.txtPasswordd + '&grant_type=password';

    $http({
        method: "POST",
        url: '/token',
        contentType: 'application/json',
        data: auth

    }).then(function success(response) {
        //$('#successModal').modal('show');
        console.log("ok")
        },
        function error(e) {

            console.log(e)
        }
    );
};