Angular Firebase createUserWithEmailAndPassword 添加附加字段答案

【问题标题】：Angular Firebase createUserWithEmailAndPassword add additional fieldAngular Firebase createUserWithEmailAndPassword 添加附加字段
【发布时间】：2021-10-20 14:06:57
【问题描述】：

我正在尝试实现 Firebase createUserWithEmailAndPassword 方法，但我想在 Cloud Firestore 中再添加一个带有名称的字段。这就是我的代码现在的样子：

auth.service.ts

SignUp(email: string, password: string) {
    return this.afAuth.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)
        })
}

signup.component.html

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

<div class="formGroup">
    <input type="password" class="formControl" placeholder="Password" id="userPwd" required>
</div>

<div class="formGroup">
    <input type="button" class="btn btnPrimary" value="Sign Up"
        (click)="authService.SignUp(userEmail.value, userPwd.value)">
</div>

我可以如何实现它的任何选项？

【问题讨论】：

创建您自己的数据模型，例如具有额外属性的 myUser，并将 Firebase 用户属性（如 uniqueId、电子邮件等）复制到您自己的数据模型类实例，然后将您的数据模型设置为 Cloud Firestore
函数 DocumentReference.set() 使用无效数据调用。不支持的字段值：未定义（在文档用户/uId 中的字段名称中找到）@RahulVyas
您可能需要将数据模型转换为 Map 以存储在 Cloud Firestore 上。我没有使用云 Firestore，但我现在正在使用实时数据库，并且我已经在做你想要实现的同样的事情。

标签： angular typescript google-cloud-firestore firebase-authentication

【解决方案1】：

好吧，我有（似乎与需要的相似）示例案例（它使用 Auth 服务订阅 Firebase Auth 并在 Rtdb 中创建新用户（在您的案例中使用 firestore））：

 // ...
signUp({ email, pass, username }: { email: string; pass: string; username?: string; } = { email: '', pass: '', username: '' }) {
    if (!email.trim().length || !pass.trim().length || !username.trim().length) return throwError(`Email / Password / Username should not be empty..!  `);

    return from(this.fAuth.auth.createUserWithEmailAndPassword(email, pass)).pipe(
      concatMap((fbUserCreds: auth.UserCredential) => {
        let { uid, email, ...rest } = fbUserCreds.user;
        return this.userSvc.upsertDbUser({ id: uid, name: username, email }).pipe(
          concatMap(_user => {
            return this.setDbUserLoggedinStatus({ uid, status: true }).pipe(
              mapTo({ id: uid, email } as Partial<IUser>)
            );
          })
        );
      }),
      tap((user) => this.userSvc.setCurrentId(user.id)),
      catchError((err: auth.AuthError) => {
        console.error(`[FbSvc->signInUser()]::::::::   ${JSON.stringify(err.message)}`);
        return throwError(err);
      })
    );
  }

https://github.com/VovanSuper/IonicChat-firebase-functions-dummy/blob/master/src/app/shared/providers/auth.service.ts#L48

【讨论】：