Question

请帮助我，我是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作为数据库中User的属性。用我的代码注册后，displayName为null。所以我的问题是如何在数据库中存储displayName？泰维克多。

Answer 1

欢迎使用StackOverflow。

displayName为空的原因是因为默认情况下为空（除非您从诸如Facebook和Google之类的社交网络登录）。您应该考虑做的是：

每次注册时，请在users集合中创建一个新文档（将其命名为您想要的任何名称）。
每次登录时，更新用户的现有文档（您不必这样做，但有时很有用）。
根据当前经过身份验证的用户获取用户文档。

让我们从注册开始吧：

您有多种登录方法，但是我将通过电子邮件/密码向您说明。

因此，首先，我们需要创建方法register，该方法接受电子邮件和密码参数。我看到您已经创建了该方法，但是您应该知道您不需要将createUserWithEmailAndPassword的作用域放在一个Promise中，因为它已经是一个Promise。用户注册后，我们会将其数据添加到我们的集合中：

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))
);

...
}

简而言之-如果用户登录，this.afAuth.authState将发出一个对象。如果用户未登录，则将返回null。如果用户登录，user$将返回该用户的文档数据。如果该用户不存在（即authState = null），则将返回null。

带有电子邮件和密码的Angular6 Firebase身份验证

1 个答案: