https://github.com/keycloak/keycloak/tree/master/examples/demo-template/angular-product-appから改善されたログイン例を作成しようとしていました 。
とにかく、より良い角度のアプローチだと感じたので、プロバイダーと構成にすべての初期構成を追加しました。次に、変数を初期化する関数である keycloak.init() を呼び出そうとしました。渡すパラメーターに応じて、既にログに記録されているかどうかを確認できます。問題は、トークンがログに記録されるときに時間がかかることです。これは正常だと思います。
$rootScope.watch(loggedIn) を追加したので、init() が成功すると、$rootScope.loggedIn が true に設定され、変更された場合に設定されます。
$rootScope.$watch 内に $scope.$apply を追加しました。$scope.$apply が原因で $digest の問題が発生しますが、機能します。私はこれが本当にバグであることを知っています。
だから私は解決策を探しています。私は角度が初めてです。私はそれを回避する次の方法についてのみ考えることができます
1) $rootScope なしで動作するもの。$rootScope なしで動作する場合は、はるかに優れたコードになると思いますが、方法はわかりません。たぶん、promise、$q などを使用します。2) $timeout を使用して、私はまだこれを読んでいます。
よりangularjsのエレガントなソリューションを探しています。
var app = angular.module('myApp', []);
app.controller('PageController', function($rootScope,$scope, $http ,keycloakLauncher) {
$scope.loggedIn = keycloakLauncher.loggedIn;
$scope.user = function(){
console.log("keycloak ", keycloakLauncher.keycloak);
console.log("loggedin ", keycloakLauncher.loggedIn);
if($scope.loggedIn){
/*if(keycloakLauncher.keycloak.idTokenParsed == undefined){
return "Anonymous"
}*/
return keycloakLauncher.keycloak.idTokenParsed.email
}
return "Anonymous";
};
$scope.products = [];
$scope.reloadData = function() {
$http.get("https://localhost:8443/unika/usuarios").success(function(data) {
$scope.products = angular.fromJson(data);
});
};
$scope.logout = function(){
console.log('*** LOGOUT');
keycloakLauncher.loggedIn = false;
keycloakLauncher.keycloak = null;
window.location = keycloakLauncher.logoutUrl;
};
$scope.login = function () {
console.log('*** LOGIN');
keycloakLauncher.keycloak.login();
};
$rootScope.$watch('loggedIn', function(){
$scope.loggedIn = keycloakLauncher.loggedIn;
$scope.user();
$scope.$apply();
});
});
app.provider('keycloakLauncher', function keycloakLauncherProvider() {
this.keycloak = {};
this.loggedIn = false;
this.logoutUrl = "/";
this.$get = function () {
var keycloak = this.keycloak;
var loggedIn = this.loggedIn;
//var logoutUrl
return {
keycloak: keycloak,
loggedIn: loggedIn,
logoutUrl: this.logoutUrl
};
};
});
app.factory('authInterceptor', function($q, keycloakLauncher) {
return {
request: function (config) {
var deferred = $q.defer();
var keycloak = keycloakLauncher.keycloak;
console.log("authint", keycloakLauncher.loggedIn);
if (keycloak.token) {
keycloak.updateToken(5).success(function() {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + keycloak.token;
deferred.resolve(config);
}).error(function() {
deferred.reject('Failed to refresh token');
});
}
return deferred.promise;
}
};
});
app.factory('errorInterceptor', function($q) {
return function(promise) {
return promise.then(function(response) {
return response;
}, 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) {
if (response.data && response.data.errorMessage) {
alert(response.data.errorMessage);
} else {
alert("An unexpected server error has occurred");
}
}
return $q.reject(response);
});
};
});
app.config(function($httpProvider, keycloakLauncherProvider) {
keycloakLauncherProvider.keycloak = new Keycloak('WEB-INF/keycloak.json');
keycloakLauncherProvider.logoutUrl = "https://localhost:8443/auth/realms/unika/tokens/logout?redirect_uri=http://unika.localdomain/index2.html";
$httpProvider.interceptors.push('errorInterceptor');
$httpProvider.interceptors.push('authInterceptor');
});
app.run(['keycloakLauncher','$rootScope',function(keycloakLauncher,$rootScope) {
console.log("runner")
$rootScope.loggedIn = false;
keycloakLauncher.keycloak.init({ onLoad: 'check-sso' }).success(function () {
console.log("entro");
keycloakLauncher.loggedIn = keycloakLauncher.keycloak.authenticated;
console.log("login", keycloakLauncher.loggedIn);
$rootScope.loggedIn = true;
}).error(function () {
window.location.reload();
});
}]);