在注册 Angular4 时为用户添加用户名和额外信息

Question

我想在注册时添加用户名并在登录时显示用户名，我使用了angularfire2和angular 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'])
}

注册表单(注册.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 作为用户名(displayName(，例如：

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