Firebase Auth store firstName и lastName пользователя

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

Данные для электронной почты, пароля, firstName, lastName поступают из поля ввода, которое обменивается данными посредством связывания данных с компонентом.

<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

Федеративный вход работает не так, как вход по электронной почте / pwd, но в любом случае создание пользователя в подсистеме firebase.auth () (кнопка / раздел «аутентификация» в консоли Firebase) отделено от хранения данных в хранилище данных, такое как База данных в реальном времени или Firestore. Итак, здесь происходит 2 отдельных события / события.

firstName и lastName - это просто записи, которые должны храниться в хранилище данных.

Рекомендуется использовать пользователей uid из firebase.auth().currentUser.uid в качестве идентификатора документа для пользовательского документа, хранящегося в коллекции "users" в вашем хранилище данных.

.onAuthStateChanged - это надлежащий клиентский наблюдатель для прослушивания для захвата uid зарегистрированного пользователя. Обозреватель не является синхронным - поэтому код для создания / сохранения дополнительной пользовательской информации в пользовательском документе должен запускаться из наблюдателя .onAuthStateChanged (после этого у вас будет заполненный объект user.

Answer 2

Если вы создаете пользователя с паролем (то есть, вызывая firebase.auth().createUserWithEmailAndPassword(email, password)), вы можете дождаться разрешения обещания обновить отображаемое имя. Это будет сделано с помощью метода update_profile объекта user. Вот ссылка на документацию:

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

После обновления вы можете получить доступ к displayName таким же образом, как и с другими поставщиками аутентификации (например, Facebook или Google).