current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 7 down vote favorite
1

I try like this:

$http({ method: 'POST', url: '/token', data: { username: $scope.username, password: $scope.password, grant_type: 'password' } }).success(function (data, status, headers, config) {
    $scope.output = data;
}).error(function (data, status, headers, config) {
    $scope.output = data;
});

then tried changing the grant_type to a param:

$http({ method: 'POST', url: '/token', data: { username: $scope.username, password: $scope.password }, params: { grant_type: 'password' } }).success(function (data, status, headers, config) {
    $scope.output = data;
}).error(function (data, status, headers, config) {
    $scope.output = data;
});

Still get the dreaded: {"error":"unsupported_grant_type"}

So I do what no AngularJS developer should ever do, resorted to jQuery:

var data = $('#regForm').serialize() + "&grant_type=password";
$.post('/token', data).always(showResponse);

function showResponse(object) {
    $scope.output = JSON.stringify(object, null, 4);
    $scope.$apply();
};

Which works like a champ... so my question is: how do we replicate the jQuery $.post() call above using AngularJS $http() so we can grab an access token from the OWIN middleware based /token endpoint in ASP.Net Web API 2?

share|improve this question
    
your problem is solved in this answer –  Dmitry Jan 20 at 3:21

4 Answers 4

up vote 4 down vote

Do this:

$http({
        url: '/token',
        method: 'POST',
        data: "userName=" + $scope.username + "&password=" + $scope.password + 
              "&grant_type=password"
})
share|improve this answer
up vote 8 down vote

I think, adding the header {headers: { 'Content-Type': 'application/x-www-form-urlencoded' } to your post request would do the trick. It should be something like this:

$http.post(loginAPIUrl, data,
    {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
share|improve this answer
up vote 1 down vote

You are getting that error because the default implementation of the OWIN OAuth provider is expecting the post to the "/Token" service to be form encoded and not json encoded. There is a more detailed answer here How do you set katana-project to allow token requests in json format?

But you can still use AngularJs you just have to change the way the $http post is made. You can try the answer here if you don't mind using jquery to change your params How can I make angular.js post data as form data instead of a request payload? Hope that helps.

share|improve this answer
up vote 1 down vote

You can always watch for the requests being made using the developer console in your browser and see the difference in the request.

But by looking at your jquery code &grant_type=password is being passed in the body not the querystring so the $http call should be

$http({ method: 'POST', url: '/token', data: { username: $scope.username, password: $scope.password ,grant_type:password} }).success(function (data, status, headers, config) {

share|improve this answer
    
That's what my first block of code looks like... I do that, but get back {"error":"unsupported_grant_type"}. I tried changing data to params, which put the variables into the querystring, but it still returns that error. –  Chaddeus Dec 4 '13 at 15:25
    
My bad i did not scroll to the end. Look at the request made using the browser dev tools and you would know the different, and maybe that details can be used here to fix it. –  Chandermani Dec 4 '13 at 15:30
    
Yea, I was digging around in FireBug... there were a couple header differences, but I set the headers on $http to match, still same error. I think I'm stumped. ;( –  Chaddeus Dec 4 '13 at 15:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.