委任トークンを取得するためにAuth0を使用することができません

Question

私のAngular2アプリケーションでは、Auth0を使用して委任トークンを取得してfirebaseにカスタムサインインすることができます。私はサンプルhereに続いてAuth0サービスをセットアップして動作させました。

私が今行っている問題は、委任トークンを取得してFirebaseにサインインすることです。例hereはそれがどのように行われたかを示していますが、例外が発生しています。私のauth0インスタンスを宣言しようとすると、未定義のプロパティ 'auth0'を読み取ることができず、それを使って委譲トークンを取得します。私は何を間違えたのですか？私のindex.htmlで

私は次のスクリプトが含まれていました。

<script src="http://cdn.auth0.com/js/lock/10.7/lock.min.js"></script> 
<script src="https://cdn.auth0.com/w2/auth0-7.4.min.js"></script> 

私もauth0をインストールするために私の端末で試してみました：

：

npm install auth0 
npm install auth0-js 

は私の認証サービスは、現在、このようになります。

// app/auth.service.ts 

import { Injectable }  from '@angular/core'; 
import { tokenNotExpired } from 'angular2-jwt'; 
import { AngularFire } from 'angularfire2'; 

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

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

    constructor(private af: AngularFire) { 
     // Add callback for lock `authenticated` event 
     this.lock.on("authenticated", (authResult) => { 
     this.lock.getProfile(authResult.idToken, function(error:any, profile:any){ 
     if(error){ 
      throw new Error(error); 
     } 

     localStorage.setItem('id_token', authResult.idToken); 
     localStorage.setItem('profile', JSON.stringify(profile)); 

     //options to be used with auth0 instance to get delegation token 
     var options = { 
     id_token : authResult.idToken, 
     api : 'firebase', 
     scope : 'openid name email displayName', 
     target: 'AUTH0_CLIENT_ID' 
     }; 

     //----->ERROR HERE, can't read auth0 property 
     this.auth0.getDelegationToken(options, function(err, result){ 
     console.log(result); 
      if(!err){ 
      this.af.auth().signInWithCustomToken(result.id_token).catch(function(error) { 
       console.log(error); 
      }); 
      } 
     }); 
     }); 
    }); 
    } 

    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'); 
    } 
} 

Answer 1

のようにauth0インスタンスも作成する必要があります

var auth0 = new Auth0({ domain : AUTH0_DOMAIN, clientID: AUTH0_CLIENT_ID }); 

Answer 2

この問題の回避策が見つかりました。私はまったく同じ問題を抱えていました。auth0モジュールのtypscriptのインポートと関係していると思います。代わりにauth0モジュールを使用しての私は単に私のAuth0アカウントの委任エンドポイントへのHTTP POSTリクエストをした：

let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 
this.http.post('https://<Your domain>/delegation', 
    { 
     "client_id": "<Your client ID>", 
     "grant_type": "urn:ietf:params:oauth:grant-type:jwt-bearer", 
     "id_token": <Your auth0 Id Token>, 
     "target": "Your client ID", 
     "scope": "openid", 
     "api_type": "<Your delegation choice (mine was "aws")>", 
    }, options) 
    .map((res:Response) => res.json()) 
    .subscribe(
     data => localStorage.setItem('awsToken', JSON.stringify(data.Credentials)), 
     err => console.log(err), 
    () => console.log('Authentication Complete') 
    ); 

これは、ブラウザのローカルストレージに取得した資格情報を格納します。注意：私がAWSを使用しているため、私が気づいていないFirebaseが必要とするいくつかの追加パラメータがあるかもしれません。また、このHTTPリクエストには、次のインポートが必要です。

import { Http, Response, Headers,RequestOptions } from "@angular/http"; 
import { Observable } from 'rxjs'; 
import 'rxjs/add/operator/map';