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?
Faire ceci:
$http({
url: '/token',
method: 'POST',
data: "userName=" + $scope.username + "&password=" + $scope.password +
"&grant_type=password"
})
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' }})
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.
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) {
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) 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: