### Procesar el resultado de la autenticación
Cuando un usuario se autentica mediante Universal Login y luego es redirigido de nuevo a tu aplicación, su información de autenticación estará contenida en un fragmento hash de la URL. El método `handleAuthentication` de `AuthService` se encarga de procesar el hash.
Llama a `handleAuthentication` en el componente raíz de tu aplicación para que el fragmento hash de autenticación se procese cuando la aplicación se cargue por primera vez después de que el usuario sea redirigido de nuevo a ella.
```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();
}
}
```
### Agregue el componente Callback
Usar Universal Login significa que los usuarios son redirigidos fuera de su aplicación a una página alojada por Auth0. Después de autenticarse correctamente, vuelven a su aplicación, donde se establece una sesión del lado del cliente.
Puede hacer que los usuarios vuelvan a cualquier URL de su aplicación que desee; sin embargo, se recomienda crear una ruta de callback específica que sirva como ubicación central a la que se redirigirá al usuario tras una autenticación correcta. Tener una única ruta de callback ofrece dos ventajas principales:
* Evita la necesidad de incluir en la lista de permitidos varias URL de devolución de llamada (y, en ocasiones, desconocidas)
* Sirve como lugar para mostrar un indicador de carga mientras su aplicación establece la sesión del lado del cliente del usuario
Cree un componente llamado `CallbackComponent` y añádale un indicador de carga.
```jsx lines theme={null}
## Paso 3. Obtener el perfil de usuario
Profile
{{ profile?.nickname }}
{{ profile | json }}
## Paso 4. Mostrar elementos de la interfaz de usuario de forma condicional según el scope
Durante el proceso de autorización, ya almacenamos en el almacenamiento local los alcances reales concedidos al usuario. Si el `scope` devuelto en `authResult` no está vacío, significa que al usuario se le asignó un conjunto de alcances diferente del solicitado inicialmente y, por lo tanto, debemos usar `authResult.scope` para determinar los alcances concedidos al usuario.
Si el `scope` devuelto en `authResult` está vacío, significa que al usuario se le concedieron todos los alcances solicitados y, por lo tanto, podemos usar esos alcances solicitados para determinar los alcances concedidos al usuario.
Aquí está el código que escribimos antes para la función `setSession` que realiza esa comprobación:
```jsx lines theme={null}
private setSession(authResult): void {
// Establecer el momento en que expirará el Token de acceso
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
// Si hay un valor en el parámetro `scope` del authResult,
// usarlo para establecer los alcances en la sesión del usuario. De lo contrario,
// usar los alcances solicitados. Si no se solicitaron alcances,
// dejarlo en blanco
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();
}
```
A continuación, debemos agregar una función a la clase `AuthService` que podamos llamar para determinar si se concedió a un usuario un `scope` específico:
```jsx lines theme={null}
@Injectable()
export class AuthService {
// se omite parte del código por brevedad
public userHasScopes(scopes: Array
### Proteja una ruta
También debemos proteger una ruta para impedir el acceso a ella si a un usuario no se le han concedido los alcances correctos. Para ello, podemos agregar una nueva clase de servicio `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;
}
}
```
Luego, úselo al configurar las rutas para determinar si una ruta puede activarse. Observe cómo se usa el nuevo `ScopeGuardService` en la definición de la ruta `approval` a continuación:
```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: '' }
];
```
## Paso 5. Llama a la API
El módulo [angular2-jwt](https://github.com/auth0/angular2-jwt) se puede usar para adjuntar automáticamente
## Paso 6. Renueva el token de acceso
Para renovar el token de acceso del usuario, debes actualizar la SPA de Angular. Agrega un método a `AuthService` que llame al método `checkSession` de auth0.js. Si la renovación se realiza correctamente, usa el método `setSession` existente para guardar los nuevos tokens en el almacenamiento local.
```ts lines theme={null}
public renewToken() {
this.auth0.checkSession({
audience: AUTH_CONFIG.apiUrl
}, (err, result) => {
if (!err) {
this.setSession(result);
}
});
}
```
En la clase `AuthService`, agregue un método llamado `scheduleRenewal` para programar el momento en que la autenticación debe renovarse silenciosamente. En el ejemplo siguiente, se configura para que esto ocurra 30 segundos antes de que el token expire realmente. Agregue también un método llamado `unscheduleRenewal` que cancelará la suscripción al 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();
// Usar el retraso en un temporizador para
// ejecutar la renovación en el momento adecuado
var refreshAt = expiresAt - (1000 * 30); // Renovar 30 segundos antes del vencimiento
return Observable.timer(Math.max(1, refreshAt - now));
});
// Una vez transcurrido el tiempo de retraso
// indicado arriba, obtener un nuevo JWT y programar
// renovaciones adicionales
this.refreshSubscription = source.subscribe(() => {
this.renewToken();
});
}
public unscheduleRenewal() {
if (!this.refreshSubscription) return;
this.refreshSubscription.unsubscribe();
}
```
Por último, debes iniciar la renovación programada. Para ello, llama a `scheduleRenewal` dentro de tu `AppComponent` cuando se cargue la página. Esto ocurrirá después de cada flujo de autenticación, ya sea cuando el usuario inicie sesión explícitamente o cuando se produzca la autenticación silenciosa.