使用auth0製作角度2的用戶配置文件系統？

所以我一直在關注如何爲我的應用程序構建用戶配置文件系統的auth0網站上的教程，但我無法讓它完全工作。我起牀到了我的登錄工作正常的地步，但是當將數據拉入用戶配置文件時，它只是不想工作。不知道從哪裏出發。使用auth0製作角度2的用戶配置文件系統？

教程IM使用https://auth0.com/docs/quickstart/spa/angular2/02-user-profile

我的代碼目前是

profile.components.html

<div class="panel panel-default profile-area"> 
    <div class="panel-heading"> 
     <h3>Profile</h3> 
    </div> 
    <div class="panel-body"> 
     <img src="{{profile?.picture}}" class="avatar" alt="avatar"> 
     <div> 
      <label><i class="glyphicon glyphicon-user"></i> Nickname</label> 
      <h3 class="nickname">{{ profile?.nickname }}</h3> 
     </div> 
     <pre class="full-profile">{{ profile | json }}</pre> 
    </div> 
</div>

profile.components.ts

import { Component, OnInit } from '@angular/core'; 
import { AuthenticationService } from './../services/authentication.service'; 


interface User { 
    id: number, 
    name: string, 
    image: string 
} 

@Component({ 
    selector: 'db-profile', 
    templateUrl: 'app/profile/profile.component.html' 
}) 
export class ProfileComponent implements OnInit { 

    profile: any; 

    constructor(public auth: AuthenticationService) { } 

    ngOnInit() { 
     if (this.auth.userProfile) { 
      this.profile = this.auth.userProfile; 
     } else { 
      this.auth.getProfile((err, profile) => { 
       this.profile = profile; 
      }); 
     } 
    } 

}

authentication.service.ts

// services/auth.service.ts 
import { Injectable, NgZone } from '@angular/core'; 
import {Router} from '@angular/router'; 
import { tokenNotExpired } from 'angular2-jwt'; 


// We want to avoid any 'name not found' 
// warnings from TypeScript 
declare var Auth0Lock: any; 

@Injectable() 
export class AuthenticationService { 
    constructor(private _router: Router, private _zone: NgZone) {} 

    lock = new Auth0Lock('gpnhOqi20kE7pOM61DYI6BuI93ZjgA4j', 'jasont8.auth0.com'); 

    login() { 
     this.lock.show((error: string, profile: Object, id_token: string) => { 
      if (error) { 
       console.log(error); 
      } 
      // We get a profile object for the user from Auth0 
      localStorage.setItem('profile', JSON.stringify(profile)); 
      // We also get the user's JWT 
      localStorage.setItem('id_token', id_token); 
     }); 
    } 

    logout() { 
     // To log out, we just need to remove 
     // the user's profile and token 
     localStorage.removeItem('profile'); 
     localStorage.removeItem('id_token'); 
    } 

    loggedIn() { 
     return tokenNotExpired(); 
    } 
}

來源

2017-07-17 Jason Tran

你可能想試試這個

constructor(private auth: Auth) { 
    this.profile = JSON.parse(localStorage.getItem('profile')); 
    this.token = localStorage.getItem('id_token'); 
    console.log(this.profile);  
}

來源

2017-07-17 23:48:31 kaws

使用auth0製作角度2的用戶配置文件系統？

回答

相關問題