2016-12-28 100 views
2

在我的Angular2應用程序中,我想使用Auth0獲取授權令牌,以便我可以使用它來自定義登錄到Firebase。我跟着樣本here設置我的Auth0服務並使其工作。無法使用Auth0獲取授權令牌

我現在遇到的問題是獲取我的委託令牌並用它登錄到Firebase。示例here顯示了它是如何完成的,但我得到了一個例外:當我嘗試聲明我的auth0實例並使用它獲取我的委託令牌時,無法讀取undefined屬性'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'); 
    } 
} 

回答

1

您還需要創建auth0實例,如圖所示

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

我找到了解決此問題的解決方法。我被困在這個完全相同的問題,我認爲它已經與auth0模塊的typscript導入。除了使用auth0模塊的,我只是做一個HTTP POST請求到我的帳戶Auth0代表團端點:

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

這將存儲在瀏覽器本地存儲所獲得的證書。注意:Firebase需要一些其他參數,因爲我正在使用AWS,所以我不知道。此外,您還需要以下用於此HTTP請求的導入:

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