如何在 angular 中使用电子邮件+通过 firebase 身份验证在 firebase 数据库中添加自定义数据

Question

我正在尝试从用户注册表中获取额外数据并将其放入 firebase 用户数据库中。我可以获取电子邮件+密码，但是，我无法让任何其他字段正常工作。

我尝试向 this.afAuth.auth.createUserWithEmailAndPassword(email, password) 添加更多变量，但它只适用于两个。

这是来自 auth.service.ts 的代码（SignUp 函数和其中也显示的函数）：

// Sign up with email/password
  SignUp(email, password) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        /* Call the SendVerificaitonMail() function when new user sign 
        up and returns promise */
        this.SendVerificationMail();
        this.SetUserData(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

// Send email verfificaiton when new user sign up
  SendVerificationMail() {
    return this.afAuth.auth.currentUser.sendEmailVerification()
    .then(() => {
      this.router.navigate(['verify-email-address']);
    })
  }

SetUserData(user) {
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
    const userData: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      emailVerified: user.emailVerified,
      department: user.department
    }
    return userRef.set(userData, {
      merge: true
    })
  }

这是来自 registration.component 的数据（先是 TS 文件）

// This is where the only modification in the TS file is - the rest is the default (CLI made)
constructor(
    public authService: AuthService
  ) { }

(HTML 文件)

<div class="displayTable">
  <div class="displayTableCell">

    <div class="authBlock">
      <h3>Sign Up</h3>

      <div class="formGroup">
        <input type="email" class="formControl" placeholder="Email Address" #userEmail required>
      </div>

      <div class="formGroup">
        <input type="password" class="formControl" placeholder="Password" #userPwd required>
      </div>
      <div class="formGroup">
          <input type="text" class="formControl" placeholder="Department" #userDept required>
      </div>
      <div class="formGroup">
        <input type="button" class="btn btnPrimary" value="Sign Up" (click)="authService.SignUp(userEmail.value, userPwd.value, userDept.value)">
      </div>

    <div class="redirectToLogin">
      <span>Already have an account? <span class="redirect" routerLink="/sign-in">Log In</span></span>
    </div>
  </div>

</div>

想要的结果：将部门（和添加的任何其他字段）连同已经存在的电子邮件 + 密码一起添加到数据库中。

实际结果：尝试使用 authService.SignUp() 函数提交部门时出现错误（如下所示）。（通过网站上的注册表单）。 https://imgur.com/a/VcZfLdx

Answer 1

错误是正确的，department 是 undefined，因此 firebase 会报错。您在您的模板中通过部门：

authService.SignUp(userEmail.value, userPwd.value, userDept.value)

但是在你对应的函数中，你还没有添加它作为参数，所以先添加它，同时传递给SetUserData:

SignUp(email, password, department) { // add here!
  return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
    .then((result) => {
      // ...
      this.SetUserData(result.user, department); // add as parameter also!
    })
    // ...
}

在SetUserData中也将其添加为参数，现在您可以访问该值了！

SetUserData(user, department) { // added as parameter
  // ...
  const userData: User = {
    uid: user.uid,
    email: user.email,
    displayName: user.displayName,
    photoURL: user.photoURL,
    emailVerified: user.emailVerified,
    department: department // HERE!
  }
  // ...
}

如何在 angular 中使用电子邮件+通过 firebase 身份验证在 firebase 数据库中添加自定义数据

How to add custom data in firebase database with email+pass firebase auth in angular

firebase

angular-services

firebase-authentication

angular

google-cloud-firestore