Couvre-clé | Ne peut pas attendre sur updateToken() dans la fonction async

Question

Nous développons l'application Spring avec frontend React/Redux. Nous l'avons intégré avec succès au service d'authentification Keycloak. Cependant, nous avons rencontré un comportement indésirable après l'expiration du jeton d'accès. Notre restMiddleware ressemble à ceci (simplifié):

function restMiddleware() { 
    return (next) => async (action) => { 
     try{ 

      await keycloak.updateToken(5); 

      res = await fetch(restCall.url, { 
       ...restCall.options, ...{ 
        credentials: 'same-origin', 
        headers: { 
         Authorization: 'Bearer ' + keycloak.token 
        } 
       } 
      }); 

     }catch(e){} 
    } 

Le problème est que, après expiration du jeton et updateToken() est exécutée, la fonction async ne s'arrête pas et invoque fetch() immédiatement, avant nouveau jeton d'accès est reçu. Cela empêche bien sûr la requête d'extraction de réussir et provoque une réponse avec le code 401. updateToken() renvoie une promesse, donc je ne vois aucune raison pour laquelle l'attente ne fonctionnerait pas dessus, ce qui est certainement le cas. J'ai confirmé que la fonction dans updateToken().success(*function*) s'exécutera après un rafraîchissement de jeton réussi et que le placement de fetch() à l'intérieur résoudrait le problème, mais à cause de notre construction de middleware, je ne peux pas le faire. J'ai développé cette solution de contournement:

function refreshToken(minValidity) { 

     return new Promise((resolve, reject) => { 

      keycloak.updateToken(minValidity).success(function() { 
       resolve() 
      }).error(function() { 
       reject() 
      }); 
     }); 
    } 

    function restMiddleware() { 
    return (next) => async (action) => { 
     try{ 
      await refreshToken(5); 

      res = await fetch(restCall.url, { 
       ...restCall.options, ...{ 
        credentials: 'same-origin', 
        headers: { 
         Authorization: 'Bearer ' + keycloak.token 
        } 
       } 
      }); 

     }catch(e){} 
    } 

Et il fonctionne, mais il est pas élégant.

La question est: pourquoi la première solution n'a pas fonctionné? Pourquoi je ne peux pas attendre sur updateToken() et utiliser updateToken(). Success() à la place?

Je suppose que cela pourrait être un bug et de confirmer que c'est le but principal de cette question.

Answer 1

La documentation de la méthode updateToken indique qu'elle renvoie une promesse, mais elle n'est en réalité pas enregistrable et le mot-clé await ne le considère donc pas comme une promesse valide. C'est comme ça que je le mettrais. :)

Votre solution me semble élégante et j'ai fait exactement la même chose pour continuer correctement sur une chaîne Promise après avoir appelé la fonction updateToken.

Keycloak JavaScript documentation de l'adaptateur: https://keycloak.gitbooks.io/documentation/securing_apps/topics/oidc/javascript-adapter.html

Answer 2

Oui, comme on dit, keycloak.js utilise une mise en œuvre de la promesse Homegrown qui est incompatible avec l'ES6 Promise. Ce que j'ai tendance à faire dans mes projets, c'est un petit assistant comme celui-ci (TypeScript).

export const keycloakPromise = <TSuccess>(keycloakPromise: KeycloakPromise<TSuccess, any>) => new Promise<TSuccess>((resolve, reject) => 
    keycloakPromise 
     .success((result: TSuccess) => resolve(result)) 
     .error((e: any) => reject(e)) 
); 

et de l'utiliser comme

keycloakPromise<KeycloakProfile>(keycloak.loadUserProfile()) 
    .then(userProfile => ...) 
    .catch(() => ...)