尊敬的Stackoverflow社区,
我们正在使用Firebase Auth进行身份验证。为此,我们提供使用Google和Facebook的社交登录以及使用电子邮件和密码登录。以下代码显示了想要稍后使用电子邮件和密码登录的用户的注册页面。
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
public emailAddress="";
public firstName="";
public lastName="";
public password="";
constructor(public afAuth: AngularFireAuth, private router: Router) {
}
ngOnInit() {
}
reset() {
this.emailAddress=""
this.password=""
this.firstName=""
this.lastName=""
}
register() {
let emailAddress = this.emailAddress
let password = this.password
let firstName = this.firstName
let lastName = this.lastName
this.reset()
console.log(emailAddress)
console.log(password)
auth().createUserWithEmailAndPassword(emailAddress, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
console.log(errorCode)
var errorMessage = error.message;
console.log(errorMessage)
// ...
});
}
}
电子邮件,密码,名字,姓氏的数据来自一个输入字段,该输入字段通过与组件的数据绑定交换数据。
<input type="email" [(ngModel)]="emailAddress" required>
当我尝试让用户使用显示名称时,该显示名称仅在用户使用社交提供程序登录时才有效。这很明显,因为他在使用电子邮件和密码注册时没有设置它。现在我想问你,是否有人知道如何在firebase中存储firstName和lastName以便可以显示user.displayName。
<div *ngIf="afAuth.user | async as user; else notAuth">
Hello {{ user.displayName }}
</div>
答案 0 :(得分:0)
如果您使用密码创建用户(即通过调用firebase.auth().createUserWithEmailAndPassword(email, password)
),则可以等待诺言解析更新显示名称。这可以通过update_profile
对象的user
方法来完成。这是文档的链接:
https://firebase.google.com/docs/auth/web/manage-users#update_a_users_profile
更新后,您可以以与其他身份验证提供程序(即Facebook或Google)相同的方式访问displayName
。
答案 1 :(得分:0)
联合登录的操作与电子邮件/ pwd登录的操作不同,但是无论如何,在firebase.auth()子系统(Firebase控制台中的“身份验证”按钮/部分)中创建用户与将数据存储在数据存储,例如实时数据库或Firestore。所以,这是2个独立的事件/事情。
firstName
和lastName
只是必须存储在数据存储区中的记录。
最佳做法是使用uid
中的用户firebase.auth().currentUser.uid
作为存储在数据存储区"users"
集合中的用户文档的文档ID。
.onAuthStateChanged
是适当的客户端观察者,可用于监听以捕获已登录用户的uid
。观察者不是同步的-因此,必须从.onAuthStateChanged
观察者中触发在用户文档中创建/存储其他用户信息的代码(在激发之后,您将有一个填充的user
对象。>