我非常想让我的Web应用程序与keycloak一起使用。 我已经保护了HTTP REST服务的安全性,现在我希望用户在调用应用程序且尚未登录后将其重定向到keycloak,然后让他返回应用程序并可以使用API服务。
要实现此目的,我使用了以下示例: https://github.com/keycloak/keycloak/blob/master/examples/demo-template/angular-product-app/src/main/webapp/index.html 由于我使用的是angularJS版本1.7.x,因此我根据此邮件更改了代码: http://lists.jboss.org/pipermail/keycloak-user/2015-October/003213.html
仍然,我不断收到错误消息:
jquery.min.js:2 Uncaught Error: [$injector:unpr] Unknown provider:
AuthProvider <- Auth <- authInterceptor <- $http <- $templateRequest <- $route
https://errors.angularjs.org/1.7.2/$injector/unpr?p0=AuthProvider%20%3C-
%20Auth%20%3C-%20authInterceptor%20%3C-%20%24http%20%3C-
%20%24templateRequest%20%3C-%20%24route
at angular.js:138
at angular.js:4891
at Object.getService [as get] (angular.js:5051)
at angular.js:4896
at getService (angular.js:5051)
at injectionArgs (angular.js:5076)
at Object.invoke (angular.js:5100)
at Object.enforcedReturnValue [as $get] (angular.js:4943)
at Object.invoke (angular.js:5108)
at angular.js:4897
这是我的代码: index.html中的脚本:
<script src="static/javascript/angular.js"></script>
<script src="static/javascript/angular-resource.js"></script>
<script src="static/javascript/angular-route.js"></script>
<script src="static/javascript/dirPagination.js"></script>
<script src="static/javascript/keycloak.js"></script>
<script src="static/javascript/admin.js"></script>
还有我的admin.js Angular文件:
"use strict";
var module = angular.module('service', ['ngRoute', 'ngResource',
'angularUtils.directives.dirPagination']);
var auth = {};
var logout = function(){
console.log('*** LOGOUT');
auth.loggedIn = false;
auth.authz = null;
window.location = auth.logoutUrl;
};
angular.element(document).ready(["$http", function ($http) {
var keycloakAuth = new Keycloak({
url: 'https://keycloakserver/auth',
realm: 'realm',
clientId: 'app-admin'
});
auth.loggedIn = false;
keycloakAuth.init({ onLoad: 'login-required' }).success(function () {
auth.loggedIn = true;
auth.authz = keycloakAuth;
auth.logoutUrl = keycloakAuth.authServerUrl +
"/realms/realm/tokens/logout?redirect_uri=https://myapp/admin";
module.factory('Auth', function() {
return auth;
});
angular.bootstrap(document, ["service"]);
}).error(function () {
window.location.reload();
});
}]);
module.controller('transactions', function($scope, $http, $filter) {
$scope.transactions = [];
$scope.submit = function() {
var myParams = {
searchId: $scope.search_id
}
$http.get('https://myapp/rest/search',{params:myParams}).
then(function(response) {
$scope.transactions = response.data;
});
};
$scope.sort = function(keyname){
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
};
$scope.showDetails = function(transaction) {
$scope.selectedTransaction = transaction;
};
});
module.factory('authInterceptor', ["$q", "Auth", function($q, Auth) {
return {
'request': function (config) {
var deferred = $q.defer();
if (Auth.authz.token) {
Auth.authz.updateToken(5).success(function() {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' +
Auth.authz.token;
deferred.resolve(config);
}).error(function() {
deferred.reject('Failed to refresh token');
});
}
return deferred.promise;
},
'requestError': function(rejection) {
return $q.reject(rejection);
},
'response': function(response) {
return response;
},
'responseError': function(response) {
if (response.status == 401) {
console.log('session timeout?');
logout();
} else if (response.status == 403) {
alert("Forbidden");
} else if (response.status == 404) {
alert("Not found");
} else if (response.status) {
console.log(response.status);
if (response.data && response.data.errorMessage) {
alert(response.data.errorMessage);
} else {
alert("An unexpected server error has occurred");
}
} else if (response === 'Failed to refresh token') {
logout();
}
return $q.reject(response);
}
};
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
}]);
我将非常感谢每一个提示!谢谢! :-)