[keycloak-user] How to configure KeycloakAuthorization on Angular2 Application

[Stan Silvert]

I'm not sure I understand exactly what you are trying to do, and I don't 
think I have time to figure it out right now.  The angular2-product-app 
does show error handling.  Maybe you can explain a little more?  Also, 
your code shows up unformatted and I don't see anything in red.  Perhaps 
you can put it on GitHub where it will be easier to view and discuss.

In a couple of weeks I'm probably going to start building an 
angular2/TypeScript adapter for Keycloak.  This will likely just be a 
wrapper around the current javascript client, but it will make 
everything easier to consume with TypeScript.  I want to keep your 
requirements in mind for this.  Please keep me updated on your progress 
and I'll try to help as much as I can in the meantime.

Stan

On 11/11/2016 8:12 AM, Carlos Feria wrote:
> Hi all, good morning. I am coding an Angular2 application and I need to
> implement Authorization like this example on Keycloak
> https://github.com/keycloak/keycloak/tree/master/examples/authz/photoz,
> there are another example that indicates how to use Keycloak on Angular2
> applications (
> https://github.com/keycloak/keycloak/tree/master/examples/demo-template/angular2-product-app
> )
>
> My real problem is how to write responseError on Angular2? Have you ever
> had this kind of problem?
>
> This is the code(red code) that i want to pass to Angular2....please help
> me.
>
> module.factory('authInterceptor', function ($q, $injector, $timeout,
> Identity) { return {
> request: function (request) {
> document.getElementById("output").innerHTML = '';
> if (Identity.authorization && Identity.authorization.rpt && request.url.
> indexOf('/authorize') == -1) {
> retries = 0;
> request.headers.Authorization = 'Bearer ' + Identity.authorization.rpt;
> } else {
> request.headers.Authorization = 'Bearer ' + Identity.authc.token;
> }
> return request;
> },
> responseError: function (rejection) {
> var status = rejection.status;
> if (status == 403 || status == 401) {
> var retry = (!rejection.config.retry || rejection.config.retry < 1);
> if (!retry) {
> document.getElementById("output").innerHTML = 'You can not access or
> perform the requested operation on this resource.';
> return $q.reject(rejection);
> }
> if (rejection.config.url.indexOf('/authorize') == -1 && retry) {
> var deferred = $q.defer();
> // here is the authorization logic, which tries to obtain an authorization
> token from the server in case the resource server
> // returns a 403 or 401.
> *Identity.authorization.authorize(rejection.headers('WWW-Authenticate')).then(function
> (rpt) {*
> * deferred.resolve(rejection);*
> * }, function () {*
> * document.getElementById("output").innerHTML = 'You can not access or
> perform the requested operation on this resource.';*
> * }, function () {*
> * document.getElementById("output").innerHTML = 'Unexpected error from
> server.';*
> * });*
> var promise = deferred.promise;
> return promise.then(function (res) {
> if (!res.config.retry) {
> res.config.retry = 1;
> } else {
> res.config.retry++;
> }
> var $http = $injector.get("$http");
> return $http(res.config).then(function (response) {
> return response;
> });
> });
> }
> }
> return $q.reject(rejection);
> }
> };