Auth0に角2​​を使用してログインする

Question

私はです.2番の角度でAuth0にログインするには、A2 CLIを使用しているためにいくつかの問題があります.2つのCLIは同じではありません。これは間違いなくここで私の問題の原因です。

でも、CLIを使用しながらこの概念を学びたいと思っています。

とにかく、ここでの問題は、Auth-0ログインを使用すると、そのページにLog Outというリンクが表示されるはずです。それはしません。 Log Outはまだ表示されていませんが、Log Inはまだ公開されています。

また、ログインするとconsole.logメッセージが表示されず、localStorageに何も保存されていません。私のAuth0ウィジェットは、私がログインしたことを認めています。そして、私のAuth-0ダッシュボードもこれを確認します。

エラーメッセージは表示されません。私はすべての必要な情報を提供したことを確認するために

app.component.html

<ul> 
    <li [class.active]="isActive('')"><a [routerLink]="['Home']">Home</a></li> 
    <li [class.active]="isActive('/about')"><a [routerLink]="['About']">About</a></li> 
</ul> 

<ul> 
    <li><a href="#" *ngIf="!loggedIn()" (click)="login()">Log In</a></li> 
    <li><a href="#" *ngIf="loggedIn()" (click)="logout()">Log Out</a></li> 
</ul> 
<router-outlet></router-outlet> 

app.component.ts

import { Component } from '@angular/core'; 
import { Location } from '@angular/common'; 
import { tokenNotExpired, JwtHelper } from 'angular2-jwt'; 

declare var Auth0Lock; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
lock = new Auth0Lock('mike lient id', 'my dome main'); 
jwtHelper = new JwtHelper(); 
location: Location; 
constructor(location: Location){this.location = location;} 

login(){ 
var self = this; 
this.lock.show((err: string, profile: string, id_token: string) => { 
    if (err) {throw new Error(err);} 
    localStorage.setItem('profile', JSON.stringify(profile)); 
    localStorage.setItem('id_token', id_token); 
    console.log(
    this.jwtHelper.decodeToken(id_token), 
    this.jwtHelper.getTokenExpirationDate(id_token), 
    this.jwtHelper.isTokenExpired(id_token) 
    ); 
self.loggedIn();  
}); 
} 
logout(){ 
    localStorage.removeItem('profile'); 
    localStorage.removeItem('id_token'); 
    this.loggedIn(); 
} 
loggedIn(){return tokenNotExpired();} 
isActive(path) {return this.location.path() === path;} 
} 

、私は私のアプリをも含まれています.module。

app.module

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { routing, appRoutingProviders } from './app.routes'; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { AboutComponent } from './about/about.component'; 
import { NavigationComponent } from './navigation/navigation.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    AboutComponent, 
    NavigationComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing 
    ], 
    providers: [appRoutingProviders], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

私はthis.lock.showは、サブスクリプションであると仮定しています。

this.lock.show関数でエラーコールバックがなく、self.loggedIn()を呼び出すとブール値が返されます。あなたがそれを設定したい場合は、他に何かをしなければならないでしょう。

login(){ 
    var self = this; 
    this.lock.show((err: string, profile: string, id_token: string) => { 
     if (err) {throw new Error(err);} 
     localStorage.setItem('profile', JSON.stringify(profile)); 
     localStorage.setItem('id_token', id_token); 
     console.log(
      this.jwtHelper.decodeToken(id_token), 
      this.jwtHelper.getTokenExpirationDate(id_token), 
      this.jwtHelper.isTokenExpired(id_token) 
      ); 
     self.loggedIn(); // returns true/false but doesn't set anything! 
    }, (error) => console.log(error) // I think you need this 
    ); 
} 

あなたがif (err) {throw new Error(err);}ラインを持っているにもかかわらず、全体this.lock.show機能エラーならば、私はそれではなく、あなたが持っているsuccessコールバックのerrorコールバック関数を呼び出すということを前提としています。