### Traiter le résultat de l’authentification
Lorsqu’un utilisateur s’authentifie avec Universal Login, puis est redirigé vers votre application, ses informations d’authentification se trouvent dans un fragment de hachage de l’URL. La méthode `handleAuthentication` dans `AuthService` sert à traiter ce hachage.
Appelez `handleAuthentication` dans le composant racine de votre application afin que le fragment de hachage d’authentification soit traité au chargement initial de l’application après la redirection de l’utilisateur.
```javascript lines theme={null}
// src/app/app.component.ts
import { Component } from '@angular/core';
import { AuthService } from './auth/auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public auth: AuthService) {
auth.handleAuthentication();
}
}
```
### Ajouter le composant Callback
L’utilisation d’Universal Login signifie que les utilisateurs sont redirigés vers une page hébergée par Auth0, à l’extérieur de votre application. Une fois authentifiés avec succès, ils sont redirigés vers votre application, où une session côté client est établie.
Vous pouvez choisir de rediriger les utilisateurs vers n’importe quelle URL de votre application; toutefois, il est recommandé de créer une route de rappel dédiée qui servira de point de retour central après une authentification réussie. Le fait d’avoir une seule route de rappel présente deux avantages principaux :
* Cela évite d’avoir à autoriser plusieurs URL de rappel, parfois inconnues
* Cela fournit un emplacement où afficher un indicateur de chargement pendant que votre application établit la session côté client de l’utilisateur
Créez un composant nommé `CallbackComponent` et ajoutez-y un indicateur de chargement.
```jsx lines theme={null}
## Étape 3. Obtenir le profil utilisateur
Profile
{{ profile?.nickname }}
{{ profile | json }}
## Étape 4. Afficher les éléments de l’interface utilisateur de manière conditionnelle selon les scopes
Pendant le processus d’autorisation, nous avons déjà stocké dans le stockage local les scopes réellement accordés à l’utilisateur. Si le `scope` renvoyé dans `authResult` n’est pas vide, cela signifie que l’utilisateur s’est vu accorder un ensemble de scopes différent de celui demandé initialement. Nous devons donc utiliser `authResult.scope` pour déterminer les scopes accordés à l’utilisateur.
Si le `scope` renvoyé dans `authResult` est vide, cela signifie que l’utilisateur a obtenu tous les scopes demandés. Nous pouvons donc utiliser les scopes demandés pour déterminer les scopes accordés à l’utilisateur.
Voici le code que nous avons écrit plus tôt pour la fonction `setSession` afin d’effectuer cette vérification :
```jsx lines theme={null}
private setSession(authResult): void {
// Définir l'heure d'expiration du jeton d'accès
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
// Si le paramètre `scope` de authResult contient une valeur,
// l'utiliser pour définir les scopes dans la session de l'utilisateur. Sinon,
// utiliser les scopes tels que demandés. Si aucun scope n'a été demandé,
// ne rien définir
const scopes = authResult.scope || this.requestedScopes || '';
localStorage.setItem('access_token', authResult.accessToken);
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('expires_at', expiresAt);
localStorage.setItem('scopes', JSON.stringify(scopes));
this.scheduleRenewal();
}
```
Ensuite, nous devons ajouter à la classe `AuthService` une fonction que nous pourrons appeler pour déterminer si un utilisateur a obtenu un scope précis :
```jsx lines theme={null}
@Injectable()
export class AuthService {
// certains éléments du code ont été omis par souci de concision
public userHasScopes(scopes: Array
### Protéger une route
Nous devrions aussi protéger une route pour empêcher qu’un utilisateur y accède s’il n’a pas obtenu les scopes requis. Pour ce faire, nous pouvons ajouter une nouvelle classe de service `ScopeGuardService` :
```jsx lines theme={null}
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class ScopeGuardService implements CanActivate {
constructor(public auth: AuthService, public router: Router) {}
canActivate(route: ActivatedRouteSnapshot): boolean {
const scopes = (route.data as any).expectedScopes;
if (!this.auth.isAuthenticated() || !this.auth.userHasScopes(scopes)) {
this.router.navigate(['']);
return false;
}
return true;
}
}
```
Utilisez-le ensuite lors de la configuration des routes pour déterminer si une route peut être activée. Notez l’utilisation du nouveau `ScopeGuardService` dans la définition de la route `approval` ci-dessous :
```javascript lines theme={null}
// app.routes.ts
import { Routes, CanActivate } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { CallbackComponent } from './callback/callback.component';
import { AuthGuardService as AuthGuard } from './auth/auth-guard.service';
import { ScopeGuardService as ScopeGuard } from './auth/scope-guard.service';
import { TimesheetListComponent } from './timesheet-list/timesheet-list.component';
import { TimesheetAddComponent } from './timesheet-add/timesheet-add.component';
import { ApprovalComponent } from './approval/approval.component';
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
{ path: 'callback', component: CallbackComponent },
{ path: 'timesheets/add', component: TimesheetAddComponent, canActivate: [AuthGuard] },
{ path: 'timesheets', component: TimesheetListComponent, canActivate: [AuthGuard] },
{ path: 'approval', component: ApprovalComponent, canActivate: [ScopeGuard], data: { expectedScopes: ['approve:timesheets']} },
{ path: '**', redirectTo: '' }
];
```
## Étape 5. Appeler l’API
Le module [angular2-jwt](https://github.com/auth0/angular2-jwt) peut servir à ajouter automatiquement des
## Étape 6. Renouvelez le jeton d’accès
Pour renouveler le jeton d’accès de l’utilisateur, vous devez mettre à jour la SPA Angular. Ajoutez une méthode à `AuthService` qui appelle la méthode `checkSession` d’auth0.js. Si le renouvellement réussit, utilisez la méthode `setSession` existante pour enregistrer les nouveaux jetons dans le stockage local.
```ts lines theme={null}
public renewToken() {
this.auth0.checkSession({
audience: AUTH_CONFIG.apiUrl
}, (err, result) => {
if (!err) {
this.setSession(result);
}
});
}
```
Dans la classe `AuthService`, ajoutez une méthode appelée `scheduleRenewal` pour planifier le moment où l’authentification doit être renouvelée silencieusement. Dans l’exemple ci-dessous, cette opération est configurée pour se produire 30 secondes avant l’expiration réelle du jeton. Ajoutez également une méthode appelée `unscheduleRenewal` pour se désabonner de l’Observable.
```ts lines expandable theme={null}
public scheduleRenewal() {
if (!this.isAuthenticated()) return;
const expiresAt = JSON.parse(window.localStorage.getItem('expires_at'));
const source = Observable.of(expiresAt).flatMap(
expiresAt => {
const now = Date.now();
// Utiliser le délai dans un minuteur pour
// exécuter le renouvellement au bon moment
var refreshAt = expiresAt - (1000 * 30); // Renouveler 30 secondes avant l'expiration
return Observable.timer(Math.max(1, refreshAt - now));
});
// Une fois le délai ci-dessus écoulé,
// obtenir un nouveau JWT et planifier
// des renouvellements supplémentaires
this.refreshSubscription = source.subscribe(() => {
this.renewToken();
});
}
public unscheduleRenewal() {
if (!this.refreshSubscription) return;
this.refreshSubscription.unsubscribe();
}
```
Enfin, vous devez démarrer le renouvellement planifié. Pour ce faire, appelez `scheduleRenewal` dans votre `AppComponent` au chargement de la page. Cela se produira après chaque flux d’authentification, que l’utilisateur ouvre explicitement une session ou qu’une authentification silencieuse ait lieu.