Typescript Angular6 Firebase通过电子邮件和密码进行身份验证

请帮助我，我是angular6 firebase编程新手。 我有良好的工作firebase身份验证系统与电子邮件和密码。但从注册开始，我只能在数据库中存储用户时获取uid和电子邮件。我对updateProfile很感兴趣，但不知道如何在代码中实现我正在使用“@angular/fire”：“^5.0.0”， “firebase”：“^5.5.1”，所以我问这个版本好还是需要更改。 回到问题：服务：

 import { Injectable } from "@angular/core";
    import { AngularFireAuth } from "@angular/fire/auth";
    import {
      AngularFirestore,
      AngularFirestoreCollection,
      AngularFirestoreDocument
    } from "@angular/fire/firestore";
    import { Observable } from "rxjs";
    import "rxjs/add/operator/map";

    @Injectable()
    export class AuthService {
      constructor(private afAuth: AngularFireAuth, private db: AngularFirestore) {
        // this.afAuth.authState.subscribe(auth => console.log(auth));
      }

      login(email: string, password: string) {
        return new Promise((resolove, reject) => {
          this.afAuth.auth
            .signInWithEmailAndPassword(email, password)
            .then(userData => resolove(userData), err => reject(err));
        });
      }
      getAuth() {
        return this.afAuth.authState.map(auth => auth);
      }
      logout() {
        this.afAuth.auth.signOut();
      }
      register(email: string, password: string) {
        return new Promise((resolove, reject) => {
          this.afAuth.auth
            .createUserWithEmailAndPassword(email, password)
            .then(userData => resolove(userData), err => reject(err));
        });
      }
    }

组件

import { Component, OnInit } from "@angular/core";
import { AuthService } from "../../service/auth.service";
import { Router } from "@angular/router";

@Component({
  selector: "app-register",
  templateUrl: "./register.component.html",
  styleUrls: ["./register.component.css"]
})
export class RegisterComponent implements OnInit {
  email: string;
  password: string;
  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit() {}

  onSubmit() {
    this.authService
      .register(this.email, this.password)
      .then(res => {
        this.router.navigate(["/"]);
      })
      .catch(err => console.log(err.message));
  }
}

我的目标是将displayName和skill作为数据库中用户的属性。使用我的代码注册后，displayName为空。所以我的问题是如何在数据库中存储displayName？ 泰

---

维克多。

欢迎来到StackOverflow

之所以

displayName

为空，是因为默认情况下它为空（除非您是从Facebook和Google等社交网络登录）。你应该考虑的是：

• 每次注册时，在

  users

  collection中创建一个新文档（命名为任意名称）
• 在每次登录时，更新用户的现有文档（您不必这样做，但有时它很有用）
• 根据当前经过身份验证的用户获取用户文档

让我们从注册开始：

您有多种登录方法，但我将向您解释如何通过电子邮件/密码进行登录

因此，首先，我们需要创建方法

register

，该方法接受电子邮件和密码参数。我看到您已经创建了该方法，但是您应该知道，您不需要在承诺中定义

createUserWithEmailAndPassword

，因为它已经是一个承诺了。用户注册后，我们将把他的数据添加到我们的集合中：

register(email: string, password: string) {
  this.afAuth.auth.createUserWithEmailAndPassword(email, password)
    .then(userCredential => this.upsertUserData(userCredential))
    .catch(error => this.handleAuthError(error);
}

private upsertUserData(userCredential: firebase.auth.UserCredential) {
  // Upsert = Update/Insert.
  return this.afs.doc(`users/${userCredential.uid}`).update({
    email: userCredential.email
  });
}

private handleAuthError(error) {
  console.error(error)
}

如您所见，我创建了另外两个方法，以使方法

register

更清晰易读

现在我们已经完成了注册，让我们创建登录方法，它几乎是相同的：

login(email: string, password: string) {
  this.afAuth.signInWithEmailAndPassword(email, password)
    .then(userCredential => this.upsertUserData(userCredential))
    .catch(error = > this.handleAuthError(error));
}

在我们注册并登录应用程序后，我们希望获得用户的数据，以便我们可以这样做：

export class AuthService {

...

user$: Observable<{displayName: string, email: string}> = this.afAuth.authState.pipe(
  switchMap(user => Boolean(user) ? this.afs.doc(`users/${user.id}`).valueChanges() : of(null))
);

...
}

导出类身份验证服务{
...
用户$：Observable=this.afAuth.authState.pipe(
switchMap（user=>Boolean（user）？this.afs.doc（`users/${user.id}`）.valueChanges（）：of（null））
);
...
}

---

简单地说-

如果用户登录，这个.afAuth.authState

将发出一个对象。如果用户未登录，将返回空值

user$

将在用户登录时返回用户的文档数据。如果用户不存在（即authState=null），将返回null。

欢迎使用StackOverflow。我不确定你的问题是什么。我正在使用firebase电子邮件和密码验证。它是有效的。但我也想在数据库中存储displayName道具。例如，我想说Hello{{user.displayName}。但我不能，因为我不知道如何存储在数据库中。Atm displayName为空。您使用的是firestore还是实时数据库？云firestore。我的代码现在看起来和您的一样。但是我有一个错误：node_modules/@angular/fire/firebase.app.module.d.ts（17,22）中的错误：错误TS2420:Class'FirebaseApp'错误地实现了接口'app'。属性“消息传递”的类型不兼容。类型“（）=>消息传递”不可分配给类型“MessagingFactory”。类型“（）=>消息传递”中缺少属性“isSupported”。node_modules/@firebase/auth types/index.d.ts（271,21）：错误TS2314:泛型类型“Observer”需要1个类型参数。node_modules/@firebase/auth types/index.d.ts（276,21）：错误TS2314:我从“firebase”：“^5.5.1”移动到“firebase”：“^5.0.0”因为我不能在那个版本中使用firebase.auth，不知道为什么，它只是说找不到firebase/app你需要像导入〈code〉import{auth}一样导入auth从“firebase/app”导入firebase-

import*作为firebase从“firebase/app”导入