添加 displayName createUserWithEmailAndPassword Firebase Firestore答案

【问题标题】：adding displayName createUserWithEmailAndPassword Firebase Firestore添加 displayName createUserWithEmailAndPassword Firebase Firestore
【发布时间】：2018-11-26 15:55:27
【问题描述】：

我正在按照本教程在 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});
}

【问题讨论】：

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

【解决方案1】：

只需添加新输入并将其传递给 emailSignUp 方法，将其保存在服务的临时属性中，并在 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});
}

【讨论】：

得到以下错误：[ts] The property '_ displayName' does not exist in the 'AuthService' type.

【解决方案2】：

你需要在你的service.ts中添加private displayName: string;

【讨论】：

【解决方案3】：

使用 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))
  });
}

【讨论】：

就是这样

【解决方案4】：

如果您想将用户文档添加到 Firestore，只需将数据“姓名、照片、地址...”添加到 pushUserData() 方法即可。

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});
}

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

emailSignUp(email: string, password: string) {
return this.afAuth.auth
  .createUserWithEmailAndPassword(email, password)
  .then(credential => {

    // ------------- update profile ------------- //
    credential.user.updateProfile({
       displayName: "exampleName",
       photoUrl: "https://photo..."
    })
    // ------------------------------------------ //

    this.pushUserData(credential.user);
    console.log('Usuario creado')
    this.router.navigate(['/login'])
  })
  .catch(error => {
    this.handleError(error)
  });
}

If you do not want to add an User doc to Firestore and just use the Firestore Auth data, you don`t need the pushUserData() method.

【讨论】：