时间戳

首页 > 解决方案 > 如何使用电子邮件在firebase数据库中添加自定义数据+通过角度的firebase身份验证

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

问题描述

我正在尝试从用户注册表单中获取其他数据并将其放入 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

标签： angularfirebasegoogle-cloud-firestorefirebase-authenticationangular-services

解决方案

错误是正确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!
  }
  // ...
}

推荐阅读