angular - 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)
      // ...
    });
  }
}

email、password、firstName、lastName 的数据来自一个输入字段，该字段通过与组件的数据绑定(bind)交换数据。

<input type="email" [(ngModel)]="emailAddress" required>

当我尝试获取用户显示名称时，它仅在用户使用社交提供商登录时才起作用。这很明显，因为他在使用电子邮件和密码注册时没有设置它。现在我想问你是否有人知道如何将 firstName 和 lastName 存储在 firebase 中，以便可以显示 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 对象。