Comment obtenir le Token D'accès ASP.Net API Web 2 via AngularJS $ http?
j'essaie comme ceci:
$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;
});
a ensuite essayé de changer le type grant_type en 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;
});
encore obtenir le redouté: {"error":"unsupported_grant_type"}
ainsi je fais ce qu'aucun développeur AngularJS ne devrait jamais faire, a recouru à 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();
};
Qui fonctionne comme un champion... alors ma question Est: Comment Pouvons-nous répliquer le jquery $.post() appel ci-dessus en utilisant AngularJS $http() afin que nous puissions obtenir un accès jeton à partir du point D'arrivée de L'middleware D'OWIN ASP.Net Web API 2?
6 réponses
Faites 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 requête post ferait l'affaire. Cela devrait être quelque chose comme ceci:
$http.post(loginAPIUrl, data,
{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
vous obtenez cette erreur parce que l'implémentation par défaut du fournisseur OWIN OAuth s'attend à ce que le post vers le service" /Token " soit encodé de forme et non de JSON. Il y a une réponse plus détaillée ici comment paramétrez-vous katana-project pour permettre les requêtes de token au format json?
Mais vous pouvez toujours utiliser AngularJs vous avez juste à changer la façon dont le $http post est fait. Vous pouvez essayer la réponse ici si vous ne vous gênez pas d'utiliser jquery pour changer vos params Comment puis-je afficher des données en tant que données de formulaire au lieu d'une charge utile de demande? Espère que ça aide.
vous pouvez toujours surveiller les requêtes faites en utilisant la console du développeur dans votre navigateur et voir la différence dans la requête.
mais en regardant votre code jquery &grant_type=password est passé dans le corps pas le querystring ainsi le $http appel devrait ê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 (+données é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) noter les données de la demande. Ce n'est pas dans le format json, ce sont juste des données simples sans guillemets. "userName=xxx@gmail.com&password=Test123$&grant_type=" mot de passe
3) noter le type de contenu. Content-Type: 'application / x-www-form-urlencoded' (not Content-Type: 'application/json')
4) lorsque vous utilisez javascript pour faire une demande post, vous pouvez utiliser la mention suivante:
$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:
