在Authorization标头中发送ClientID和Secret(angularjs)

时间:2015-07-24 16:09:07

标签: angularjs oauth-2.0 spring-boot restful-authentication

我正在构建一个简单的客户端应用程序,它正在与rest api交谈并获取有关用户的信息。我正在实施OAuth资源所有者密码凭据流

我一直在努力解决如何在角度应用中发送我的客户端ID和Secret in Authorization标头。

我已经构建了一个authService和一个拦截器服务来处理我的登录。

我的app.js

'use strict';

var app = angular.module('AngularAuthApp', ['ngRoute', 'LocalStorageModule', 'angular-loading-bar']);

app.config(function ($routeProvider) {

    $routeProvider.when("/home", {
        controller: "homeController",
        templateUrl: "/views/home.html"
    });

    $routeProvider.when("/login", {
        controller: "loginController",
        templateUrl: "/views/login.html"
    });


    $routeProvider.otherwise({ redirectTo: "/home" });
});

app.run(['authService', function (authService) {
    authService.fillAuthData();
}]);


app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
});

这是我的authService.js

app.factory('authService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService) {

    var serviceBase = 'http://url/oauth/';
    var authServiceFactory = {};

    var _authentication = {
        isAuth: false,
        userName : ""
    };

    var _login = function (loginData) {

        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password ;
        var deferred = $q.defer();

        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {

            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });

            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;

            deferred.resolve(response);

        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });

        return deferred.promise;

    };

  authServiceFactory.login = _login;
  return authServiceFactory;

}]);

authInterceptorService.js

app.factory('authInterceptorService', ['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {

    var authInterceptorServiceFactory = {};

    var _request = function (config) {

        config.headers = config.headers || {};

        var authData = localStorageService.get('authorizationData');
        if (authData) {
            config.headers.Authorization = 'Bearer ' + authData.token;
        }

        return config;
    }

    var _responseError = function (rejection) {
        if (rejection.status === 401) {
            $location.path('/login');
        }
        return $q.reject(rejection);
    }

    authInterceptorServiceFactory.request = _request;
    authInterceptorServiceFactory.responseError = _responseError;

    return authInterceptorServiceFactory;
}]);

我的卷曲请求会抛出一个访问令牌

curl -X POST -vu sampleapp:samplekey http://sampleurl/oauth/token -H "Accept: application/json" -d "password=pwd&username=uname&grant_type=password&scope=read%20write&client_secret=samplekey&client_id=sampleapp"

所以,我猜我需要发送clientID和clientSecret但不确定如何实现它或在哪里添加它。我查看了文档说我们可能需要添加到授权标题但我不认为我做得对。另外,我需要对其进行编码吗?这不是JWT令牌,而是简单令牌。我是否还需要发送scope

截至目前,我收到Full authentication is required to access this resource的401错误。

0 个答案:

没有答案