Question

我按照本教程在Firebase中使用电子邮件和密码创建用户：https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/ createUserWithEmailAndPassword。

是否可以添加字段以便用户输入其名称然后将其存储在Firestore中？

到目前为止，我有这个并且它可以正常工作：

component.html

<form [formGroup]="forma" (ngSubmit)="emailSignUp()" novalidate>
  <!-- <div class="form-group">
    <input type="text" class="form-control" placeholder="Nombre" formControlName="displayName">
  </div> -->
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Email" formControlName="email">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" placeholder="Contraseña" formControlName="password">
  </div>
  <div class="my-2">
    <button class="btn btn-primary btn-block" type="submit" >Crear cuenta</button>
  </div>
</form>

components.ts

this.forma = fb.group ({
  //displayName: ['', Validators.required],
  email: [ '', [Validators.required, Validators.email] ],
  password: [ '', Validators.required ],
})

emailSignUp() {
  this.auth.emailSignUp(this.forma.value.email, this.forma.value.password)
}

service.ts

interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  favoriteColor?: string;
  fechaRegistro?: string;
}

constructor( private afAuth: AngularFireAuth, private afs: AngularFirestore) { 
  this.user = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
      } else {
        return of(null)
      }
    })
  )
}

emailSignUp(email: string, password: string) {
return this.afAuth.auth
  .createUserWithEmailAndPassword(email, password)
  .then(credential => {
    this.pushUserData(credential.user);
    console.log('Usuario creado')
    this.router.navigate(['/login'])
  })
  .catch(error => {
    this.handleError(error)
  });
}

private pushUserData( user: User ) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
const data: User = {
  uid: user.uid,
  email: user.email,
};
userRef.set(data, {merge: true});
}

Answer 1

使用updateProfile方法

register(email:string, password: string, fullname:string){
  return new Promise((resolve, reject) => {
    this.afAuth.auth.createUserWithEmailAndPassword(email, password)
    .then(userData => {
      userData.user.updateProfile({
        displayName: fullname,
        photoURL: ''
      }).then(() => {
        this.updateUserData(userData.user);
        resolve(userData);
      }); 
    },
    err => reject(err))
  });
}

Answer 2

只需添加新输入并将其传递给emailSignUp方法，将其保存在服务的temporery属性中，并将其保存到pushUserData方法

中的firestore

<强> component.html

<div class="form-group">
    <input type="email" class="form-control" placeholder="Email" formControlName="email">
  </div>

<强> components.ts

this.forma = fb.group ({
  //displayName: ['', Validators.required],
  email: [ '', [Validators.required, Validators.email] ],
  password: [ '', Validators.required ],
  displayName: [ '', Validators.required ],
})

emailSignUp() {
  this.auth.emailSignUp(this.forma.value.email, this.forma.value.password, this.forma.value.displayName)
}

<强> service.ts

emailSignUp(email: string, password: string, displayName: string) {
this._displayName = displayName ;
return this.afAuth.auth
  .createUserWithEmailAndPassword(email, password)
  .then(credential => {
    this.pushUserData(credential.user);
    console.log('Usuario creado')
    this.router.navigate(['/login'])
  })
  .catch(error => {
    this.handleError(error)
  });
}

private pushUserData( user: User ) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
const data: User = {
  uid: user.uid,
  email: user.email,
  displayName:this._displayName
};
userRef.set(data, {merge: true});
}

Answer 3

如果要向Firestore添加用户文档，只需将数据“名称，照片，地址...”添加到pushUserData（）方法。

part1 = AAAA
part2 = AAAA
part3 = ABBB
part4 = BBBB
part5 = AAAA
part6 = AAAB
part7 = BBBB
part8 = BB

现在，如果要设置firebase身份验证数据的displayName字段，只需在push方法之前更新de firebase用户配置文件。这样...

private pushUserData( user: User ) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
const data: User = {
  uid: user.uid,
  email: user.email,
  displayName: "exampleName",    <-------
  photoUrl: 'https://photo....'  <-------
};
userRef.set(data, {merge: true});
}

Answer 4

@ Paco Zevallos：请在您的服务中添加 private displayName：string; 。

添加displayName createUserWithEmailAndPassword Firebase Firestore

4 个答案: