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

  • 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.

    Thursday, August 13, 2015 6:02 AM

Answers

  • User1779161005 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 13, 2015 9:27 AM

All replies

  • User1779161005 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 13, 2015 9:27 AM
  • 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)
        };
    
    })

    Friday, August 14, 2015 3:15 AM