### Traiter le résultat de l’authentification
Lorsqu’un utilisateur s’authentifie au moyen d’Universal Login, puis qu’il est redirigé vers votre application, ses informations d’authentification se trouvent dans un fragment de hachage de l’URL. La méthode `handleAuthentication` de `AuthService` est chargée de traiter le hachage.
Appelez `handleAuthentication` dans le composant racine de votre application afin que le fragment de hachage d’authentification puisse être traité au premier chargement 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 de Universal Login signifie que les utilisateurs sont redirigés hors de votre application vers une page hébergée par Auth0. Une fois leur authentification réussie, ils sont renvoyés vers votre application, où une session côté client est créée pour eux.
Vous pouvez choisir de faire revenir 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 central vers lequel l’utilisateur sera redirigé après une authentification réussie. Le fait d’avoir une seule route de rappel présente deux grands avantages :
* Cela évite d’avoir à mettre sur liste d’autorisation plusieurs URL de rappel (parfois même inconnues)
* Cela permet d’afficher un indicateur de chargement pendant que votre application crée 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 de l’utilisateur
Profile
{{ profile?.nickname }}
{{ profile | json }}
## Étape 4. Afficher les éléments de l’UI de façon conditionnelle selon la portée
Pendant le processus d’autorisation, nous avons déjà enregistré dans le stockage local les portées réellement accordées à l’utilisateur. Si le `scope` renvoyé dans `authResult` n’est pas vide, cela signifie que l’utilisateur a reçu un ensemble de portées différent de celui demandé au départ; nous devons donc utiliser `authResult.scope` pour déterminer les portées qui lui ont été accordées.
Si le `scope` renvoyé dans `authResult` est vide, cela signifie que l’utilisateur a obtenu toutes les portées demandées; nous pouvons donc utiliser les portées demandées pour déterminer celles qui lui ont été accordées.
Voici le code que nous avons écrit plus tôt pour la fonction `setSession` qui effectue cette vérification :
```jsx lines theme={null}
private setSession(authResult): void {
// Définir l'heure d'expiration de l'access token
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
// S'il y a une valeur dans le paramètre `scope` de authResult,
// 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é,
// laisser vide
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();
}
```
Nous devons ensuite ajouter à la classe `AuthService` une fonction permettant de déterminer si un utilisateur a reçu 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 afin d’empêcher un utilisateur d’y accéder s’il ne s’est pas vu accorder les `scopes` appropriés. 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;
}
}
```
Servez-vous-en ensuite lors de la configuration des routes pour déterminer si une route peut être activée. Remarquez 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 être utilisé pour joindre automatiquement des
## Étape 6. Renouveler le jeton d’accès
Le renouvellement du jeton d’accès de l’utilisateur nécessite une mise à jour de 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 définir le moment où l’authentification doit être renouvelée en silence. Dans l’exemple ci-dessous, elle est configurée pour s’exécuter 30 secondes avant l’expiration réelle du jeton. Ajoutez également une méthode appelée `unscheduleRenewal` pour annuler l’abonnement à 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 l'actualisation au bon moment
var refreshAt = expiresAt - (1000 * 30); // Actualiser 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 actualisations 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`, afin qu’il s’exécute au chargement de la page. Cela se produira après chaque flux d’authentification, soit lorsque l’utilisateur se connecte explicitement, soit lors d’une authentification silencieuse.