web-dev-qa-db-fra.com

Comment obtenir un jeton d’accès à partir de l’API Web ASP.Net 2 via AngularJS $ http?

J'essaye comme ça:

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

puis essayé de changer le grant_type à un 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;
});

Toujours obtenir le redouté: {"error":"unsupported_grant_type"}

Je fais donc ce qu'aucun développeur d'AngularJS ne devrait jamais faire, j'ai eu recours à 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();
};

Ce qui fonctionne comme un champion ... Ma question est donc la suivante: comment répliquer l'appel jQuery $.post() ci-dessus à l'aide de AngularJS $http() afin de pouvoir récupérer un jeton d'accès à partir du point de terminaison de jeton basé sur un middleware OWIN dans ASP.Net Web API 2?

javascriptjqueryangularjsasp.net-web-apiasp.net-web-api2
20
Chaddeus

Faire ceci:

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

Je pense que l'ajout de l'en-tête {headers: { 'Content-Type': 'application/x-www-form-urlencoded' } à votre demande de publication ferait l'affaire. Cela devrait être quelque chose comme ça:

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

Vous obtenez cette erreur car l'implémentation par défaut du fournisseur OWIN OWIN s'attend à ce que la publication sur le service "/ Token" soit codée sous forme codée et non codée json. Il existe une réponse plus détaillée ici Comment définissez-vous katana-project pour autoriser les demandes de jetons au format JSON?

Mais vous pouvez toujours utiliser AngularJs il vous suffit de changer la façon dont la publication $ http est faite. Vous pouvez essayer la réponse ici si cela ne vous dérange pas d’utiliser jquery pour modifier vos paramètres Comment puis-je publier des données en tant que données de formulaire au lieu d’une charge utile de demande? J'espère que cela pourra aider.

6
Kent Cooper

Vous pouvez toujours surveiller les demandes effectuées à l'aide de la console du développeur de votre navigateur et voir la différence entre les demandes.

Mais en regardant votre code jQuery, &grant_type=password est transmis dans le corps et non à la chaîne de requête. L'appel $http devrait donc être

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

2
Chandermani

Similaire à achinth, mais vous pouvez toujours utiliser la méthode $http.post (+ les données sont échappées)

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

1) Notez l'URL: "localhost: 55828/token" (pas "localhost: 55828/API/token")

2) Notez les données de la demande. Ce n'est pas au format JSON, c'est juste des données sans plis doubles . "[email protected]&password=Test123$&grant_type=password"

3) Notez le type de contenu. Content-Type: 'application/x-www-formulaire-urlencoded' (pas Content-Type: 'application/json')

4) Lorsque vous utilisez javascript pour faire une demande de publication, vous pouvez utiliser ce qui suit:

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

Voir les captures d'écran ci-dessous de Postman:

Postman Request

En-tête de demande de facteur

0
Chirag