Auth0とAngular 2を使用する場合、リクエストURLにリダイレクトするためのハッシュURLパラメータを取得

Question

Auth0は認証後にコールバックURLをホワイトリストに登録する必要があるため、/ thing/1、/ thing/1001には、物IDをワイルドカードする方法がないためです。

私のように角度2で解釈しているきちんとした解決策にこのGithub conversationポイント：私のauth.service.tsで

：

lock = new Auth0Lock('Client_ID', 'Domain', { 
     auth: { 
      redirectUrl: window.location.origin + '/login', 
      responseType: 'token', 
      params: { 
       scope: 'openid name email', 
       state: JSON.stringify({pathname: window.location.pathname}) 
      } 
     } 
    }); 

は、私はその後、角度2の私の/ログインルートをホワイトリストに登録することができます。私が読んで、当時、このような呼び出しにAuth0によって返されたパス名に移動し、私のlogin.component.tsを取得しようとした：

this.route 
    .queryParams 
    .subscribe(params => { 
     this.state = params['state']; 
     this.router.navigate(this.state, {preserveQueryParams: true}); 
    }); 

...しかし、paramsが常にトンですo空にする。

http://localhost:5555/login#access_token=...&id_token=...&token_type=Bearer&state=%7B%22pathname%22%3A%22%2Flogin%22%7D

...そして、彼らはLoginComponentに到達する前に角度2ルーティングが自動的＃パラメータを取り除き：コールバックURLはこの形式ですので、私の知る限り、これはあります。

私はその後lock.authenticated上authResultはまだそう次のように移動しようとしauth.service.tsで私の状態パラメータが含まれていることを発見：

this.lock.on("authenticated", (authResult:any) => { 
    localStorage.setItem('id_token', authResult.idToken); 
    let state: string = JSON.parse(authResult.state); 
    this.router.navigate([state.pathname], {}); 

これが最初に動作するように見えますが、それが判明信頼できない...私は予期せずどこからでもリダイレクトされているようです。

/thing/1001 to 
/things or even 
/

...私はなぜうまくいかないのですか？どのような助けも非常に感謝します。 @のshussonの答えを受けて

EDIT：@のshussonの回答に基づいて

の作業コードがauth.service.tsである：

export class Auth { 
    // Configure Auth0 
    lock = new Auth0Lock('Client_ID', 'Domain',{ 
     auth: { 
      redirectUrl: location.origin + '/login', 
      responseType: 'token', 
     } 
    }); 

    constructor(private router: Router, route: ActivatedRoute) { 

     // Add callback for lock `authenticated` event 
     this.lock.on("authenticated", (authResult:any) => { 
      localStorage.setItem('id_token', authResult.idToken); 
      let state: any = JSON.parse(authResult.state); 
      this.router.navigate([state.pathname], {}); 
     ... 
    } 

    public login() { 
     // Call the show method to display the widget. 
     this.lock.show({ 
      auth: { 
       params: { 
        scope: 'openid name email', 
        state: JSON.stringify({pathname: this.router.url}) 
       } 
      } 
     }); 
    }; 

EDIT：渡すパス：this comment再に基づいてコールバックでCSRFの脆弱性：

私のauth.service.tsの最終作業コードは：

当社の認証サービスで

import { Injectable }  from '@angular/core'; 
import { tokenNotExpired } from 'angular2-jwt/angular2-jwt'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { UUID } from 'angular2-uuid/index'; 

// Avoid name not found warnings 
declare var Auth0Lock: any; 

@Injectable() 
export class Auth { 
    // Configure Auth0 
    lock = new Auth0Lock('Client_ID', 'Domain',{ 
     auth: { 
      redirectUrl: location.origin + '/login', 
      responseType: 'token', 
     } 
    }); 
    //Store profile object in auth class 
    userProfile: Object; 

    constructor(private router: Router, route: ActivatedRoute) { 

     // Set userProfile attribute of already saved profile 
     this.userProfile = JSON.parse(localStorage.getItem('profile')); 

     // Add callback for lock `authenticated` event 
     this.lock.on("authenticated", (authResult:any) => { 
      localStorage.setItem('id_token', authResult.idToken); 
      let pathname_object: any = JSON.parse(authResult.state); 
      let pathname: any = localStorage.getItem(pathname_object.pathname_key); 
      //get rid of localStorage of url 
      localStorage.removeItem(pathname_object.pathname_key); 
      //navigate to original url 
      this.router.navigate([pathname], {}); 

     // Fetch profile information 
     this.lock.getProfile(authResult.idToken, (error:any, profile:any) => { 
      if (error) { 
       // Handle error 
       alert(error); 
       return; 
      } 

      localStorage.setItem('profile', JSON.stringify(profile)); 
       this.userProfile = profile; 
      }); 
     }); 
    } 

    public login() { 
     //generate UUID against which to store path 
     let uuid = UUID.UUID(); 
     localStorage.setItem(uuid, this.router.url); 
     // Call the show method to display the widget. 
     this.lock.show({ 
      auth: { 
       params: { 
        scope: 'openid name email', 
        state: JSON.stringify({pathname_key: uuid}) 
       } 
      } 
     }); 
    }; 
... 
} 

Answer 1

我々のようなものが何かを：

ジョブおかげ@shussonを行うの

const options: any = { 
    auth: { 
     redirectUrl: location.origin, 
     responseType: 'token' 
    }, 
}; 

constructor(private router: Router) { 
    new Auth0Lock(environment.auth0ClientId, environment.auth0Domain, options); 
    ... 
    this.lock.on('authenticated', (authResult: any) => { 
     ... 
     this.router.navigateByUrl(authResult.state); 
    }); 
} 

public login() { 
    this.lock.show({ 
     auth: { 
      params: {state: this.router.url}, 
     } 
    }); 
};