2016-08-11 6 views
0

私はauth0を使用しており、hereからクイックスタートサンプルアプリをダウンロードしました。私はid_tokenを取得しようとしているので、ユーザーのプロフィールを取得できます。しかし、他のページが読み込まれた後にauth.serviceが実行されているため、私はできません。auth0 with angular2 - トークンの入手方法

だから、私はこのようなhome.componentを持っている:

import { Component, OnInit } from '@angular/core'; 
import {Auth} from './auth.service'; 

@Component({ 
    selector: 'home', 
    template: ` 
    <h1>Testing</h1> 
    `, 
    providers: [Auth], 
}) 

export class HomeComponent implements OnInit { 

constructor(private auth: Auth) {} 

ngOnInit(){ 
    var token = localStorage.getItem('id_token'); 
    var profile = this.auth.lock.getProfile(token, function(error, profile) { 
    if (error) { 
     console.log("there was an ERROR" + error + token); 
     return; 
    }});  
    } 
} 

とこのようになります私のauth.serviceクラス:

declare var Auth0Lock: any; 

@Injectable() 
export class Auth { 
// Configure Auth0 
lock = new Auth0Lock(mycreds, mycreds, {}); 

constructor() { 
    // Add callback for lock `authenticated` event 
    this.lock.on("authenticated", (authResult) => { 
    console.log("IN AUTH.SERVICE");  
    localStorage.setItem('id_token', authResult.idToken);     
    });   
} 

public login() { 
    // Call the show method to display the widget. 
    this.lock.show();   
}; 

public authenticated() { 
// Check if there's an unexpired JWT 
// This searches for an item in localStorage with key == 'id_token' 

return tokenNotExpired(); 
}; 

    public logout() { 
    // Remove token from localStorage 
    localStorage.removeItem('id_token'); 
    }; 
} 

問題は、私のhome.componentクラスのロードということです私のauth.serviceの前に、ユーザートークンを取得しようとすると、まだそこにはありません。私は非常に角度があるので、私は別の前に1ページの負荷をかける方法やこの問題を解決する方法がわかりません。

+1

このhttps://github.com/auth0-samples/auth0-angularjs2-systemjs-sample/blob/master/04-User-Profile/の例をご覧ください。申し訳ありませんが、あなたのアプリケーションにRoute Securityを実装したいのか、Auth0で行うための最良の方法を見つけようとしているのか疑問に思っています。私が提供するリンクには、このシナリオを扱う更新されたAuthServiceが含まれています。ただし、ルートセキュリティを実装する場合は、実際にはhttp://www.captaincodeman.com/2016/03/31/angular2-route-security/ – ShrekOverflow

+0

を参照する必要があります。最初のリンクの例は実際に実行されているように見えます私は何を望みますか?ありがとうございました。 – ygetarts

答えて

1

HomeComponents OnInitイベントが発生する前に、サービスがインスタンス化され、コンストラクタが実行されます。つまり、あなたのサービスはトークンを設定する前に応答(auth)を待っています。

つまり、HomeComponentのinitにトークンがあるとは思えません。ユーザーがAuth0Lockコンポーネントを介してアクティブにログインするまでトークンを取得していません。あなたのHomeComponentでできることは、auth.login()を呼び出すことです。コールバックのユーザーが認証されている可能性があるため、トークンが存在する可能性があります。プロファイルデータを要求する前にトークンがある場合はautome.authenticated()をチェックしてください。

あなたのためのいくつかの質問: 1.エラーが発生した場合は、コンソールを確認しましたか? 2.認証コールバックから「IN AUTH.SERVICE」メッセージが表示されますか?

関連する問題