ASP.NET WEB API 2 OAuth Authentication unsuported grant_Type when accessed from angular js client

Question

User535565767 posted

Hello All,

I am developing a sample web api with OAuth authentication having bearer token support. When I am trying to authenticate the user, I am getting error in error callback as shown just below. 

response.status = 400
response.statusText = Bad Request
response.data.error = unsupported_grant_type

My client request is like below.

myApp.controller("loginController", function ($scope, $http) {

    $scope.submit = function () {
        var loginData = {
            grant_type: 'password',
            username: $scope.username,
            password: $scope.password
        };

        var req = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
            },
            url: rootPath + 'Token',
            data: JSON.stringify(loginData)
        }

        $http(req).then(function (response) {
            // Will be called in case of success
            console.writeline(response.data.username);
            sessionStorage.setItem(tokenKey, data.access_token);
        },
        function (response) {
            alert(response.status + "," + response.statusText);
        })
    };

In server side, the method ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context) is called, but it is not hitting GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context). Actually my application is very basic and I have uploaded with source code in one drive. Please find the same here https://onedrive.live.com/?id=EAA26C1BAE3050B8!4643&cid=EAA26C1BAE3050B8&group=0&parId=EAA26C1BAE3050B8!128&authkey=!Ahs-XlT9OvUsPRs&action=locate. I am kind of clueless and followed everything as mentioned in the article http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api. The only difference is I am using Angular instead of knockout and jquery.

Answer 1

User1779161005 posted

The token endpoint require form-urlencoded data, but you're sending JSON (look at the data value where you call stringify).

Answer 2

User535565767 posted

Thanks a lot. I changed my code to below. I was not aware of this particular behavior of Angular JS. I changed my code to below

myApp.controller("loginController", function ($scope, $http, $httpParamSerializerJQLike) {

    $scope.submit = function () {
        var loginData = {
            grant_type: 'password',
            username: $scope.username,
            password: $scope.password
        };

        var req = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
            },
            url: rootPath + 'Token',
            data: $httpParamSerializerJQLike(loginData)
        }

        $http(req).then(function (response) {
           
            sessionStorage.setItem(tokenKey, response.data.access_token);
        },
        function (response) {
            alert(response.status + "," + response.statusText);
        })
    };

    $scope.logout = function () {
        sessionStorage.removeItem(tokenKey)
    };

})