Oauth2-server: invalid_request error in grant_type=password with angularjs http request.

[arjundas]

I am Creating RESTful API with AngularJS and Laravel, I implement OAuth2-server in laravel and testing it.

i set grant_type in config file of package :

    'grant_types' => [
        'password' => [
            'class' => '\League\OAuth2\Server\Grant\PasswordGrant',
            'callback' => function($username, $password) {
                return Auth::validate([
                    'email'    => $username,
                    'password' => $password,
                ]);
            },
            'access_token_ttl' => 604800
        ]
    ],

then in route.php file :

Route::post('oauth/access_token', function() {
    return Response::json(Authorizer::issueAccessToken());
});

And in Angular JS :

    $http({
        url: 'http://url/to/oauth/access_token?grant_type=password&username=johndoe&password=A3ddj3w',
        method: "post",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    }).then(function(response) {
        console.log(response);
    }, function(response) {
        console.log(response);
    });

when i run above angular code it give error : invalid_request :+1:

{
    "error":"invalid_request",
    "error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Check the \"grant_type\" parameter."
}

Please tell me where i made a mistake.

[nfeiglin]

In your Angular request, try sending the GET params that you
currently have in the url as key/values in data object rather.
https://docs.angularjs.org/api/ng/service/$http#post

On Wed, Nov 26, 2014 at 12:02 AM, arjundas [email protected] wrote:

I am Creating RESTful API with AngularJS and Laravel, I implement
OAuth2-server in laravel and testing it.

i set grant_type in config file of package :

'grant_types' => [
    'password' => [
        'class' => '\League\OAuth2\Server\Grant\PasswordGrant',
        'callback' => function($username, $password) {
            return Auth::validate([
                'email'    => $username,
                'password' => $password,
            ]);
        },
        'access_token_ttl' => 604800
    ]
],

then in route.php file :

Route::post('oauth/access_token', function() {
return Response::json(Authorizer::issueAccessToken());
});

And in Angular JS :

$http({
    url: 'http://url/to/oauth/access_token?grant_type=password&username=johndoe&password=A3ddj3w',
    method: "post",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
}).then(function(response) {
    console.log(response);
}, function(response) {
    console.log(response);
});

when i run above angular code it give error : invalid_request [image:
:+1:]

{
"error":"invalid_request",
"error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Check the \"grant_type\" parameter."
}

Please tell me where i made a mistake.

—
Reply to this email directly or view it on GitHub
https://github.com/thephpleague/oauth2-server/issues/261.

[arjundas]

I tried that, but not work..

$http.post(
    'http://url/to/oauth/access_token',
    {grant_type : "password", username : 'johndoe', password : 'A3ddj3w'}
);

[alexbilbie]

@lucadegasperi any ideas?

[lucadegasperi]

This has to do with the way angular passes parameters back to the server. They need to be form encoded into the POST payload in order to work.

The request you make should look something like this in the end otherwise it won't work.

POST /oauth/access_token HTTP/1.1
Host: www.example.com
Accept: */*
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded

client_id=1&client_secret=1111&grant_type=client_credentials

[arjundas]

My request headers are like :

Host: localhost
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate

[arjundas]

Found the solution by small changes in angular js code :

$http({
        url: 'http://url/to/oauth/access_token',
        method: "post",
        data: $.param({client_id:"1",client_secret:"12345",grant_type : 'password', username : 'johndoe', password : 'A3ddj3w'}),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    }).then(function(response) {
        console.log(response);
    }, function(response) {
        console.log(response);
    });

Just added $.params in data

[ajaysodhi]

var promise = $http({
url: 'url/to/oauth/access_token',
method: "post",
async: true,
crossDomain: true,
data: $.param({username : 'UNAME', password : 'PWD', "grant_type": "client_credentials", "scope": "all"}),
headers: {"authorization": "Basic Base64Encodedlogin:pwd_String", 'Content-Type': 'application/x-www-form-urlencoded'},
}).then(function(response) {
console.log(response);
alert("response.data.access_token: " + response.data.access_token);
return response.data.access_token;
}, function(response) {
console.log(response);
return promise;
});

This is how I used it.

[ajaysodhi]

Thanks @arjundas. This really helped me. :100: