Как добавить пользовательские данные в базу данных firebase с помощью электронной почты + пройти аутентификацию firebase в angular

Я пытаюсь взять дополнительные данные из формы регистрации пользователя и поместить их в базу данных пользователей 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

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 696
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ошибка правильная, 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!
  }
  // ...
}

Вот что у меня там уже творится — я просто не знаю, как дальше брать поля из формы и задавать их в БД для пользователя.

Harrison Mayotte 31.07.2019 20:27

О, во всяком случае, не слишком внимательно смотрел, обновил свой ответ, и теперь он должен работать :)

AT82 01.08.2019 10:07

Большое спасибо! Я протестирую это в ближайшее время, но это выглядит довольно хорошо!

Harrison Mayotte 02.08.2019 01:18

Хорошо. Я протестировал его, и он отлично работает, однако теперь он не отображается в моем компоненте панели инструментов, когда я пытаюсь вызвать его как {{user.department}}, но такие вещи, как {{user.uid}} и {{user.email}}, не работают. Ниже приведен div, в котором предполагается привязка: <div *ngIf = "authService.userData as user"> <h1>Hello: {{(user.displayName) ? user.displayName : 'User'}}</h1><p>User ID: {{user.uid}</p><p>Email: {{user.email}}</p><p>Department: {{user.department}}</p></div>

Harrison Mayotte 02.08.2019 01:53

Вы отладили? Что печатает console.info(result.user)?

AT82 02.08.2019 10:04

Вам нужно сделать некоторую отладку самостоятельно. Поместите журналы консоли во все места и посмотрите, как выглядят данные. Кроме того, вы видите значения в БД?

AT82 02.08.2019 10:22

Я вижу значения в базе данных. Я пытался размещать console.info повсюду с различными вещами (например, после регистрации со всеми введенными значениями, во время входа в систему) и (я либо не знаю, где искать, либо) отдел не отображается /получить.

Harrison Mayotte 02.08.2019 21:49

Я запутался... Какие данные показываются, а какие нет? Сначала вы сказали, что отдел работает, а теперь говорите, что нет? Вы извлекаете оба пользовательских объекта, верно?

AT82 03.08.2019 00:03

Департамент не работал с самого начала, и это то, что я хотел исправить. (Как сбор отдела из формы, так и интерполяция строк в html компонента панели инструментов). Имя, UID и адрес электронной почты отображаются просто отлично, и я не уверен, как заставить отдел отображаться в том виде, в котором он есть в базе данных, и он (я думаю) должен работать.

Harrison Mayotte 03.08.2019 00:11

Получаете ли вы пользовательские объекты оба, потому что отдел доступен только в одной из таблиц.

AT82 03.08.2019 00:46

Какие два пользовательских объекта? В пользовательском объекте он показывает все данные, и при получении для него я верю он попадает в базу данных (в которой находится пользователь со всеми полями (отдел, электронная почта, имя пользователя и т. д.))

Harrison Mayotte 03.08.2019 02:14

ну, один из пользователей извлекается из таблицы аутентификации this.afAuth.authState, а второй, в котором находится значение отдела, извлекается из this.afs.doc(``users/${user.uid}``) Не могу помочь, если не вижу кода.

AT82 03.08.2019 10:42

Понял тебя. Я посмотрю на это.

Harrison Mayotte 03.08.2019 18:27

Будет ли этот код там, где мне нужно что-то изменить, чтобы перейти к базе данных вместо authState? this.afAuth.authState.subscribe(user => { if (user) { this.userData = user; localStorage.setItem('user', JSON.stringify(this.userData)); JSON.parse(localStorage.getItem('user')); } else { localStorage.setItem('user', null); JSON.parse(localStorage.getItem('user')); } })

Harrison Mayotte 03.08.2019 18:29

Этот фрагмент кода получает данные из таблицы пользователей авторизации, значение department там отсутствует. Вам также нужно запросить другую таблицу. От this.afs.doc(`users/${user.uid}`)

AT82 03.08.2019 18:32

Знаете, как бы я это сделал? Я попытался найти его, и я не уверен, что делать - мне нужно получить код из обоих или только из БД?

Harrison Mayotte 03.08.2019 23:54

Прочтите руководство о том, как получить документ: github.com/angular/angularfire2/blob/master/docs/firestore/…

AT82 04.08.2019 10:46

Другие вопросы по теме