wake-up-neo.net

Wie erhalte ich ein Access Token von ASP.Net Web API 2 über AngularJS $ http?

Ich versuche es so:

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

versuchte dann, den grant_type in einen Parameter zu ändern:

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

Holen Sie sich immer noch das gefürchtete: {"error":"unsupported_grant_type"}

Also mache ich das, was kein AngularJS-Entwickler jemals tun sollte, auf jQuery zurückgegriffen:

var data = $('#regForm').serialize() + "&grant_type=password";
$.post('/token', data).always(showResponse);

function showResponse(object) {
    $scope.output = JSON.stringify(object, null, 4);
    $scope.$apply();
};

Was funktioniert wie ein Champion ... also meine Frage ist: Wie replizieren wir den jQuery $.post()-Aufruf oben mit AngularJS $http(), damit wir ein Zugriffstoken vom OWIN-Middleware-basierten Token-Endpunkt in ASP.Net Web API 2 erhalten können?

20
Chaddeus

Mach das:

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

Ich denke, das Hinzufügen des Headers {headers: { 'Content-Type': 'application/x-www-form-urlencoded' } zu Ihrer Post-Anfrage wäre der Trick. Es sollte ungefähr so ​​sein:

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

Sie erhalten diesen Fehler, weil die Standardimplementierung des OWIN-OAuth-Providers erwartet, dass der Beitrag zum Dienst "/ Token" formcodiert und nicht json-codiert ist. Hier gibt es eine ausführlichere Antwort Wie kann man katana-project so einstellen, dass Token-Anforderungen im Json-Format zugelassen werden?

Sie können jedoch weiterhin AngularJs verwenden. Sie müssen lediglich die Art und Weise ändern, in der der $ http-Beitrag erstellt wird. Sie können die Antwort hier versuchen, wenn es Ihnen nichts ausmacht, Ihre Params mit Jquery zu ändern Wie kann ich Daten als Formulardaten anstelle einer Anforderungsnutzlast buchen? Hoffentlich hilft das.

6
Kent Cooper

Sie können jederzeit über die Entwicklerkonsole in Ihrem Browser nach Anfragen suchen und den Unterschied in der Anfrage feststellen.

Aber wenn Sie sich Ihren JQuery-Code ansehen, wird &grant_type=password im Body übergeben, nicht der Querystring, so dass der $http -Aufruf erfolgen sollte

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

2
Chandermani

Ähnlich wie Achinth, aber Sie können immer noch die $http.post-Methode verwenden (+ Daten werden mit Escapezeichen versehen)

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

1) Beachten Sie die URL: "localhost: 55828/token" (nicht "localhost: 55828/API/token")

2) Notieren Sie die Anforderungsdaten. Es ist nicht im Json-Format, es sind nur einfache Daten ohne Anführungszeichen. "". [email protected]

3) Beachten Sie den Inhaltstyp. Inhaltstyp: 'application/x-www-form-urlencoded' (nicht Inhaltstyp: 'application/json')

4) Wenn Sie Javascript verwenden, um eine Post-Anfrage zu stellen, können Sie Folgendes verwenden:

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

Siehe untenstehende Screenshots von Postman:

Postbote-Anfrage

Postman Request Header

0
Chirag