How to get Access Token from ASP.Net Web API 2 via AngularJS $http?

Question

I try like this:

$http({ method: \'POST\', url: \'/token\', data: { username: $scope.username, password: $scope.password, grant_type: \'password\' } }).success(f         


        

Answer 1

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) {

Answer 2

Similar to achinth, but you can still use the $http.post method (+ data is escaped)

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {
//...

Answer 3

Do this:

$http({
        url: '/token',
        method: 'POST',
        data: "userName=" + $scope.username + "&password=" + $scope.password + 
              "&grant_type=password"
})

Answer 4

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

Answer 5

1) Note the URL: "localhost:55828/token" (not "localhost:55828/API/token")

2) Note the request data. Its not in json format, its just plain data without double quotes. "userName=xxx@gmail.com&password=Test123$&grant_type=password"

3) Note the content type. Content-Type: 'application/x-www-form-urlencoded' (not Content-Type: 'application/json')

4) When you use javascript to make post request, you may use following:

$http.post("localhost:55828/token", 
    "userName=" + encodeURIComponent(email) +
        "&password=" + encodeURIComponent(password) +
        "&grant_type=password",
    {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
).success(function (data) {//...

See screenshots below from Postman:

Postman Request

Postman Request Header

Answer 6

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 post data as form data instead of a request payload? Hope that helps.