Как получить токен доступа из ASP.Net Web API 2 через AngularJS $http?

Я пробую вот так:

$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;
});

затем попытался изменить параметр grant_type на параметр:

$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;
});

По-прежнему страшно: {"error":"unsupported_grant_type"}

Итак, я делаю то, что разработчик AngularJS не должен делать, прибегает к 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();
};

Что работает как чемпион... так что мой вопрос: как мы реплицируем вызов jQuery $.post() выше, используя AngularJS $http(), чтобы мы могли захватить токен доступа из конечной точки промежуточного программного обеспечения OWIN/endken в ASP.NET Web API 2?

Ответы

Ответ 1

Сделайте это:

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

Ответ 2

Я думаю, добавив заголовок {headers: { 'Content-Type': 'application/x-www-form-urlencoded' } в ваш запрос на отправку, это сделало бы трюк. Это должно быть примерно так:

$http.post(loginAPIUrl, data,
    {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})

Ответ 3

Вы получаете эту ошибку, потому что по умолчанию поставщик OWIN OAuth по умолчанию ожидает, что сообщение в службе "/Token" будет закодировано в форме, а не кодировано json. Здесь более подробный ответ Как установить katana-проект, чтобы разрешить запросы токена в json-формате?

Но вы все равно можете использовать AngularJs, вам просто нужно изменить способ создания сообщения $http. Вы можете попробовать ответить здесь, если не возражаете использовать jquery для изменения ваших параметров Как отправить данные в виде данных формы вместо полезной нагрузки запроса? Надеюсь, что это поможет.

Ответ 4

Вы всегда можете следить за запросами, создаваемыми с помощью консоли разработчика в вашем браузере, и видеть разницу в запросе.

Но, посмотрев на ваш код jquery &grant_type=password, передается в теле не очередь, поэтому вызов $http должен быть

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

Ответ 5

Подобно achinth, но вы все равно можете использовать метод $http.post (+ данные экранированы)

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

Ответ 6

1) Обратите внимание на URL-адрес: "localhost: 55828/token" (не "localhost: 55828/API/токен" )

2) Обратите внимание на данные запроса. Его не в формате json, его просто данные без двойных кавычек. "[email protected]&amp, пароль = test123 $& grant_type = пароль"

3) Обратите внимание на тип содержимого. Content-Type: 'application/x-www-form-urlencoded' (не Content-Type: 'application/json')

4) Когда вы используете javascript для создания почтового запроса, вы можете использовать следующее:

$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) {//...

Посмотрите скриншоты из Postman:

Запрос почтальона

Заголовок отправителя сообщения