typescript - Angular6 Firebase-autentisering med e-post och lösenord

Snälla hjälp mig, jag är ny på Angular6 Firebase-programmering. Jag har ett fungerande Firebase-auth-system med e-post och lösenord. Men vid registrering kan jag bara få uid och e-post när jag lagrar användaren i databasen. Jag har läst om updateProfile men vet inte hur jag ska implementera det i min kod. Jag använder "@angular/fire": "^5.0.0", "firebase": "^5.5.1", så jag undrar om denna version är bra eller om jag behöver byta. Tillbaka till frågan: Tjänst:

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

Komponent

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

Mitt mål är att ha displayName och skill som egenskaper för User i databasen. Efter registrering med min kod är displayName null. Så min fråga är hur man sparar displayName i databasen? Tack Viktor.

Svar #1

Välkommen till StackOverflow.

Anledningen till att displayName är null är att det är null som standard (om du inte loggar in från ett socialt nätverk som Facebook eller Google). Det du bör överväga att göra är:

• Vid varje registrering, skapa ett nytt dokument i users-samlingen (namnge det till vad du vill).
• Vid varje inloggning, uppdatera användarens befintliga dokument (du behöver inte, men ibland är det användbart).
• Hämta användardokumentet enligt den för närvarande autentiserade användaren.

Låt oss börja med registreringen:

Du har flera inloggningsmetoder, men jag ska förklara för dig hur det görs via e-post/lösenord.

Så först behöver vi skapa metoden register som accepterar parametrarna e-post och lösenord. Jag ser att du redan har skapat metoden, men du bör veta att du inte behöver kapsla createUserWithEmailAndPassword inuti ett löfte eftersom det redan är ett löfte. Efter att användaren registrerar sig, kommer vi att lägga till hans data i vår samling:

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

Som du kan se, skapade jag ytterligare två metoder för att göra metoden register mer ren och läsbar.

Nu när vi har gjort registreringen, låt oss skapa inloggningsmetoden, som är nästan samma:

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

Efter att vi har registrerat oss och loggat in i appen vill vi få användarens data så att vi kan göra det på följande sätt:

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

...
}

För att göra det enkelt - this.afAuth.authState kommer att sända ett objekt om användaren är inloggad. Om användaren inte är inloggad kommer null att returneras. user$ kommer att returnera dokumentdata för användaren om användaren är inloggad. Om användaren inte finns (dvs. authState=null), kommer null att returneras.