Auth0を角度2のuseHashで設定するにはどうすればいいですか？

Question

ハッシュルーティング（例：http://somdomain.com/#/someroute）を使用して角度2のauth0を使用することに関するドキュメントとサンプルはかなり疎であり、古くなっています。

は、アドレスに複数の問題があります：URLフラグメントの変化のための

1. auth0 librarylistens。残念ながら、angularは、ルートを扱っていると考えてURLフラグメントの変更を呑み込んでしまいます。

2. URLフラグメントは#access_token=...で始まり、access_tokenはルートとして登録されていないため、エラーが発生します。

3. access_tokenを登録しても、ルートとして表示したくないので、ナビゲーションをキャンセルする必要があります。

実際にセットアップするために必要なことは何ですか？

Answer 1

まずあなたがauth0-lock

npm install --save auth0-lock 

次が必要になります、あなたは認証サービスが必要になります。次の認証サービスは、login()とlogout()を実装しています。

これらのメソッドを呼び出す前に、サービスをregisterAuthenticationWithHashHandlerに設定していることを確認してください。これはApp.Component.ts

// AuthService.ts 
import { environment } from './../environments/environment'; 
import { Injectable } from '@angular/core'; 
import { Router, RouterEvent } from '@angular/router'; 
import 'rxjs/add/operator/filter'; 
import 'rxjs/add/operator/take'; 
import { AuthCallbackComponent } from './../app/auth-callback/auth-callback.component'; 
import { AuthenticationCallbackActivateGuard } from '../app/auth-callback/auth-callback-activate-guard'; 
import Auth0Lock from 'auth0-lock'; 

@Injectable() 
export class AuthService { 

    private lock: Auth0Lock; 

    constructor(public router: Router) { 

    this.lock = new Auth0Lock(
     environment.auth0.clientID, 
     environment.auth0.domain, 
     { 
     oidcConformant: true, 
     autoclose: true, 
     auth: { 
      autoParseHash: false, 
      redirectUrl: environment.auth0.redirectUri, 
      responseType: 'token id_token', 
      audience: environment.auth0.audience, 
      params: { 
      scope: 'openid' 
      } 
     } 
     } 
    ); 

    } 

    public login(): void { 
    this.lock.show(); 
    } 

    // Call this method in app.component.ts 
    // if using path-based routing 
    public registerAuthenticationHandler(): void { 
    this.lock.on('authenticated', (authResult) => { 
     if (authResult && authResult.accessToken && authResult.idToken) { 
     this.setSession(authResult); 
     this.router.navigate(['/']); 
     } 
    }); 
    this.lock.on('authorization_error', (err) => { 
     this.router.navigate(['/']); 
     console.log(err); 
     alert(`Error: ${err.error}. Check the console for further details.`); 
    }); 
    } 

    // Call this method in app.component.ts 
    // if using hash-based routing 
    public registerAuthenticationWithHashHandler(): void { 

    this.registerAuthenticationHandler(); 
    this.workaroundHashAccessTokenRoute(); 

    this.router.events.take(1).subscribe(event => { 

     if (!(event instanceof RouterEvent)) { 
     return; 
     } 

     this.lock.resumeAuth(window.location.hash, (err, authResult) => { 
     if (authResult && authResult.idToken) { 
      this.lock.emit('authenticated', authResult); 
     } 

     if (authResult && authResult.error) { 
      this.lock.emit('authorization_error', authResult); 
     } 
     }); 

    }); 
    } 

    private workaroundHashAccessTokenRoute() { 

    /* workaround useHash:true with angular2 router 
    ** Angular mistakenly thinks "#access_token" is a route 
    ** and we oblige by creating a fake route that can never be activated 
    */ 
    const routes = this.router.config; 
    routes.splice(0, 0, { 
     path: 'access_token', 
     component: AuthCallbackComponent, 
     canActivate: [AuthenticationCallbackActivateGuard] 
    }); 
    this.router.resetConfig(routes); 
    } 

    private setSession(authResult): void { 
    // Set the time that the access token will expire at 
    const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime()); 
    localStorage.setItem('access_token', authResult.accessToken); 
    localStorage.setItem('id_token', authResult.idToken); 
    localStorage.setItem('expires_at', expiresAt); 
    } 

    public logout(): void { 
    // Remove tokens and expiry time from localStorage 
    localStorage.removeItem('access_token'); 
    localStorage.removeItem('id_token'); 
    localStorage.removeItem('expires_at'); 
    // Go back to the home route 
    this.router.navigate(['/']); 
    } 

    public isAuthenticated(): boolean { 
    // Check whether the current time is past the 
    // access token's expiry time 
    const expiresAt = JSON.parse(localStorage.getItem('expires_at')); 
    return new Date().getTime() < expiresAt; 
    } 
} 

で行うことができますregisterAuthenticationWithHashHandlerは「access_tokenは」と呼ばれるダミーのルートを作成し、それは常にfalseを返しますAuthenticationCallbackActivateGuardと呼ばれるルールによって保護されています。

// auth-callback-activate-guard.ts 
import { Injectable } from '@angular/core'; 
import { CanActivate } from '@angular/router'; 
import { Location } from '@angular/common'; 
import { Router } from '@angular/router'; 

@Injectable() 
export class AuthenticationCallbackActivateGuard implements CanActivate { 

    constructor(private router: Router, private location: Location) { } 

    canActivate() { 
    return false; 
    } 
} 

ここでは、ダミーのルートの必要があります部品です：

// auth-callback/auth-callback.components.ts 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-auth-callback', 
    templateUrl: './auth-callback.component.html', 
    styleUrls: ['./auth-callback.component.scss'] 
}) 
export class AuthCallbackComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

登録認証サービスApp.Component.tsでは

// app/app.component.ts 
import { Component } from '@angular/core'; 
import { AuthService } from '../services/auth.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 

    constructor(private auth: AuthService) { 
    auth.registerAuthenticationWithHashHandler(); 
    } 
}