Firebase Auth 存储用户的名字和姓氏

Question

亲爱的 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>

Answer 1

联合登录的操作与电子邮件/密码登录不同，但无论如何，在 firebase.auth() 子系统（Firebase 控制台中的“身份验证”按钮/部分）中创建用户与将数据存储在数据存储中是分开的，例如作为实时数据库或 Firestore。所以，这里发生了 2 个单独的事件/事情。

firstName并且lastName只是必须存储在数据存储中的记录。

最佳实践是使用uid来自的用户firebase.auth().currentUser.uid作为存储在"users"数据存储集合中的用户文档的文档 ID 。

.onAuthStateChanged是正确的客户端观察者，用于监听uid已登录用户的信息。观察者不是同步的——所以在用户文档中创建/存储额外用户信息的代码必须从.onAuthStateChanged观察者内部触发（在触发之后你将拥有一个填充的user对象。