在Angular中使用http $进行基本身份验证 - 传递用户名/密码和grant_type

时间:2017-02-09 21:11:40

标签: angularjs authentication asp.net-web-api2

我正在尝试使用Angular对我知道使用Postman工作的授权端点进行身份验证。

<script type="text/javascript">
    var tokenGeneratorApp = angular.module('myApp', []);

    myApp.controller('AuthenticationController', function ($scope, $http) {
        var ac = this;
        ac.authorizationToken = null;

        ac.getAuthorizationToken = function () {
            $http({
                method : 'POST',
                url: 'https://api.myserver.net/oauth/token',
                data: {
                    grant_type: 'password',
                    username: 'theUserName', 
                    password: 'thePassword'
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(_authenticationSuccess, _authenticationError);
        };

        // Private methods to handle promise results

        function _authenticationSuccess(response) {
            ac.authorizationToken = response.data;
            ac.resultsDisplay = ac.authorizationToken;
        };

        function _authenticationError(response) {
            ac.resultsDisplay = 'An error occured: ' + response.data;
        };
    });
</script>

当我致电getAuthorizationToken()时,我得到了一个Http 400。当我查看response.data对象时,出现错误error:"unsupported_grant_type"。这让我感到困惑,因为在Postman客户端中我指定grant_typepassword并且所有工作都按预期工作。

我必须在Angular代码中做错事。

2 个答案:

答案 0 :(得分:1)

最近有一个非常相似的问题。尝试删除&#39; 标题&#39;并插入&#39; dataType &#39;相反,如下:

        $http({
            method : 'POST',
            url: 'https://api.myserver.net/oauth/token',
            dataType: "json",
            data: {
                grant_type: 'password',
                username: 'theUserName', 
                password: 'thePassword'
            }

修改

        $http({
            method : 'POST',
            url: 'https://api.myserver.net/oauth/token',
            data: {
                "username=" + theUserName + "&password=" +   
                thePassword + "&grant_type=thePassword"
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

答案 1 :(得分:0)

// resolving =&gt;错误: “unsupported_grant_type”

vm.BtnLogin = function(){

    $scope.txtUsernamee;
    $scope.txtPasswordd;

    var client_credentials =  $scope.txtUsernamee +   $scope.txtPasswordd;
    var auth = 'username=' + $scope.txtUsernamee + '&' + 'password=' + $scope.txtPasswordd + '&grant_type=password';

    $http({
        method: "POST",
        url: '/token',
        contentType: 'application/json',
        data: auth

    }).then(function success(response) {
        //$('#successModal').modal('show');
        console.log("ok")
        },
        function error(e) {

            console.log(e)
        }
    );
};