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.

Richard Ansell · Accepted Answer · 2017-02-10T01:36:09.043

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'
            }

edited Feb 10 '17 at 01:36

answered Feb 09 '17 at 21:20

Richard Ansell

916
1
12
28

Thanks for the reply. I made the change you indicated but I get the same error. – webworm Feb 09 '17 at 21:33
Can you try instead changing the header to 'Content-type': 'application/x-www-form-urlencoded' – Richard Ansell Feb 09 '17 at 21:42
Can I just verify you've tried the following, without the 'dataType' included instead: $http({ method : 'POST', url: 'https://api.myserver.net/oauth/token', data: { grant_type: 'password', username: 'theUserName', password: 'thePassword' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } – Richard Ansell Feb 10 '17 at 00:17
Yes, everything is just as my example in the original question except the headers are now `'Content-Type': 'application/x-www-form-urlencoded'` – webworm Feb 10 '17 at 00:29
The only other solution I can understand may solve this issue is the format of the 'password'. The answer to this link (https://social.msdn.microsoft.com/Forums/sqlserver/en-US/d54c668f-d8e3-4662-b124-d9abc3176c8c/http-post-body-parameters-to-get-oauth2-token?forum=azurelogicapps) outlines a structure of how the password should look, which is the only solution I can think of – Richard Ansell Feb 10 '17 at 01:04
Thanks Richard. I think that is the issue. If I reformat the `data` block to be like that found on the query string such as 'username=theuserName&password=thePassword&grant_type=password' then it works! That page you linked to talks about that as does this SO article (http://stackoverflow.com/questions/20376738/how-to-get-access-token-from-asp-net-web-api-2-via-angularjs-http). If you want to add this to your answer I will accept it as correct. – webworm Feb 10 '17 at 01:09
That's great news if that has fixed it, which appears to be a consistent problem after looking into it further. In my case, the data type was a specific issue. I will add the code to my previous answer. Thanks – Richard Ansell Feb 10 '17 at 01:13
I did not use `dataType: "json"`. Rather I used `headers: { 'Content-Type': 'application/x-www-form-urlencoded' }` because the data is being sent `urlencoded` – webworm Feb 10 '17 at 01:35
Just recognised that and removed it. Thanks for the spot ;) – Richard Ansell Feb 10 '17 at 01:36
No problems - just added – Richard Ansell Feb 10 '17 at 01:38

score 0 · Answer 2 · answered Jun 12 '17 at 07:31

//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)
        }
    );
};

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

2 Answers2