Angular使用Firebase createUserWithEmailAndPassword新增字段写入Firestore方案

以下是可直接落地的修改步骤：

1. 修改signup.component.html，新增用户名字段 #

在原有表单中增加用户名输入框，同时调整注册按钮的点击事件，传递用户名参数：

<div class="formGroup">
    <input type="text" class="formControl" placeholder="自定义用户名" id="userName" required>
</div>

<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, userName.value)">
</div>

2. 调整auth.service.ts的SignUp方法，接收并传递用户名参数 #

给SignUp方法新增userName入参，调用SetUserData时带入该参数：

// 新增userName入参
SignUp(email: string, password: string, userName: string) {
    return this.afAuth.createUserWithEmailAndPassword(email, password)
        .then((result) => {
            /* Call the SendVerificaitonMail() function when new user sign
            up and returns promise */
            // this.SendVerificationMail();
            // 把用户名传给SetUserData方法
            this.SetUserData(result.user, userName);
        }).catch((error) => {
            window.alert(error.message)
        })
}

3. 修改SetUserData方法，将用户名写入Firestore #

调整SetUserData的逻辑，把传入的用户名作为自定义字段存入Firestore对应用户文档：

// 新增可选userName入参
SetUserData(user: any, userName?: string) {
  // 指定users集合下对应用户uid的文档路径
  const userDocRef = this.afs.doc(`users/${user.uid}`);
  const userData = {
    uid: user.uid,
    email: user.email,
    // 优先使用传入的自定义用户名
    displayName: userName || user.displayName,
    emailVerified: user.emailVerified
    // 可自行扩展其他自定义字段
  }
  // 写入文档，merge:true表示存在就合并字段，不存在就新建
  return userDocRef.set(userData, { merge: true });
}

如果你的项目中SetUserData方法已经有其他逻辑，只需要把userName参数的接收和字段写入逻辑对应加上即可。

内容的提问来源于stack exchange，提问作者Gintaras