web-dev-qa-db-ja.com

AngularJS $ httpを介してASP.Net Web API 2からアクセストークンを取得する方法

私はこのようにしてみます：

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

それでも恐怖を感じます：_{"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();
};
_

チャンプのように機能します...だから私の質問は、AngularJS $.post()を使用して上記のjQuery $http()呼び出しを複製して、OWINミドルウェアベースのアクセストークンを取得できるようにする方法です/ ASP.Net Web API 2のトークンエンドポイント

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

これを行う：

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

ヘッダーを追加すると思います{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }あなたの投稿リクエストにトリックをします。次のようになります。

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

OWIN OAuthプロバイダーのデフォルトの実装では、「/ Token」サービスへの投稿がJSONエンコードではなく、フォームエンコードされることを期待しているため、このエラーが発生します。詳細な回答はこちらです。 json形式のトークンリクエストを許可するようにkatana-projectをどのように設定しますか？

ただし、AngularJを引き続き使用できます。$ http投稿の作成方法を変更する必要があります。 jqueryを使用してパラメーターを変更してもかまわない場合は、ここで答えを試すことができます リクエストペイロードの代わりにフォームデータとしてデータを投稿するにはどうすればよいですか お役に立てば幸いです。

6
Kent Cooper

いつでもブラウザーの開発者コンソールを使用して行われているリクエストを監視し、リクエストの違いを確認できます。

しかし、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) {

2
Chandermani

Achinthに似ていますが、$http.postメソッド（+データはエスケープされます）

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

1）URLを書き留めます： "localhost：55828/token"（ "localhost：55828/API/token"ではありません）

2）要求データを書き留めます。 json形式ではなく、二重引用符のない単純なデータです。 「[email protected]&password=Test123$&grant_type=password」

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のスクリーンショットを参照してください。

郵便配達員のリクエスト

郵便配達員リクエストヘッダー

0
Chirag