Rafraîchir l'id_token ADAL : Angular 4

Question

J'utilise Angular 4 avec ADAL pour authentifier les utilisateurs dans mon application web, en utilisant la bibliothèque ng2-adal qui est un wrapper pour adal.js.

Le problème auquel je suis confronté est le suivant : Le jeton expire donc après un certain temps et j'ai une garde de route canActivate qui vérifie si l'utilisateur est authentifié. Si ce n'est pas le cas, il dirige l'utilisateur vers la page de connexion. Voici à quoi ressemble mon garde route :

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AdalService } from 'ng2-adal/dist/core';

@Injectable()
export class RouteGuard implements CanActivate {

  constructor(private router: Router, private adalService: AdalService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.adalService.userInfo.isAuthenticated) {
      return true;
    } else {
        this.router.navigate(['/user-login']);
        return false;
    }
  }
}

Ainsi, à chaque fois que le jeton expire, l'utilisateur est dirigé vers la page de connexion, ce qui est gênant pour les utilisateurs. Existe-t-il un moyen de renouveler le jeton à chaque fois qu'il expire ?

Answer 1

J'ai trouvé la solution. C'est comme ça que je l'ai ajouté :

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AdalService } from 'ng2-adal/dist/core';

@Injectable()
export class RouteGuard implements CanActivate {

  constructor(private router: Router, private adalService: AdalService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.adalService.userInfo.isAuthenticated) {
      return true;
    } else {
      this.adalService.acquireToken(this.adalService.config.clientId).toPromise().then((data) => {
      console.log('Generating a new authentication token.');
      return true;
    },
     (error) => {
       console.log('No user logged in.');
       this.router.navigate(['/user-login']);
       return false;
     }
    }
  }
}

Answer 2

J'ai eu le même problème et ma solution a fonctionné. Dans app.component.ts, ajoutez ce code à ngOnit().

this.adalService.handleWindowCallback();
 this.adalService.acquireToken(this.adalService.config.loginResource).subscribe(token => {
  this.adalService.userInfo.token = token;
  if (this.adalService.userInfo.authenticated === false) {
    this.adalService.userInfo.authenticated = true;
    this.adalService.userInfo.error = '';
  }
}, error => {
  this.adalService.userInfo.authenticated = false;
  this.adalService.userInfo.error = error;
  this.adalService.login();
});

Lorsque le jeton expire, le composant d'application est appelé, et le jeton d'acquisition rafraîchit le jeton en silence. Mais le this.adalService.userInfo.authenticated est toujours faux, ce qui entraîne une redirection ou un nouvel appel à la méthode de connexion. Le fait de le mettre manuellement à true corrige l'erreur de redirection. this.adalService.config.loginResource Ceci est automatiquement défini par adal-angular lui-même avec la ressource pour laquelle nous avons besoin d'un jeton.

Ajoutez également expireOffsetSeconds: 320, pour les paramètres des données de configuration adal avec

tenant: configData.adalConfig.tenant,
  clientId: configData.adalConfig.clientId,
  redirectUri: window.location.origin,

expireoffsetseconds invalide le jeton en fonction du temps que nous spécifions avant son expiration réelle.