### 認証結果を処理する
ユーザーが Universal Login を通じて認証され、その後アプリケーションにリダイレクトされると、認証情報は URL のハッシュフラグメントに含まれます。`AuthService` の `handleAuthentication` メソッドは、このハッシュを処理します。
ユーザーのリダイレクト後にアプリが最初に読み込まれたときに認証ハッシュフラグメントを処理できるよう、アプリのルートコンポーネントで `handleAuthentication` を呼び出します。
```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();
}
}
```
### Callback コンポーネントを追加する
Universal Login を使用すると、ユーザーはアプリケーションから離れ、Auth0 でホストされるページに移動します。認証に成功すると、ユーザーはアプリケーションに戻され、そこでクライアント側のセッションが設定されます。
ユーザーの戻り先はアプリケーション内の任意の URL にできますが、認証成功後にユーザーを戻す共通の場所として、専用の callback ルートを作成することをおすすめします。callback ルートを 1 つにまとめることには、主に次の 2 つの利点があります。
* 複数の callback URL (場合によっては不明な URL を含む) を許可リストに追加する必要がなくなります
* アプリケーションがユーザーのクライアント側セッションを設定している間、ローディングインジケーターを表示する場所として使えます
`CallbackComponent` という名前のコンポーネントを作成し、ローディングインジケーターを追加します。
```jsx lines theme={null}
## ステップ 3. ユーザープロファイルを取得する
Profile
{{ profile?.nickname }}
{{ profile | json }}
## ステップ 4. スコープに応じて UI 要素を条件付きで表示する
認可プロセス中に、ユーザーに付与された実際のスコープはすでにローカルストレージに保存されています。`authResult` で返された `scope` が空でない場合は、ユーザーに最初に要求したものとは異なるスコープのセットが発行されたことを意味します。そのため、ユーザーに付与されたスコープの判定には `authResult.scope` を使用する必要があります。
`authResult` で返された `scope` が空の場合は、要求したすべてのスコープがユーザーに付与されたことを意味します。そのため、ユーザーに付与されたスコープの判定には、要求したスコープを使用できます。
以下は、その確認を行うために先ほど作成した `setSession` 関数のコードです。
```jsx lines theme={null}
private setSession(authResult): void {
// アクセストークンの有効期限を設定する
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
// authResult の `scope` パラメーターに値がある場合は、
// それを使用してユーザーのセッションにスコープを設定する。ない場合は
// リクエストされたスコープを使用する。スコープがリクエストされていない場合は
// 空に設定する
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();
}
```
次に、ユーザーに特定のスコープが付与されているかどうかを判定するために呼び出せる関数を `AuthService` クラスに追加します。
```jsx lines theme={null}
@Injectable()
export class AuthService {
// 簡略化のため一部のコードを省略
public userHasScopes(scopes: Array
### ルートを保護する
ユーザーに適切なスコープが付与されていない場合にそのルートへ遷移できないよう、ルートも保護します。そのために、新しく `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;
}
}
```
次に、ルートを設定する際にそれを使って、そのルートを有効化できるかどうかを判断します。以下の `approval` ルートの定義で、新しい `ScopeGuardService` が使われている点に注目してください。
```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: '' }
];
```
## ステップ 5. API を呼び出す
[angular2-jwt](https://github.com/auth0/angular2-jwt) モジュールを使用すると、API へのリクエストに
## 手順 6. アクセストークンを更新する
ユーザーのアクセストークンを更新するには、Angular SPA 側を更新する必要があります。`AuthService` に、auth0.js の `checkSession` メソッドを呼び出すメソッドを追加します。更新に成功したら、既存の `setSession` メソッドを使用して、新しいトークンをローカルストレージに保存します。
```ts lines theme={null}
public renewToken() {
this.auth0.checkSession({
audience: AUTH_CONFIG.apiUrl
}, (err, result) => {
if (!err) {
this.setSession(result);
}
});
}
```
`AuthService` クラスに、認証をサイレントに更新するタイミングを設定する `scheduleRenewal` というメソッドを追加します。以下のサンプルでは、実際にトークンの有効期限が切れる 30 秒前に実行されるよう設定しています。また、Observable の購読を解除する `unscheduleRenewal` というメソッドも追加します。
```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();
// タイマーの遅延を使用して
// 適切なタイミングでリフレッシュを実行する
var refreshAt = expiresAt - (1000 * 30); // 有効期限の30秒前にリフレッシュ
return Observable.timer(Math.max(1, refreshAt - now));
});
// 上記の遅延時間が経過したら、
// 新しいJWTを取得して
// 追加のリフレッシュをスケジュールする
this.refreshSubscription = source.subscribe(() => {
this.renewToken();
});
}
public unscheduleRenewal() {
if (!this.refreshSubscription) return;
this.refreshSubscription.unsubscribe();
}
```
最後に、スケジュールされた更新を開始する必要があります。これには、ページの読み込み時に実行される `AppComponent` 内で `scheduleRenewal` を呼び出します。これは、ユーザーが明示的にログインした場合でも、サイレント認証が行われた場合でも、各認証フローのたびに実行されます。