在註冊時添加用戶名和額外信息angular4

Question

我想在註冊時添加用戶名，並在登錄時顯示用戶名，我使用了angularfire2和角度4，我可以使用電子郵件和密碼註冊，但無法添加額外的信息，如名稱或圖像。

這是auth.service.ts：

export class AuthService { 
    authState: any = null; 
    constructor(private afAuth: AngularFireAuth, 
      private db: AngularFireDatabase, 
      private router:Router) { 

     this.afAuth.authState.subscribe((auth) => { 
      this.authState = auth 
     }); 
     } 

// Returns true if user is logged in 
get authenticated(): boolean { 
return this.authState !== null; 
} 

// Returns current user data 
get currentUser(): any { 
return this.authenticated ? this.authState : null; 
} 

// Returns current user UID 
get currentUserId() { 
// console.log(currentUserId); 
return this.authenticated ? this.authState.uid : ''; 
} 

// Returns current user display name or Guest 
get currentUserDisplayName(): string { 
    return this.authState['displayName']; 
} 

//// Email/Password Auth //// 
signupUser(email:string, password:string) { 
    return this.afAuth.auth.createUserWithEmailAndPassword(email, 
    password) 
    .then((user) => { 
    this.authState = user; 
    this.updateUserData() 
    }) 
    .catch(error => console.log(error)); 
} 
////signin//// 
signinUser(email:string, password:string) { 
return this.afAuth.auth.signInWithEmailAndPassword(email, password) 
    .then((user) => { 
    this.router.navigate(['/calendar']); 
    this.authState = user; 
    this.updateUserData() 
    }) 
    .catch(error => console.log(error)); 
} 
//// Sign Out //// 
logout(): void { 
this.afAuth.auth.signOut(); 
this.router.navigate(['/login']) 
} 

註冊表格（signup.component.html）：

<form (ngSubmit)="onSignup(f)" #f="ngForm"> 
       <div class="form-group"> 
        <label for="name">Enter your name </label> 
        <input type="text" class="form-control id="name" 
      [(ngModel)]='name' name="name"> 
       </div> 
      <div class="form-group"> 
      <label for="email">Enter you email </label> 
       <input type="text" class="form-control" id="email" 
      [(ngModel)]='email' name="email" required> 
      </div> 
      <div class="form-group"> 
      <label for="password"> Enter Password </label> 
      <input type="password" class="form-control" id="password" 
      [(ngModel)]='password' name="password" required> 
      </div> 

      <button class="btn rounded-btn" type="submit" 
      [routerLink]="['/login']" [disabled]="!f.valid" 
      (click)="onSignup(f)"> Register </button>&nbsp; 
      </form> 

signup.component.ts：

onSignup(form: NgForm){ 
    const name = form.value.name; 
    const password = form.value.password; 
    const email = form.value.email; 
    this.authService.signupUser(email, password); 
} 

如何我可以通過名稱將其添加到firebase中的用戶信息並顯示當前用戶的名稱嗎？

Answer 1

使用updateProfile爲用戶名（顯示名），例如：

user.updateProfile({ 
    displayName: "Superman" 
}).then(function() { 
    console.log("updateProfile success"); 
}, function(error) { 
    console.log("updateProfile", error); 
}); 

https://firebase.google.com/docs/auth/web/manage-users#update_a_users_profile

對於其他用戶屬性：https://firebase.google.com/docs/reference/js/firebase.User

編輯。隨着你的代碼，如下所示：

signupUser(email:string, password:string) { 
    return this.afAuth.auth.createUserWithEmailAndPassword(email, 
    password) 
    .then((user) => { 
    user.updateProfile({displayName: "Superman"}); 
    }) 
    .catch(error => console.log(error)); 
}